Use vite-plugin-pwa for pwa setup

crabfit-frontend/.gitignore

@@ -1,6 +1,7 @@
 node_modules
 dist
 build
+dev-dist
 
 npm-debug.log*
 yarn-debug.log*

crabfit-frontend/config-overrides.js

@@ -1,48 +0,0 @@
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const path = require('path');
-// const fs = require('fs');
-// const glob = require('glob');
-// const crypto = require('crypto');
-
-// const fileHash = path => {
-//   let file_buffer = fs.readFileSync(path);
-//   let sum = crypto.createHash('md5');
-//   sum.update(file_buffer);
-//   return sum.digest('hex');
-// };
-
-module.exports = function override(config, env) {
-  config.output.filename = env === 'production'
-    ? 'static/js/[name].[contenthash].js'
-    : env === 'development' && 'static/js/bundle.js';
-
-  config.output.chunkFilename = env === 'production'
-    ? 'static/js/[name].[contenthash].chunk.js'
-    : env === 'development' && 'static/js/[name].chunk.js';
-
-  if (env === 'production') {
-    config.plugins.push(new WorkboxWebpackPlugin.InjectManifest({
-      swSrc: path.resolve(__dirname, 'src/sw.js'),
-      exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
-      maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
-      additionalManifestEntries: [
-        // ...glob.sync('./public/i18n/*/*.json').map(file => {
-        //   return ({
-        //     url: file.replace('./public', ''),
-        //     revision: fileHash(file),
-        //   });
-        // }),
-        {
-          url: '/index.css',
-          revision: null,
-        },
-        {
-          url: '/manifest.json',
-          revision: null,
-        },
-      ],
-    }));
-  }
-
-  return config;
-}

crabfit-frontend/package.json

@@ -43,6 +43,7 @@
     "eslint": "^8.22.0",
     "eslint-plugin-react": "^7.30.1",
     "vite": "^3.0.7",
+    "vite-plugin-pwa": "^0.12.3",
     "workbox-webpack-plugin": "^6.5.4"
   },
   "browserslist": {

crabfit-frontend/public/sw.js

@@ -31,7 +31,7 @@ registerRoute(
 
     return true
   },
-  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+  createHandlerBoundToURL('index.html')
 )
 
 registerRoute(

crabfit-frontend/src/App.jsx

@@ -1,22 +1,18 @@
 import { useState, useEffect, useCallback, Suspense } from 'react'
 import { Route, Routes } from 'react-router-dom'
-import { Workbox } from 'workbox-window'
 
 import * as Pages from '/src/pages'
-import { Settings, Loading, Egg, UpdateDialog, TranslateDialog } from '/src/components'
+import { Settings, Loading, Egg, TranslateDialog } from '/src/components'
 
 import { useSettingsStore, useTranslateStore } from '/src/stores'
 
 const EGG_PATTERN = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']
 
-const wb = new Workbox('sw.js')
-
 const App = () => {
   const [eggCount, setEggCount] = useState(0)
   const [eggVisible, setEggVisible] = useState(false)
   const [eggKey, setEggKey] = useState(0)
 
-  const [updateAvailable, setUpdateAvailable] = useState(false)
   const languageSupported = useTranslateStore(state => state.navigatorSupported)
   const translateDialogDismissed = useTranslateStore(state => state.translateDialogDismissed)
 
@@ -30,19 +26,6 @@ const App = () => {
     }
   }, [eggCount, eggKey])
 
-  useEffect(() => {
-    // Register service worker
-    if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production') {
-      wb.addEventListener('installed', event => {
-        if (event.isUpdate) {
-          setUpdateAvailable(true)
-        }
-      })
-
-      wb.register()
-    }
-  }, [])
-
   useEffect(() => {
     document.addEventListener('keyup', eggHandler, false)
     return () => document.removeEventListener('keyup', eggHandler, false)
@@ -71,12 +54,6 @@ const App = () => {
         </Routes>
       </Suspense>
 
-      {updateAvailable && (
-        <Suspense fallback={<Loading />}>
-          <UpdateDialog onClose={() => setUpdateAvailable(false)} />
-        </Suspense>
-      )}
-
       {eggVisible && <Egg eggKey={eggKey} onClose={() => setEggVisible(false)} />}
     </>
   )

crabfit-frontend/vite.config.js

@@ -1,6 +1,14 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      manifestFilename: 'manifest.json',
+      strategies: 'injectManifest',
+    }),
+  ],
 })

crabfit-frontend/yarn.lock

@@ -1507,7 +1507,7 @@ debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "2.1.2"
 
-debug@^4.3.2:
+debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -1892,7 +1892,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
   integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
@@ -2776,6 +2776,11 @@ pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
+pretty-bytes@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-6.0.0.tgz#928be2ad1f51a2e336add8ba764739f9776a8140"
+  integrity sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==
+
 prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -3020,6 +3025,13 @@ rollup@^2.43.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
+rollup@^2.75.7:
+  version "2.78.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.1.tgz#52fe3934d9c83cb4f7c4cb5fb75d88591be8648f"
+  integrity sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -3373,6 +3385,18 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
+vite-plugin-pwa@^0.12.3:
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.12.3.tgz#acf2913ae85a4d39c13ae4b948307f3dd5506fa8"
+  integrity sha512-gmYdIVXpmBuNjzbJFPZFzxWYrX4lHqwMAlOtjmXBbxApiHjx9QPXKQPJjSpeTeosLKvVbNcKSAAhfxMda0QVNQ==
+  dependencies:
+    debug "^4.3.4"
+    fast-glob "^3.2.11"
+    pretty-bytes "^6.0.0"
+    rollup "^2.75.7"
+    workbox-build "^6.5.3"
+    workbox-window "^6.5.3"
+
 vite@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/vite/-/vite-3.0.7.tgz#f1e379857e9c5d652126f8b20d371e1365eb700f"
@@ -3463,7 +3487,7 @@ workbox-broadcast-update@6.5.4, workbox-broadcast-update@^6.5.4:
   dependencies:
     workbox-core "6.5.4"
 
-workbox-build@6.5.4:
+workbox-build@6.5.4, workbox-build@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.4.tgz#7d06d31eb28a878817e1c991c05c5b93409f0389"
   integrity sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==
@@ -3609,7 +3633,7 @@ workbox-webpack-plugin@^6.5.4:
     webpack-sources "^1.4.3"
     workbox-build "6.5.4"
 
-workbox-window@6.5.4, workbox-window@^6.5.4:
+workbox-window@6.5.4, workbox-window@^6.5.3, workbox-window@^6.5.4:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.4.tgz#d991bc0a94dff3c2dbb6b84558cff155ca878e91"
   integrity sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==