Merge branch 'vite-sw2' into 'develop'

Build the ServiceWorker with Vite

See merge request soapbox-pub/soapbox!2681

app/soapbox/components/error-boundary.tsx

@@ -8,7 +8,7 @@ import { HStack, Text, Stack } from 'soapbox/components/ui';
 import { captureException } from 'soapbox/monitoring';
 import KVStore from 'soapbox/storage/kv-store';
 import sourceCode from 'soapbox/utils/code';
-import { unregisterSw } from 'soapbox/utils/sw';
+import { unregisterSW } from 'soapbox/utils/sw';
 
 import SiteLogo from './site-logo';
 
@@ -96,7 +96,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
 
     if ('serviceWorker' in navigator) {
       e.preventDefault();
-      unregisterSw().then(goHome).catch(goHome);
+      unregisterSW().then(goHome).catch(goHome);
     }
   };
 

app/soapbox/features/developers/service-worker-info.tsx

@@ -3,7 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import List, { ListItem } from 'soapbox/components/list';
 import { HStack, Text, Column, FormActions, Button, Stack, Icon } from 'soapbox/components/ui';
-import { unregisterSw } from 'soapbox/utils/sw';
+import { unregisterSW } from 'soapbox/utils/sw';
 
 import Indicator from './components/indicator';
 
@@ -99,7 +99,7 @@ const ServiceWorkerInfo: React.FC<IServiceWorkerInfo> = () => {
   };
 
   const handleRestart = async() => {
-    await unregisterSw();
+    await unregisterSW();
     window.location.reload();
   };
 

app/soapbox/main.tsx

@@ -25,13 +25,14 @@ import './precheck';
 import { default as Soapbox } from './containers/soapbox';
 import * as monitoring from './monitoring';
 import ready from './ready';
+import { registerSW } from './utils/sw';
 
 // Sentry
 monitoring.start();
 
-// Print console warning
 if (BuildConfig.NODE_ENV === 'production') {
   printConsoleWarning();
+  registerSW('/sw.js');
 }
 
 ready(() => {

app/soapbox/service-worker/sw.ts

@@ -3,14 +3,14 @@ import IntlMessageFormat from 'intl-messageformat';
 import 'intl-pluralrules';
 import unescape from 'lodash/unescape';
 
-import locales from './web-push-locales';
-
 import type {
   Account as AccountEntity,
   Notification as NotificationEntity,
   Status as StatusEntity,
 } from 'soapbox/types/entities';
 
+const locales = import.meta.compileTime('./web-push-locales.ts');
+
 /** Limit before we start grouping device notifications into a single notification. */
 const MAX_NOTIFICATIONS = 5;
 /** Tag for the grouped notification. */

app/soapbox/service-worker/web-push-locales.ts

@@ -1,16 +1,14 @@
-/* @preval */
+import fs from 'node:fs';
+import path from 'path';
 
-const fs   = require('fs');
+const filtered: Record<string, Record<string, string>> = {};
-const path = require('path');
-
-const filtered  = {};
 const filenames = fs.readdirSync(path.resolve(__dirname, '../locales'));
 
 filenames.forEach(filename => {
   if (!filename.match(/\.json$/) || filename.match(/defaultMessages|whitelist/)) return;
 
   const content = fs.readFileSync(path.resolve(__dirname, `../locales/${filename}`), 'utf-8');
-  const full    = JSON.parse(content);
+  const full    = JSON.parse(content) as Record<string, string>;
   const locale  = filename.split('.')[0];
 
   filtered[locale] = {
@@ -35,4 +33,6 @@ filenames.forEach(filename => {
   };
 });
 
-module.exports = JSON.parse(JSON.stringify(filtered));
+export default () => ({
+  data: filtered,
+});

app/soapbox/utils/sw.ts

@@ -1,6 +1,15 @@
+/** Register the ServiceWorker. */
+function registerSW(path: string) {
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker.register(path, { scope: '/' });
+    });
+  }
+}
+
 /** Unregister the ServiceWorker */
 // https://stackoverflow.com/a/49771828/8811886
-const unregisterSw = async(): Promise<void> => {
+const unregisterSW = async(): Promise<void> => {
   if (navigator.serviceWorker) {
     // FIXME: this only works if using a single tab.
     // Send a message to sw.js instead to refresh all tabs.
@@ -11,5 +20,6 @@ const unregisterSw = async(): Promise<void> => {
 };
 
 export {
-  unregisterSw,
+  registerSW,
+  unregisterSW,
 };

package.json

@@ -19,7 +19,8 @@
   "scripts": {
     "start": "npx vite serve",
     "dev": "${npm_execpath} run start",
-    "build": "npx vite build",
+    "build": "npx vite build --emptyOutDir",
+    "preview": "npx vite preview",
     "audit:fix": "npx yarn-audit-fix",
     "manage:translations": "npx ts-node ./scripts/translationRunner.ts",
     "i18n": "rm -rf build tmp && npx cross-env NODE_ENV=production ${npm_execpath} run build && ${npm_execpath} manage:translations en",
@@ -209,6 +210,7 @@
     "stylelint-config-standard-scss": "^6.1.0",
     "tailwindcss": "^3.3.3",
     "ts-jest": "^29.0.0",
+    "vite-plugin-pwa": "^0.16.5",
     "yargs": "^17.6.2"
   },
   "resolutions": {

vite.config.ts

@@ -4,6 +4,7 @@ import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import compileTime from 'vite-plugin-compile-time';
 import { createHtmlPlugin } from 'vite-plugin-html';
+import { VitePWA } from 'vite-plugin-pwa';
 import vitePluginRequire from 'vite-plugin-require';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
@@ -28,6 +29,7 @@ export default defineConfig({
   plugins: [
     // @ts-ignore
     vitePluginRequire.default(),
+    compileTime(),
     createHtmlPlugin({
       template: 'index.html',
     }),
@@ -38,7 +40,25 @@ export default defineConfig({
         configFile: './babel.config.cjs',
       },
     }),
-    compileTime(),
+    VitePWA({
+      injectRegister: null,
+      strategies: 'injectManifest',
+      injectManifest: {
+        injectionPoint: undefined,
+        plugins: [
+          // @ts-ignore
+          compileTime(),
+        ],
+      },
+      manifestFilename: 'manifest.json',
+      manifest: {
+        name: 'Soapbox',
+        short_name: 'Soapbox',
+        description: 'A social media frontend with a focus on custom branding and ease of use.',
+      },
+      srcDir: 'soapbox/service-worker',
+      filename: 'sw.ts',
+    }),
     viteStaticCopy({
       targets: [{
         src: '../node_modules/twemoji/assets/svg/*',