chore(pwa): handle configuration with vite-plugin-pwa

- use `.json` extension on manifest to reuse for vite pwa options
- add protocol_handler
- remove icon purpose in `manifest`
- remove manual service-worker implementation

.env.template

@@ -6,6 +6,7 @@ VITE_AZURE_ACTIVE_DIRECTORY_CLIENT_ID="11111111-2222-3333-4444-555555555dev"
 VITE_AZURE_ACTIVE_DIRECTORY_TENANT_ID="common"
 
 # Optional for (local) development:
+NODE_ENV="development"
 
 # Opens Browser, e.g. "brave", "chrome" or "edge": https://vitejs.dev/config/#server-open
 # BROWSER="brave"

.gitignore

@@ -11,6 +11,9 @@
 /playwright/.cache/
 /test-results/
 
+# development
+/dev-dist
+
 # production
 /build
 /dist

public/manifest.webmanifest → public/manifest.json

@@ -1,52 +1,48 @@
 {
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
   "background_color": "#003366",
   "description": "An advanced OpenDevStack Frontend Quickstarter to build desktop, mobile and pwa apps with the ionic framework and react.",
   "display": "standalone",
+  "id": "COMPONENTID",
   "icons": [
-    {
-      "src": "assets/icons/icon-192.webp",
-      "type": "image/png",
-      "sizes": "192x192",
-      "purpose": "any maskable"
-    },
     {
       "src": "assets/icons/icon-48.webp",
       "type": "image/png",
-      "sizes": "48x48",
-      "purpose": "any maskable"
+      "sizes": "48x48"
     },
     {
       "src": "assets/icons/icon-72.webp",
       "type": "image/png",
-      "sizes": "72x72",
-      "purpose": "any maskable"
+      "sizes": "72x72"
     },
     {
       "src": "assets/icons/icon-96.webp",
       "type": "image/png",
-      "sizes": "96x96",
-      "purpose": "any maskable"
+      "sizes": "96x96"
     },
     {
       "src": "assets/icons/icon-128.webp",
       "type": "image/png",
-      "sizes": "128x128",
-      "purpose": "any maskable"
+      "sizes": "128x128"
+    },
+    {
+      "src": "assets/icons/icon-192.webp",
+      "type": "image/png",
+      "sizes": "192x192"
     },
     {
       "src": "assets/icons/icon-256.webp",
       "type": "image/png",
-      "sizes": "256x256",
-      "purpose": "any maskable"
+      "sizes": "256x256"
     },
     {
       "src": "assets/icons/icon-512.webp",
       "type": "image/png",
-      "sizes": "512x512",
-      "purpose": "any maskable"
+      "sizes": "512x512"
     }
   ],
   "name": "COMPONENTID",
+  "protocol_handlers": [{ "protocol": "web+COMPONENTID", "url": "%s" }],
   "short_name": "COMPONENTID",
   "start_url": ".",
   "theme_color": "#003366"

src/index.tsx

@@ -3,7 +3,6 @@ import { createRoot } from 'react-dom/client';
 import { App } from './App';
 import { AppProviders } from './AppProviders';
 import reportWebVitals from './report-web-vitals';
-import * as serviceWorkerRegistration from './service-worker-registration';
 
 const container = document.getElementById('root');
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -17,11 +16,6 @@ root.render(
   </StrictMode>
 );
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://cra.link/PWA
-serviceWorkerRegistration.register();
-
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

vite.config.ts

@@ -1,13 +1,25 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig, loadEnv } from 'vite';
+import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa';
+import manifest from './public/manifest.json';
+
+export const pwaOptions: Partial<VitePWAOptions> = {
+  base: '/',
+  devOptions: {
+    enabled: true,
+    navigateFallback: 'index.html',
+    type: 'module',
+  },
+  manifest,
+};
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   // Load env file based on `mode` in the current working directory.
   process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '') };
 
   return {
-    plugins: [react()],
+    plugins: [react(), VitePWA(pwaOptions)],
     server: {
       open: Boolean(process.env.BROWSER),
       port: Number(process.env.PORT) || 5173,