Replace to workbox-webpack-plugin from offline-plugin (#18409)

app/javascript/mastodon/service_worker/entry.js

@@ -1,20 +1,59 @@
-// import { freeStorage, storageFreeable } from '../storage/modifier';
-import './web_push_notifications';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { precacheAndRoute } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { CacheFirst } from 'workbox-strategies';
+import { handleNotificationClick, handlePush } from './web_push_notifications';
 
-// function openSystemCache() {
-//   return caches.open('mastodon-system');
-// }
+const CACHE_NAME_PREFIX = 'mastodon-';
 
 function openWebCache() {
-  return caches.open('mastodon-web');
+  return caches.open(`${CACHE_NAME_PREFIX}web`);
 }
 
 function fetchRoot() {
   return fetch('/', { credentials: 'include', redirect: 'manual' });
 }
 
-// const firefox = navigator.userAgent.match(/Firefox\/(\d+)/);
-// const invalidOnlyIfCached = firefox && firefox[1] < 60;
+precacheAndRoute(self.__WB_MANIFEST);
+
+registerRoute(
+  /locale_.*\.js$/,
+  new CacheFirst({
+    cacheName: `${CACHE_NAME_PREFIX}locales`,
+    plugins: [
+      new ExpirationPlugin({
+        maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
+        maxEntries: 5,
+      }),
+    ],
+  }),
+);
+
+registerRoute(
+  ({ request }) => request.destination === 'font',
+  new CacheFirst({
+    cacheName: `${CACHE_NAME_PREFIX}fonts`,
+    plugins: [
+      new ExpirationPlugin({
+        maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
+        maxEntries: 5,
+      }),
+    ],
+  }),
+);
+
+registerRoute(
+  ({ request }) => ['audio', 'image', 'track', 'video'].includes(request.destination),
+  new CacheFirst({
+    cacheName: `m${CACHE_NAME_PREFIX}media`,
+    plugins: [
+      new ExpirationPlugin({
+        maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
+        maxEntries: 256,
+      }),
+    ],
+  }),
+);
 
 // 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.
@@ -52,26 +91,8 @@ self.addEventListener('fetch', function(event) {
 
       return response;
     }));
-  } /* else if (storageFreeable && (ATTACHMENT_HOST ? url.host === ATTACHMENT_HOST : url.pathname.startsWith('/system/'))) {
-    event.respondWith(openSystemCache().then(cache => {
-      return cache.match(event.request.url).then(cached => {
-        if (cached === undefined) {
-          const asyncResponse = invalidOnlyIfCached && event.request.cache === 'only-if-cached' ?
-            fetch(event.request, { cache: 'no-cache' }) : fetch(event.request);
-
-          return asyncResponse.then(response => {
-            if (response.ok) {
-              cache
-                .put(event.request.url, response.clone())
-                .catch(()=>{}).then(freeStorage()).catch();
-            }
-
-            return response;
-          });
-        }
-
-        return cached;
-      });
-    }));
-  } */
+  }
 });
+
+self.addEventListener('push', handlePush);
+self.addEventListener('notificationclick', handleNotificationClick);

app/javascript/mastodon/service_worker/web_push_notifications.js

@@ -75,7 +75,7 @@ const formatMessage = (messageId, locale, values = {}) =>
 const htmlToPlainText = html =>
   unescape(html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<[^>]*>/g, ''));
 
-const handlePush = (event) => {
+export const handlePush = (event) => {
   const { access_token, notification_id, preferred_locale, title, body, icon } = event.data.json();
 
   // Placeholder until more information can be loaded
@@ -189,7 +189,7 @@ const openUrl = url =>
     return self.clients.openWindow(url);
   });
 
-const handleNotificationClick = (event) => {
+export const handleNotificationClick = (event) => {
   const reactToNotificationClick = new Promise((resolve, reject) => {
     if (event.action) {
       if (event.action === 'expand') {
@@ -211,6 +211,3 @@ const handleNotificationClick = (event) => {
 
   event.waitUntil(reactToNotificationClick);
 };
-
-self.addEventListener('push', handlePush);
-self.addEventListener('notificationclick', handleNotificationClick);