Revision or hash generated HTML for cache updation via workbox

[manishbhatt94]

Hi, @timneutkens @timothyis @leo First of all thanks for making and maintaining this awesome project! You guys have truly made SSR a breeze 🥇

This issue is related to https://github.com/zeit/next.js/issues/5530

So I need to cache the page documents for my site to be completely available offline. For that I'm using workbox and workbox-webpack-plugin.

I'm caching all page bundles and documents in the service worker install step, using workbox.precaching module. How this precaching module works is that it picks up all webpack emitted assets, hashes each file contents and populates the assets' url and revision in an array called precacheManifest. Now since Next.js doesn't emit any HTML files, it's not by default picked up by the workbox.precaching module. And so, I had to append the generated precacheManifest array with the list of pages' URLs, like so:

self.__precacheManifest = [
  {
    "url": "/_next/static/commons/main-1e6aa66fbaf1d8e219b0.js"
  },
  {
    "revision": "1e6aa66fbaf1d8e219b0",
    "url": "/_next/static/style.css"
  },
  {
    "url": "/_next/webpack/chunks/lazysizes_c7d1c726a13ef0281040919ab87052dd-4ffebd16f621f137c452.js"
  },
  {
    "revision": "7d1ed0a225cc86171ecb",
    "url": "/_next/c701fe12-99f3-4c4f-800e-114119a4af41/page/_error.js"
  },
  {
    "revision": "d1d400582649b7c10ad0",
    "url": "/_next/c701fe12-99f3-4c4f-800e-114119a4af41/page/_app.js"
  },
  {
    "revision": "c1e4041b9a2de4cca32f",
    "url": "/_next/c701fe12-99f3-4c4f-800e-114119a4af41/page/index.js"
  },
  {
    "revision": "e4be6ae5589743750c35",
    "url": "/_next/c701fe12-99f3-4c4f-800e-114119a4af41/page/about.js"
  },
  {
    "revision": "af0465abe68d162f4bd6",
    "url": "/_next/c701fe12-99f3-4c4f-800e-114119a4af41/page/contact-us.js"
  },

  // the document URLs I have to append:
  { url: '/' },
  { url: '/about' },
  { url: '/contact-us' },
];

Everything works fine, bundles and documents all get cached. And the site totally works fully even when offline.

But the problem with my approach is that when I build and deploy my app with some changes, the new service worker gets activated, new bundles are fetched and cached (since their hash changes and workbox manages updation by keeping track of revision in IndexedDB)... but since the documents don't have a revision or even anything unique in their URL, the documents don't get updated in the cache. And workbox follows a cacheFirst strategy for precached resources and therefore the old documents with the old bundle paths are being loaded. This gives 404 when trying to fetch page bundles with old paths - leading to the app not working at all after an update.

I need help in figuring out what approach I should follow here, and what are the general practises employed in this type of scenario.

Thanks in advance

[GeoffZhu]

Add reversion string to the mainfest of document URL, will fix.

[jamesgeorge007]

@manishbhatt94 @GeoffZhu @timneutkens I would like to give it a shot :clap: I'm new here, it would be great if you could point me in the right direction such as the required files to work upon :+1:

[timneutkens]

Going to close this as it's been open for over a year with no other people upvoting it / no contribution to solve the question.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.