Cache media (#6902)

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;
+    }));
   }
 });