Cache media (#6902)
This commit is contained in:
		
				
					committed by
					
						 Eugen Rochko
						Eugen Rochko
					
				
			
			
				
	
			
			
			
						parent
						
							31e7b73084
						
					
				
				
					commit
					ca42f9b0eb
				
			| @@ -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'; | ||||
|   | ||||
| @@ -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'; | ||||
|   | ||||
| @@ -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'; | ||||
|   | ||||
| @@ -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); | ||||
| } | ||||
| @@ -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; | ||||
|     })); | ||||
|   } | ||||
| }); | ||||
|   | ||||
							
								
								
									
										151
									
								
								app/javascript/mastodon/storage/modifier.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										151
									
								
								app/javascript/mastodon/storage/modifier.js
									
									
									
									
									
										Normal file
									
								
							| @@ -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); | ||||
| } | ||||
| @@ -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', | ||||
|   | ||||
| @@ -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", | ||||
|   | ||||
| @@ -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" | ||||
|   | ||||
		Reference in New Issue
	
	Block a user