Use 'vite-plugin-pwa' to generate the service worker and PWA manifest

The service worker caches all site assets, including web fonts. It also caches user profile pictures (up to 100 entries). The AppUpdated component periodically checks the service worker for update.

.eslintrc.js

@@ -53,7 +53,7 @@ module.exports = {
     'import/no-extraneous-dependencies': 2,
     'import/no-named-as-default': 2,
     'import/no-named-as-default-member': 2,
-    'import/no-unresolved': 2,
+    'import/no-unresolved': ['error', { ignore: ['^virtual:'] }],
     'import/order': [
       2,
       { groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'] },

package.json

@@ -106,7 +106,9 @@
     "vite": "~5.3.5",
     "vite-plugin-compression": "~0.5.1",
     "vite-plugin-generate-file": "~0.2.0",
-    "vitest": "~2.0.4"
+    "vite-plugin-pwa": "^0.20.1",
+    "vitest": "~2.0.4",
+    "workbox-window": "^7.1.0"
   },
   "scripts": {
     "start": "vite",

src/components/app-updated.jsx

@@ -1,17 +1,37 @@
 /* global CONFIG */
 import { useSelector } from 'react-redux';
+import { useRegisterSW } from 'virtual:pwa-register/react';
 
+import { useEvent } from 'react-use-event-hook';
 import styles from './app-updated.module.scss';
 import { ButtonLink } from './button-link';
 
-function reloadPage() {
-  window.location.reload(true);
-}
+const { intervalSec } = CONFIG.appVersionCheck;
 
 export function AppUpdated() {
   const updated = useSelector((state) => state.appUpdated.updated);
 
-  if (!updated) {
+  const {
+    needRefresh: [needRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegistered(r) {
+      r && setInterval(() => r.update(), intervalSec * 1000);
+    },
+  });
+
+  const reloadPage = useEvent(() => {
+    if (needRefresh) {
+      updateServiceWorker();
+      // Sometimes the updateServiceWorker doesn't refresh the page, so reload
+      // it manually after some time
+      setTimeout(() => window.location.reload(true), 2000);
+    } else {
+      window.location.reload(true);
+    }
+  });
+
+  if (!updated && !needRefresh) {
     return null;
   }
 

src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite-plugin-pwa/react" />

vite.config.mjs

@@ -6,6 +6,7 @@ import legacy from '@vitejs/plugin-legacy';
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 import generateFile from 'vite-plugin-generate-file';
+import { VitePWA } from 'vite-plugin-pwa';
 import { globSync } from 'glob';
 import matter from 'gray-matter';
 import pkg from './package.json';
@@ -32,6 +33,60 @@ const vendorChunks = [
 
 export default defineConfig(({ mode }) => ({
   plugins: [
+    VitePWA({
+      registerType: 'prompt',
+      devOptions: { enabled: true },
+      manifest: {
+        name: 'FreeFeed',
+        short_name: 'FreeFeed',
+        description: 'A small and free social network',
+        id: '/?pwa=1',
+        start_url: '/',
+        display: 'minimal-ui',
+        icons: [
+          {
+            src: '/assets/images/pwa-64x64.png',
+            sizes: '64x64',
+            type: 'image/png',
+          },
+          {
+            src: '/assets/images/pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: '/assets/images/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: '/assets/images/maskable-icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+        ],
+      },
+      workbox: {
+        // Don't use 'index.html' fallback for these routes
+        navigateFallbackDenylist: [/^\/(v\d+|socket\.io|api)\//, /\/(config\.json|version\.txt)$/],
+        // Add 'woff2' to the default 'globPatterns'
+        globPatterns: ['**/*.{js,wasm,css,html,woff2}'],
+        runtimeCaching: [
+          // Cache profile pictures (up to 100 entries)
+          {
+            urlPattern: /^https:\/\/(stable-)?media\.freefeed\.net\/profilepics\//,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'profile-pictures',
+              expiration: {
+                maxEntries: 100,
+              },
+            },
+          },
+        ],
+      },
+    }),
     !process.env.MODERN && legacy(),
     react(),
     injectPreload({