implement cache on front end navigation feature

Author: shadowwalker

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 5.2.1
+
+### Major
+
+1. Implement cache on front end navigation feature
+
 ## 5.2.0
 
 ### Major

README.md

@@ -257,7 +257,7 @@ module.exports = withPWA({
   - example: `[/chunks\/images\/.*$/]` - Don't precache files under `.next/static/chunks/images` (Highly recommend this to work with  `next-optimized-images` plugin)
   - doc: Array of (string, RegExp, or function()). One or more specifiers used to exclude assets from the precache manifest. This is interpreted following the same rules as Webpack's standard exclude option.
 - dynamicStartUrl - if your start url returns different HTML document under different state (such as logged in vs. not logged in), this should be set to true.
-  - default: true
+  - default: `true`
   - recommend: set to **false** if your start url always returns same HTML document, then start url will be precached, this will help to speed up first load.
 - fallbacks - config precached routes to fallback when both cache and network not available to serve resources.
   - **if you just need a offline fallback page, simply create a `/_offline` page such as `pages/_offline.js` and you are all set, no configuration necessary**
@@ -267,6 +267,9 @@ module.exports = withPWA({
     - `fallbacks.audio` - fallback route for audio, default to none
     - `fallbacks.video` - fallback route for video, default to none
     - `fallbacks.font` - fallback route for font, default to none
+- cacheOnFrontEndNav - enable additional route cache when navigate between pages with `next/link` on front end. Checkout this [example](https://github.com/shadowwalker/next-pwa/tree/master/examples/cache-on-front-end-nav) for some context about why this is implemented.
+  - default: `false`
+  - note: this improve user experience on special use cases but it also adds some overhead because additional network call, I suggest you consider this as a trade off.
 - ~~subdomainPrefix: string - url prefix to allow hosting static files on a subdomain~~
   - ~~default: `""` - i.e. default with no prefix~~
   - ~~example: `/subdomain` if the app is hosted on `example.com/subdomain`~~

build-fallback-worker.js

@@ -40,7 +40,7 @@ const getFallbackEnvs = ({fallbacks, basedir}) => {
 
 const buildFallbackWorker = ({ id, fallbacks, basedir, destdir, success, minify }) => {
   const envs = getFallbackEnvs({fallbacks, basedir})
-  if (!envs) return
+  if (!envs) return false
 
   const name = `fallback-${id}.js`
   const fallbackJs = path.join(__dirname, `fallback.js`)
@@ -103,6 +103,8 @@ const buildFallbackWorker = ({ id, fallbacks, basedir, destdir, success, minify
       success({name, precaches: Object.values(envs).filter(v => !!v)})
     }
   })
+
+  return fallbacks
 }
 
 module.exports = buildFallbackWorker

examples/cache-on-front-end-nav/README.md

@@ -4,6 +4,8 @@
 
 [TOC]
 
+> **Since `[email protected]`, you can set `cacheOnFrontEndNav: true` in your `pwa` config to achieve the same result in this example, no other code needed.**
+
 This example demonstrates how to use `next-pwa` plugin to solve the issue when users refresh on a front end navigated route while offline and saw browser's connection lost page. This is an edge case which should not happen very often in normal network connectivity areas, however, this example should help you improve the users experience. 
 
 For context, `next.js` embraces both SSR and front end routing (typical SPA) to deliver smooth users experience. However, when a user navigate on the web app through `next/router` or `next/link` (Link component), the navigation is made through front end routing. Which means there is no HTTP GET request made to the server for that route, it only swap the react component to the new page and change the url showed on the url bar. This "fake" navigation is usually desired because it means users do not have to wait for network delay.

index.js

@@ -40,7 +40,7 @@ module.exports = (nextConfig = {}) => ({
       buildExcludes = [],
       manifestTransforms = [],
       modifyURLPrefix = {},
-      fallbacks = {},
+      cacheOnFrontEndNav = false,
       subdomainPrefix,  // deprecated, use basePath in next.config.js instead
       ...workbox
     } = pwa
@@ -63,7 +63,7 @@ module.exports = (nextConfig = {}) => ({
     let basePath = options.config.basePath
     if (!basePath) basePath = '/'
 
-    let { runtimeCaching = defaultCache, scope = basePath } = pwa
+    let { runtimeCaching = defaultCache, scope = basePath, fallbacks = {} } = pwa
     scope = path.posix.join(scope, '/')
 
     // inject register script to main.js
@@ -73,7 +73,8 @@ module.exports = (nextConfig = {}) => ({
         __PWA_SW__: `'${_sw}'`,
         __PWA_SCOPE__: `'${scope}'`,
         __PWA_ENABLE_REGISTER__: `${Boolean(register)}`,
-        __PWA_START_URL__: dynamicStartUrl ? `'${basePath}'` : undefined
+        __PWA_START_URL__: dynamicStartUrl ? `'${basePath}'` : undefined,
+        __PWA_CACHE_ON_FRONT_END_NAV__: `${Boolean(cacheOnFrontEndNav)}`
       })
     )
 
@@ -155,7 +156,7 @@ module.exports = (nextConfig = {}) => ({
       }
 
       if (fallbacks) {
-        buildFallbackWorker({
+        fallbacks = buildFallbackWorker({
           id: buildId,
           fallbacks,
           basedir: options.dir,
@@ -250,11 +251,6 @@ module.exports = (nextConfig = {}) => ({
             handler: 'NetworkFirst',
             options: {
               cacheName: 'start-url',
-              expiration: {
-                maxEntries: 1,
-                maxAgeSeconds: 24 * 60 * 60 // 24 hours
-              },
-              networkTimeoutSeconds: 10,
               plugins: [{
                 // mitigate Chrome 89 auto offline check issue
                 // blog: https://developer.chrome.com/blog/improved-pwa-offline-detection/ 

register.js

@@ -1,7 +1,7 @@
 import { Workbox } from 'workbox-window'
 
 if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
-  const initWorkbox = function(e) {
+  const initWorkbox = function() {
     window.workbox = new Workbox(__PWA_SW__, { scope: __PWA_SCOPE__ })
 
     if(__PWA_ENABLE_REGISTER__) {
@@ -10,10 +10,41 @@ if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
   }
 
   if(__PWA_START_URL__) {
-    caches.open('start-url').then(function(cache) {
-      cache.add(__PWA_START_URL__).then(initWorkbox)
+    fetch(__PWA_START_URL__).then(function(response) {
+      if (!response.ok && !response.redirected) return
+      return caches.open('start-url').then(function(cache) {
+        return cache.put(__PWA_START_URL__, response).then(initWorkbox)
+      })
     })
   } else {
     initWorkbox()
   }
+
+  if(__PWA_CACHE_ON_FRONT_END_NAV__) {
+    const cacheOnFrontEndNav = function(url) {
+      if (!window.navigator.onLine) return
+      if (__PWA_START_URL__ && url === __PWA_START_URL__) return
+      caches.open('others').then(cache =>
+        cache.match(url, {ignoreSearch: true}).then(res => {
+          if (!res) return cache.add(url)
+        })
+      )
+    }
+
+    const pushState = history.pushState
+    history.pushState = function () {
+      pushState.apply(history, arguments)
+      cacheOnFrontEndNav(arguments[0].url)
+    }
+
+    const replaceState = history.replaceState
+    history.replaceState = function () {
+      replaceState.apply(history, arguments)
+      cacheOnFrontEndNav(arguments[0].url)
+    }
+
+    window.addEventListener('online', () => {
+      cacheOnFrontEndNav(window.location.pathname)
+    })
+  }
 }