Handle service worker through Vite PWA

.env

@@ -1,4 +1,3 @@
-PUBLIC_URL=/
 REACT_APP_HOST=localhost:3000
 REACT_APP_ANALYTICS_MEASUREMENT_ID=
 REACT_APP_LASTFM_API_KEY=

.prettierignore

@@ -1,4 +1,3 @@
 *.md
-src/utils/registerServiceWorker.js
 cypress/fixtures/**/*.json
 index.html

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openscrobbler",
-  "version": "2.8.4",
+  "version": "2.8.5",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
@@ -83,23 +83,13 @@
     "vite": "^5.0.10",
     "vite-bundle-visualizer": "^1.0.0",
     "vite-plugin-externals": "^0.6.2",
+    "vite-plugin-pwa": "^0.17.4",
     "vite-plugin-react-remove-attributes": "^1.0.3",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.2.3",
     "vitest": "^1.1.2",
     "vitest-dom": "^0.1.1",
-    "workbox-background-sync": "^7.0.0",
-    "workbox-broadcast-update": "^7.0.0",
-    "workbox-cacheable-response": "^7.0.0",
-    "workbox-core": "^7.0.0",
-    "workbox-expiration": "^7.0.0",
-    "workbox-google-analytics": "^7.0.0",
-    "workbox-navigation-preload": "^7.0.0",
-    "workbox-precaching": "^7.0.0",
-    "workbox-range-requests": "^7.0.0",
-    "workbox-routing": "^7.0.0",
-    "workbox-strategies": "^7.0.0",
-    "workbox-streams": "^7.0.0"
+    "workbox-window": "^7.0.0"
   },
   "scripts": {
     "prepare": "is-ci || husky install",

src/App.tsx

@@ -1,6 +1,6 @@
 import { Suspense, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import qs from 'qs';
 import find from 'lodash/find';
 import lazyWithPreload from 'react-lazy-with-preload';
@@ -9,6 +9,7 @@ import * as Sentry from '@sentry/react';
 import { interceptAxios } from 'utils/axios';
 import { languageList, fallbackLng } from 'utils/i18n';
 import { useTranslation } from 'react-i18next';
+import { useRegisterSW } from 'virtual:pwa-register/react';
 import { useGrowthBook } from '@growthbook/growthbook-react';
 
 import { useUserData } from 'hooks/useUserData';
@@ -21,7 +22,6 @@ import AlertZone from './components/AlertZone';
 import AnalyticsListener from './components/AnalyticsListener';
 import UpdateToast from './components/UpdateToast';
 
-import { RootState } from 'store';
 import { useQueryClient } from '@tanstack/react-query';
 import { useLanguage } from 'hooks/useLanguage';
 
@@ -37,13 +37,11 @@ function App() {
   const growthbook = useGrowthBook();
   const { setLanguage } = useLanguage();
   const { isLoggedIn, user } = useUserData();
+  const serviceWorker = useRegisterSW();
 
   // This is used to trigger a suspense while i18n is loading
   const { ready: i18nReady } = useTranslation();
 
-  // ToDo: remove this feature?
-  const versionUpdateReady = useSelector((state: RootState) => state.updates.newVersionReady);
-
   const [modalIsOpen, setModalIsOpen] = useState(false);
 
   useEffect(() => {
@@ -117,7 +115,7 @@ function App() {
       </SettingsModalContext.Provider>
       <div className="d-flex flex-column" style={{ height: 'calc(100vh - 84px)' }}>
         {process.env.REACT_APP_ANALYTICS_CODE && <AnalyticsListener />}
-        {versionUpdateReady && <UpdateToast />}
+        {serviceWorker.needRefresh[0] && <UpdateToast onUpdate={serviceWorker.updateServiceWorker} />}
 
         <AlertZone />
         <main className="container flex-wrap flex-grow-1">

src/Constants.ts

@@ -44,9 +44,6 @@ export const COUNT_SCROBBLES_DISABLE = 'COUNT_SCROBBLES_DISABLE';
 // Users store
 export const USER_LOGGED_OUT = 'USER_LOGGED_OUT';
 
-// Updates store
-export const NEW_VERSION_READY = 'NEW_VERSION_READY';
-
 // Referral link generation
 export const getAmznLink = (artist, album) => {
   if (artist === album) {

src/components/UpdateToast.tsx

@@ -1,12 +1,19 @@
 import { Trans } from 'react-i18next';
+import ReactGA from 'react-ga-neo';
+
 import { Alert, Button } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faComment, faExclamation } from '@fortawesome/free-solid-svg-icons';
+
 import './UpdateToast.css';
 
-export default function UpdateToast() {
+export default function UpdateToast({ onUpdate }: { onUpdate: () => void }) {
   const reloadPage = () => {
-    window.location.reload();
+    ReactGA.event({
+      category: 'Interactions',
+      action: 'SW Manual Update',
+    });
+    onUpdate();
   };
 
   return (

src/index.tsx

@@ -5,7 +5,6 @@ import './index.css';
 import App from 'App';
 import history from 'utils/history';
 import ErrorPage from 'domains/error/ErrorPage';
-import * as serviceWorkerRegistration from 'utils/serviceWorkerRegistration';
 // import reportWebVitals from 'utils/reportWebVitals';
 
 import 'bootswatch/dist/slate/bootstrap.min.css';
@@ -19,7 +18,7 @@ import * as Sentry from '@sentry/react';
 import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react';
 
 import 'utils/i18n';
-import { NEW_VERSION_READY } from 'Constants';
+
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { tweak } from 'utils/tweaks/Tweaks';
@@ -149,14 +148,6 @@ if (process.env.REACT_APP_GROWTHBOOK_API_KEY) {
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(wrappedApp);
 
-serviceWorkerRegistration.register({
-  onUpdate: () => {
-    store.dispatch({
-      type: NEW_VERSION_READY,
-    });
-  },
-});
-
 // Measure performance Learn more: https://bit.ly/CRA-vitals
 // ToDo: Analyze if this is worth using
 // reportWebVitals(process.env.NODE_ENV === 'development' ? console.log : undefined);

src/store/index.ts

@@ -8,7 +8,6 @@ import { loadState, saveState } from 'localstorage';
 
 import alertReducer from './reducers/alertReducer';
 import scrobbleReducer from './reducers/scrobbleReducer';
-import updatesReducer from './reducers/updatesReducer';
 
 const middlewares = [createDebounce(), promise];
 const isDevEnvironment = process.env.NODE_ENV === 'development';
@@ -19,7 +18,6 @@ const store = createStore(
   combineReducers({
     alerts: alertReducer,
     scrobbles: scrobbleReducer,
-    updates: updatesReducer,
   }),
   persistedState,
   (isDevEnvironment && hasDevTools ? composeWithDevTools({}) : compose)(applyMiddleware(...middlewares))