Add WPA

Author: MartinBraquet

web/package.json

@@ -2,6 +2,7 @@
   "name": "web",
   "version": "1.0.0",
   "private": true,
+  "homepage": ".",
   "scripts": {
     "serve": "next dev -p 3000",
     "ts-watch": "tsc --watch --noEmit --incremental --preserveWatchOutput --pretty",

web/pages/_app.tsx

@@ -50,6 +50,18 @@ function MyApp({Component, pageProps}: AppProps<PageProps>) {
   useEffect(printBuildInfo, [])
   useHasLoaded()
 
+  useEffect(() => {
+    console.log('registering service worker...');
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker
+        .register('/service-worker.js')
+        .then((reg) => console.log('✅ registered', reg))
+        .catch((err) => console.error('❌ failed', err));
+    } else {
+      console.warn('Service workers not supported in this browser');
+    }
+  }, []);
+
   useEffect(() => {
     initTracking()
 

web/pages/_document.tsx

@@ -14,6 +14,14 @@ export default function Document() {
           // href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap"
           rel="stylesheet"
         />
+
+        {/* PWA primary color */}
+        <meta name="theme-color" content="#0d6efd" />
+        {/*/!* Link to your manifest *!/*/}
+        <link rel="manifest" href="/manifest.json" />
+        {/*/!* App icons *!/*/}
+        <link rel="apple-touch-icon" href="/favicon.ico" />
+
         <Script src="/init-theme.js" strategy="beforeInteractive"/>
         {IS_DEPLOYED && <Script id="devtools-warning" strategy="afterInteractive" dangerouslySetInnerHTML={{
           __html: `(() => { try {

web/public/manifest.json

@@ -0,0 +1,16 @@
+{
+  "short_name": "Compass",
+  "name": "Compass",
+  "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "500x500",
+      "type": "image/ico"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#0d6efd",
+  "orientation": "portrait-primary"
+}

web/public/service-worker.js

@@ -0,0 +1,30 @@
+console.log('SW loaded');
+
+const CACHE_NAME = 'compass-cache-v1';
+
+self.addEventListener('install', (event) => {
+    console.log('SW installing…');
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    console.log('SW activated!');
+});
+
+self.addEventListener('fetch', (event) => {
+    event.respondWith(
+        caches.match(event.request).then((cachedResponse) => {
+            if (cachedResponse) return cachedResponse;
+
+            return fetch(event.request).then((networkResponse) => {
+                return caches.open(CACHE_NAME).then((cache) => {
+                    // Only cache GET requests to same-origin
+                    if (event.request.method === 'GET' && event.request.url.startsWith(self.location.origin)) {
+                        cache.put(event.request, networkResponse.clone());
+                    }
+                    return networkResponse;
+                });
+            });
+        })
+    );
+});