feat: pwa registration (#762)

* feat: init pwa * fix: cloudinary blocked by csp * fix: update cloudinary url pattern * feat: add offline fallback document * fix: typo fallback -> fallbacks * revert: fallback doesn't work * feat: prevent caching for service-worker.js * feat: add cache control for SW on next.config.js * fix: sw header order Co-authored-by: Zain Fathoni <[email protected]>
kawalcovid19 · Aug 25, 2021 · 8e69a8b · 8e69a8b
1 parent 2efaaf5
commit 8e69a8b
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 75 deletions.
diff --git a/.gitignore b/.gitignore
@@ -57,3 +57,8 @@ workbox-*
 # Cypress
 cypress/videos
 cypress/screenshots
+
+# service workers
+service-worker.js
+service-worker.js.map
+workbox-*
diff --git a/netlify.toml b/netlify.toml
@@ -12,7 +12,7 @@
     X-XSS-Protection = "1; mode=block"
     X-Content-Type-Options = "nosniff"
     Referrer-Policy = "same-origin"
-    Content-Security-Policy = "default-src 'self'; connect-src 'self' analytics.google.com stats.g.doubleclick.net; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' *.googletagmanager.com analytics.google.com; img-src 'self' blob: data: https:; frame-ancestors 'none';"
+    Content-Security-Policy = "default-src 'self'; connect-src 'self' analytics.google.com stats.g.doubleclick.net res.cloudinary.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' *.googletagmanager.com analytics.google.com; img-src 'self' blob: data: https:; frame-ancestors 'none';"
     Permissions-Policy = "camera=(), microphone=(), geolocation=(), interest-cohort=()"
 
 [[headers]]
@@ -25,6 +25,11 @@
     Content-Security-Policy = "default-src 'self'; connect-src 'self' analytics.google.com stats.g.doubleclick.net; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' *.googletagmanager.com *.netlify.com unpkg.com analytics.google.com 'unsafe-eval' media-library.cloudinary.com; frame-src 'self' cloudinary.com; img-src 'self' blob: data: https:; frame-ancestors 'none';"
     Permissions-Policy = "camera=(), microphone=(), geolocation=(), interest-cohort=()"
 
+[[headers]]
+  for = "/service-worker.js"
+  [headers.values]
+    Cache-Control = "no-store, max-age=0"
+
 [[headers]]
   for = "/fonts/inter-var-latin.woff2"
   [headers.values]

diff --git a/next.config.js b/next.config.js
@@ -1,10 +1,12 @@
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
+const withPWA = require("next-pwa");
+const workboxConfig = require("./wb.config");
 
 const ContentSecurityPolicy = `
   default-src 'self';
-  connect-src 'self' analytics.google.com stats.g.doubleclick.net;
+  connect-src 'self' analytics.google.com stats.g.doubleclick.net res.cloudinary.com;
   script-src 'self' 'unsafe-inline' 'unsafe-eval' *.googletagmanager.com *.netlify.com unpkg.com media-library.cloudinary.com analytics.google.com *.google-analytics.com;
   style-src 'self' 'unsafe-inline';
   frame-src 'self' cloudinary.com;
@@ -35,59 +37,72 @@ const securityHeaders = [
 ];
 
 /** @type {import("next/dist/next-server/server/config-shared").NextConfig} */
-module.exports = withBundleAnalyzer({
-  // https://github.com/vercel/next.js/blob/v11.0.1/packages/next/next-server/server/config-shared.ts#L42-L65
-  experimental: {
-    optimizeCss: true,
-    optimizeImages: true,
-    workerThreads: true,
-  },
+module.exports = withPWA(
+  withBundleAnalyzer({
+    pwa: workboxConfig,
 
-  future: {
-    // @nibraswastaken told me to add this - @resir014
-    strictPostcssConfiguration: true,
-  },
+    // https://github.com/vercel/next.js/blob/v11.0.1/packages/next/next-server/server/config-shared.ts#L42-L65
+    experimental: {
+      optimizeCss: true,
+      optimizeImages: true,
+      workerThreads: true,
+    },
 
-  // This config won't be loaded until Netlify supports the `headers` option on `next.config.js`.
-  // For now, when you make changes here, also make the necessary changes on `netlify.toml`.
-  // https://github.com/netlify/netlify-plugin-nextjs/issues/150
-  headers: async () => {
-    return [
-      {
-        source: "/(.*)",
-        headers: securityHeaders,
-      },
-    ];
-  },
+    future: {
+      // @nibraswastaken told me to add this - @resir014
+      strictPostcssConfiguration: true,
+    },
 
-  images: {
-    deviceSizes: [360, 420, 720],
-    domains: ["firebase-kanvas.imgix.net", "res.cloudinary.com"],
-    loader: "cloudinary",
-    path: "https://res.cloudinary.com/wargabantuwarga/image/upload/",
-  },
+    // This config won't be loaded until Netlify supports the `headers` option on `next.config.js`.
+    // For now, when you make changes here, also make the necessary changes on `netlify.toml`.
+    // https://github.com/netlify/netlify-plugin-nextjs/issues/150
+    headers: async () => {
+      return [
+        {
+          source: "/(.*)",
+          headers: securityHeaders,
+        },
+        {
+          source: "/service-worker.js",
+          headers: [
+            {
+              key: "Cache-Control",
+              value: "no-store, max-age=0",
+            },
+          ],
+        },
+      ];
+    },
 
-  // https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode
-  reactStrictMode: true,
+    images: {
+      deviceSizes: [360, 420, 720],
+      domains: ["firebase-kanvas.imgix.net", "res.cloudinary.com"],
+      loader: "cloudinary",
+      path: "https://res.cloudinary.com/wargabantuwarga/image/upload/",
+    },
 
-  // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
-  webpack(config, { dev, isServer }) {
-    // https://github.com/leerob/leerob.io/blob/9adc510cbfb3da88c3b0ad15632eb876ca91b607/next.config.js#L27-L33
-    if (!dev && !isServer) {
-      Object.assign(config.resolve.alias, {
-        react: "preact/compat",
-        "react-dom/test-utils": "preact/test-utils",
-        "react-dom": "preact/compat",
-      });
-    }
+    // https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode
+    reactStrictMode: true,
 
-    config.module.rules.push({
-      test: /\.md$/,
-      use: {
-        loader: "frontmatter-markdown-loader",
-      },
-    });
+    // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
+    webpack(config, { dev, isServer }) {
+      // https://github.com/leerob/leerob.io/blob/9adc510cbfb3da88c3b0ad15632eb876ca91b607/next.config.js#L27-L33
+      if (!dev && !isServer) {
+        Object.assign(config.resolve.alias, {
+          react: "preact/compat",
+          "react-dom/test-utils": "preact/test-utils",
+          "react-dom": "preact/compat",
+        });
+      }
 
-    return config;
-  },
-});
+      config.module.rules.push({
+        test: /\.md$/,
+        use: {
+          loader: "frontmatter-markdown-loader",
+        },
+      });
+
+      return config;
+    },
+  }),
+);
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "htmr": "^1.0.0",
     "itemsjs": "^2.1.10",
     "next": "11.1.0",
-    "next-pwa": "^5.2.24",
+    "next-pwa": "^5.3.1",
     "next-seo": "^4.26.0",
     "nprogress": "^0.2.0",
     "preact": "^10.5.14",

diff --git a/public/service-worker.js b/public/service-worker.js
diff --git a/wb.config.js b/wb.config.js
@@ -15,7 +15,7 @@ module.exports = {
   ],
   runtimeCaching: [
     {
-      urlPattern: /^https:\/\/res\.cloudinary\.com\//,
+      urlPattern: /^https:\/\/res\.cloudinary\.com\/.*\/image\/upload\//,
       handler: "CacheFirst",
       options: {
         cacheName: "wbw-images",

diff --git a/yarn.lock b/yarn.lock
@@ -10242,17 +10242,17 @@ [email protected]:
     imagemin-svgo "^7.1.0"
     table "^5.4.6"
 
-next-pwa@^5.2.24:
-  version "5.2.24"
-  resolved "https://registry.yarnpkg.com/next-pwa/-/next-pwa-5.2.24.tgz#bc78d9905ba29b585dffc0f6076cd2a7e5692cb7"
-  integrity sha512-gDGcRfoCsNUjgzH7HQVqJxEN4mR1uA3i+AeK1sgiwSeamQu3hl4fgu9wclPjRj2R5iyWs2EkTfHum7Qy712NbQ==
+next-pwa@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/next-pwa/-/next-pwa-5.3.1.tgz#5bcd854422a452fd1fd56500d1c483664d9733d9"
+  integrity sha512-Os6bf/lEYoztvsILYkAhDjiYfLNTprqEumxuv5DjhoFh4OpIzO7U0GKRI6MZluH4SfAoe0IdHz9knnZxybSnag==
   dependencies:
     babel-loader "^8.2.2"
     clean-webpack-plugin "^3.0.0"
     globby "^11.0.4"
     terser-webpack-plugin "^5.1.4"
-    workbox-webpack-plugin "^6.1.5"
-    workbox-window "^6.1.5"
+    workbox-webpack-plugin "^6.2.4"
+    workbox-window "^6.2.4"
 
 [email protected]:
   version "0.1.4"
@@ -14408,7 +14408,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.2.4.tgz#d7ae4cfc1c02ad6e47b7b9f7ac5be56b4715d928"
   integrity sha512-OlWLHNNM+j44sN2OaVXnVcf2wwhJUzcHlXrTrbWDu1JWnrQJ/rLicdc/sbxkZoyE0EbQm7Xr1BXcOjsB7PNlXQ==
 
-workbox-webpack-plugin@^6.1.5:
+workbox-webpack-plugin@^6.2.4:
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.2.4.tgz#50ceed32fc0e1f928feae6da45961deae0689775"
   integrity sha512-G6yeOZDYEbtqgNasqwxHFnma0Vp237kMxpsf8JV/YIhvhUuMwnh1WKv4VnFeqmYaWW/ITx0qj92IEMWB/O1mAA==
@@ -14420,7 +14420,7 @@ workbox-webpack-plugin@^6.1.5:
     webpack-sources "^1.4.3"
     workbox-build "6.2.4"
 
-[email protected], workbox-window@^6.1.5:
+[email protected], workbox-window@^6.2.4:
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.2.4.tgz#377e792158ec83670b6f810e0077a45c1a948d1b"
   integrity sha512-9jD6THkwGEASj1YP56ZBHYJ147733FoGpJlMamYk38k/EBFE75oc6K3Vs2tGOBx5ZGq54+mHSStnlrtFG3IiOg==