ServiceWorker: use network-first strategy

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Posts: letterbox images to 19:6 again.
 - Status Info: moved context (repost, pinned) to improve UX.
 - Posts: remove file icon from empty link previews.
+- ServiceWorker: switch to a network-first strategy. The "An update is available!" prompt goes away.
 
 ### Fixed
 - Layout: use accent color for "floating action button" (mobile compose button).

app/soapbox/locales/en.json

@@ -1282,8 +1282,6 @@
   "sw.state.unknown": "Unknown",
   "sw.state.waiting": "Waiting",
   "sw.status": "Status",
-  "sw.update": "Update",
-  "sw.update_text": "An update is available.",
   "sw.url": "Script URL",
   "tabs_bar.all": "All",
   "tabs_bar.dashboard": "Dashboard",

app/soapbox/main.tsx

@@ -2,11 +2,8 @@ import * as OfflinePluginRuntime from '@lcdp/offline-plugin/runtime';
 import React from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
 import { createRoot } from 'react-dom/client';
-import { defineMessages } from 'react-intl';
 
-import { setSwUpdating } from 'soapbox/actions/sw';
 import * as BuildConfig from 'soapbox/build-config';
-import { store } from 'soapbox/store';
 import { printConsoleWarning } from 'soapbox/utils/console';
 
 import '../soapbox/iframe';
@@ -17,12 +14,6 @@ import { default as Soapbox } from './containers/soapbox';
 import * as monitoring from './monitoring';
 import * as perf from './performance';
 import ready from './ready';
-import toast from './toast';
-
-const messages = defineMessages({
-  update: { id: 'sw.update', defaultMessage: 'Update' },
-  updateText: { id: 'sw.update_text', defaultMessage: 'An update is available.' },
-});
 
 perf.start('main()');
 
@@ -43,21 +34,7 @@ ready(() => {
   if (BuildConfig.NODE_ENV === 'production') {
     // avoid offline in dev mode because it's harder to debug
     // https://github.com/NekR/offline-plugin/pull/201#issuecomment-285133572
-    OfflinePluginRuntime.install({
-      onUpdateReady: function() {
-        toast.info(messages.updateText, {
-          actionLabel: messages.update,
-          action: () => {
-            store.dispatch(setSwUpdating(true));
-            OfflinePluginRuntime.applyUpdate();
-          },
-          duration: Infinity,
-        });
-      },
-      onUpdated: function() {
-        window.location.reload();
-      },
-    });
+    OfflinePluginRuntime.install();
   }
   perf.stop('main()');
 });

webpack/production.ts

@@ -40,6 +40,7 @@ const configuration: Configuration = {
     }),
     new OfflinePlugin({
       autoUpdate: true,
+      responseStrategy: 'network-first',
       caches: {
         main: [':rest:'],
         additional: [
@@ -146,7 +147,6 @@ const configuration: Configuration = {
         requestTypes: ['navigate'],
       }],
       safeToUseOptionalCaches: true,
-      appShell: join(FE_SUBDIRECTORY, '/'),
     }),
   ],
 };