commit: ca42f9b0ebfa1f4e8e86745a79af138b5865daee
parent: 31e7b7308489ecc8b43f83b78ec0a288c4195d5b
Author: Akihiko Odaki <akihiko.odaki.4i@stu.hosei.ac.jp>
Date: Tue, 27 Mar 2018 19:32:30 +0900
Cache media (#6902)
Diffstat:
10 files changed, 189 insertions(+), 103 deletions(-)
diff --git a/app/javascript/mastodon/actions/accounts.js b/app/javascript/mastodon/actions/accounts.js
@@ -1,5 +1,5 @@
import api, { getLinks } from '../api';
-import asyncDB from '../db/async';
+import asyncDB from '../storage/db';
import { importAccount, importFetchedAccount, importFetchedAccounts } from './importer';
export const ACCOUNT_FETCH_REQUEST = 'ACCOUNT_FETCH_REQUEST';
diff --git a/app/javascript/mastodon/actions/importer/index.js b/app/javascript/mastodon/actions/importer/index.js
@@ -1,4 +1,4 @@
-import { putAccounts, putStatuses } from '../../db/modifier';
+import { putAccounts, putStatuses } from '../../storage/modifier';
import { normalizeAccount, normalizeStatus } from './normalizer';
export const ACCOUNT_IMPORT = 'ACCOUNT_IMPORT';
diff --git a/app/javascript/mastodon/actions/statuses.js b/app/javascript/mastodon/actions/statuses.js
@@ -1,6 +1,6 @@
import api from '../api';
-import asyncDB from '../db/async';
-import { evictStatus } from '../db/modifier';
+import asyncDB from '../storage/db';
+import { evictStatus } from '../storage/modifier';
import { deleteFromTimelines } from './timelines';
import { fetchStatusCard } from './cards';
diff --git a/app/javascript/mastodon/db/modifier.js b/app/javascript/mastodon/db/modifier.js
@@ -1,93 +0,0 @@
-import asyncDB from './async';
-
-const limit = 1024;
-
-function put(name, objects, callback) {
- asyncDB.then(db => {
- const putTransaction = db.transaction(name, 'readwrite');
- const putStore = putTransaction.objectStore(name);
- const putIndex = putStore.index('id');
-
- objects.forEach(object => {
- function add() {
- putStore.add(object);
- }
-
- putIndex.getKey(object.id).onsuccess = retrieval => {
- if (retrieval.target.result) {
- putStore.delete(retrieval.target.result).onsuccess = add;
- } else {
- add();
- }
- };
- });
-
- putTransaction.oncomplete = () => {
- const readTransaction = db.transaction(name, 'readonly');
- const readStore = readTransaction.objectStore(name);
-
- readStore.count().onsuccess = count => {
- const excess = count.target.result - limit;
-
- if (excess > 0) {
- readStore.getAll(null, excess).onsuccess =
- retrieval => callback(retrieval.target.result.map(({ id }) => id));
- }
- };
- };
- });
-}
-
-export function evictAccounts(ids) {
- asyncDB.then(db => {
- const transaction = db.transaction(['accounts', 'statuses'], 'readwrite');
- const accounts = transaction.objectStore('accounts');
- const accountsIdIndex = accounts.index('id');
- const accountsMovedIndex = accounts.index('moved');
- const statuses = transaction.objectStore('statuses');
- const statusesIndex = statuses.index('account');
-
- function evict(toEvict) {
- toEvict.forEach(id => {
- accountsMovedIndex.getAllKeys(id).onsuccess =
- ({ target }) => evict(target.result);
-
- statusesIndex.getAll(id).onsuccess =
- ({ target }) => evictStatuses(target.result.map(({ id }) => id));
-
- accountsIdIndex.getKey(id).onsuccess =
- ({ target }) => target.result && accounts.delete(target.result);
- });
- }
-
- evict(ids);
- });
-}
-
-export function evictStatus(id) {
- return evictStatuses([id]);
-}
-
-export function evictStatuses(ids) {
- asyncDB.then(db => {
- const store = db.transaction('statuses', 'readwrite').objectStore('statuses');
- const idIndex = store.index('id');
- const reblogIndex = store.index('reblog');
-
- ids.forEach(id => {
- reblogIndex.getAllKeys(id).onsuccess =
- ({ target }) => target.result.forEach(reblogKey => store.delete(reblogKey));
-
- idIndex.getKey(id).onsuccess =
- ({ target }) => target.result && store.delete(target.result);
- });
- });
-}
-
-export function putAccounts(records) {
- put('accounts', records, evictAccounts);
-}
-
-export function putStatuses(records) {
- put('statuses', records, evictStatuses);
-}
diff --git a/app/javascript/mastodon/service_worker/entry.js b/app/javascript/mastodon/service_worker/entry.js
@@ -1,6 +1,10 @@
import './web_push_notifications';
-function openCache() {
+function openSystemCache() {
+ return caches.open('mastodon-system');
+}
+
+function openWebCache() {
return caches.open('mastodon-web');
}
@@ -11,7 +15,7 @@ function fetchRoot() {
// Cause a new version of a registered Service Worker to replace an existing one
// that is already installed, and replace the currently active worker on open pages.
self.addEventListener('install', function(event) {
- event.waitUntil(Promise.all([openCache(), fetchRoot()]).then(([cache, root]) => cache.put('/', root)));
+ event.waitUntil(Promise.all([openWebCache(), fetchRoot()]).then(([cache, root]) => cache.put('/', root)));
});
self.addEventListener('activate', function(event) {
event.waitUntil(self.clients.claim());
@@ -21,7 +25,7 @@ self.addEventListener('fetch', function(event) {
if (url.pathname.startsWith('/web/')) {
const asyncResponse = fetchRoot();
- const asyncCache = openCache();
+ const asyncCache = openWebCache();
event.respondWith(asyncResponse.then(async response => {
if (response.ok) {
@@ -31,10 +35,10 @@ self.addEventListener('fetch', function(event) {
}
throw null;
- }).catch(() => caches.match('/')));
+ }).catch(() => asyncCache.then(cache => cache.match('/'))));
} else if (url.pathname === '/auth/sign_out') {
const asyncResponse = fetch(event.request);
- const asyncCache = openCache();
+ const asyncCache = openWebCache();
event.respondWith(asyncResponse.then(async response => {
if (response.ok || response.type === 'opaqueredirect') {
@@ -44,5 +48,21 @@ self.addEventListener('fetch', function(event) {
return response;
}));
+ } else if (process.env.CDN_HOST ? url.host === process.env.CDN_HOST : url.pathname.startsWith('/system/')) {
+ event.respondWith(openSystemCache().then(async cache => {
+ const cached = await cache.match(event.request.url);
+
+ if (cached === undefined) {
+ const fetched = await fetch(event.request);
+
+ if (fetched.ok) {
+ await cache.put(event.request.url, fetched);
+ }
+
+ return fetched.clone();
+ }
+
+ return cached;
+ }));
}
});
diff --git a/app/javascript/mastodon/db/async.js b/app/javascript/mastodon/storage/db.js
diff --git a/app/javascript/mastodon/storage/modifier.js b/app/javascript/mastodon/storage/modifier.js
@@ -0,0 +1,151 @@
+import asyncDB from './db';
+import { autoPlayGif } from '../initial_state';
+
+const accountAssetKeys = ['avatar', 'avatar_static', 'header', 'header_static'];
+const avatarKey = autoPlayGif ? 'avatar' : 'avatar_static';
+const limit = 1024;
+const asyncCache = caches.open('mastodon-system');
+
+function put(name, objects, onupdate, oncreate) {
+ return asyncDB.then(db => new Promise((resolve, reject) => {
+ const putTransaction = db.transaction(name, 'readwrite');
+ const putStore = putTransaction.objectStore(name);
+ const putIndex = putStore.index('id');
+
+ objects.forEach(object => {
+ putIndex.getKey(object.id).onsuccess = retrieval => {
+ function addObject() {
+ putStore.add(object);
+ }
+
+ function deleteObject() {
+ putStore.delete(retrieval.target.result).onsuccess = addObject;
+ }
+
+ if (retrieval.target.result) {
+ if (onupdate) {
+ onupdate(object, retrieval.target.result, putStore, deleteObject);
+ } else {
+ deleteObject();
+ }
+ } else {
+ if (oncreate) {
+ oncreate(object, addObject);
+ } else {
+ addObject();
+ }
+ }
+ };
+ });
+
+ putTransaction.oncomplete = () => {
+ const readTransaction = db.transaction(name, 'readonly');
+ const readStore = readTransaction.objectStore(name);
+ const count = readStore.count();
+
+ count.onsuccess = () => {
+ const excess = count.result - limit;
+
+ if (excess > 0) {
+ const retrieval = readStore.getAll(null, excess);
+
+ retrieval.onsuccess = () => resolve(retrieval.result);
+ retrieval.onerror = reject;
+ } else {
+ resolve([]);
+ }
+ };
+
+ count.onerror = reject;
+ };
+
+ putTransaction.onerror = reject;
+ }));
+}
+
+function evictAccountsByRecords(records) {
+ asyncDB.then(db => {
+ const transaction = db.transaction(['accounts', 'statuses'], 'readwrite');
+ const accounts = transaction.objectStore('accounts');
+ const accountsIdIndex = accounts.index('id');
+ const accountsMovedIndex = accounts.index('moved');
+ const statuses = transaction.objectStore('statuses');
+ const statusesIndex = statuses.index('account');
+
+ function evict(toEvict) {
+ toEvict.forEach(record => {
+ asyncCache.then(cache => accountAssetKeys.forEach(key => cache.delete(records[key])));
+
+ accountsMovedIndex.getAll(record.id).onsuccess = ({ target }) => evict(target.result);
+
+ statusesIndex.getAll(record.id).onsuccess =
+ ({ target }) => evictStatusesByRecords(target.result);
+
+ accountsIdIndex.getKey(record.id).onsuccess =
+ ({ target }) => target.result && accounts.delete(target.result);
+ });
+ }
+
+ evict(records);
+ });
+}
+
+export function evictStatus(id) {
+ return evictStatuses([id]);
+}
+
+export function evictStatuses(ids) {
+ asyncDB.then(db => {
+ const store = db.transaction('statuses', 'readwrite').objectStore('statuses');
+ const idIndex = store.index('id');
+ const reblogIndex = store.index('reblog');
+
+ ids.forEach(id => {
+ reblogIndex.getAllKeys(id).onsuccess =
+ ({ target }) => target.result.forEach(reblogKey => store.delete(reblogKey));
+
+ idIndex.getKey(id).onsuccess =
+ ({ target }) => target.result && store.delete(target.result);
+ });
+ });
+}
+
+function evictStatusesByRecords(records) {
+ evictStatuses(records.map(({ id }) => id));
+}
+
+export function putAccounts(records) {
+ const newURLs = [];
+
+ put('accounts', records, (newRecord, oldKey, store, oncomplete) => {
+ store.get(oldKey).onsuccess = ({ target }) => {
+ accountAssetKeys.forEach(key => {
+ const newURL = newRecord[key];
+ const oldURL = target.result[key];
+
+ if (newURL !== oldURL) {
+ asyncCache.then(cache => cache.delete(oldURL));
+ }
+ });
+
+ const newURL = newRecord[avatarKey];
+ const oldURL = target.result[avatarKey];
+
+ if (newURL !== oldURL) {
+ newURLs.push(newURL);
+ }
+
+ oncomplete();
+ };
+ }, (newRecord, oncomplete) => {
+ newURLs.push(newRecord[avatarKey]);
+ oncomplete();
+ }).then(records => {
+ evictAccountsByRecords(records);
+ asyncCache.then(cache => cache.addAll(newURLs));
+ });
+}
+
+export function putStatuses(records) {
+ put('statuses', records).then(evictStatusesByRecords);
+}
diff --git a/config/webpack/production.js b/config/webpack/production.js
@@ -90,7 +90,7 @@ module.exports = merge(sharedConfig, {
'**/*.woff',
],
ServiceWorker: {
- entry: path.join(__dirname, '../../app/javascript/mastodon/service_worker/entry.js'),
+ entry: `imports-loader?process.env=>${encodeURIComponent(JSON.stringify(process.env))}!${encodeURI(path.join(__dirname, '../../app/javascript/mastodon/service_worker/entry.js'))}`,
cacheName: 'mastodon',
output: '../assets/sw.js',
publicPath: '/sw.js',
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
"glob": "^7.1.1",
"http-link-header": "^0.8.0",
"immutable": "^3.8.2",
+ "imports-loader": "^0.8.0",
"intersection-observer": "^0.5.0",
"intl": "^1.2.5",
"intl-messageformat": "^2.2.0",
diff --git a/yarn.lock b/yarn.lock
@@ -3364,6 +3364,13 @@ import-local@^0.1.1:
pkg-dir "^2.0.0"
resolve-cwd "^2.0.0"
+imports-loader@^0.8.0:
+ version "0.8.0"
+ resolved "https://registry.yarnpkg.com/imports-loader/-/imports-loader-0.8.0.tgz#030ea51b8ca05977c40a3abfd9b4088fe0be9a69"
+ dependencies:
+ loader-utils "^1.0.2"
+ source-map "^0.6.1"
+
imurmurhash@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
