PWA support in NextJs

Question

we would like to build a fully offline capable react web application. We usually work with NextJS.

The current problem that we are facing is that we are not able to precache all routes of the application, even though they are not making use of SSR.

For example:

pages
 - index.js
 - projects
   - index.js
   - [id.js]

The service worker should precache all pages (HTML) upfront, so that the application is immediately fully offline capable:

• /
• /projects
• /projects/123
• /projects/???

We tried to use next-offline and next-pwa, but we were only able to precache the static assets.

Has anybody had a similar requirement and found a solution?

Spiccato

Answer 1

Update 2022 May

There is an open enhancement request for next-pwa to enable precaching all pages: How to precache ALL pages

Workaround

Sylvie Fiquet found a workaround to enable caching all pages with next-pwa and wrote a blog post: Precaching pages with next-pwa

The short version of the solution follows.

• Decide which HTML and JSON files to precache
  • if you use standard <a> links: precache HTML files only
  • if you use <Link> client-side navigation: precache JSON files and at minimum the HTML file for the start URL. Decide whether to precache all HTML files or just have a fallback page.
• Generate the build ID yourself (e.g. with nanoid or uuid) and pass it to the Next.js build via generateBuildId
• Generate the list of entries to precache and pass it to next-pwa via pwa.additionalManifestEntries
  • Use the build ID as the revision for HTML entries
  • Include the build ID in the URL for JSON entries with revision set to null
  • If you want to precache the content of the public folder, you have to do it yourself
• To precache the home page HTML: set pwa.dynamicStartUrl to false (default true puts it in the runtime cache instead). Note that this doesn't precache the JSON.
• Implement as a config function to avoid running your build functions for every single Next.js command

Example for build id OUEmUvoIwu1Azj0i9Vad1

URLs:

HTML	JSON
/	/_next/data/OUEmUvoIwu1Azj0i9Vad1/index.json
/about	/_next/data/OUEmUvoIwu1Azj0i9Vad1/about.json
/posts/myfirstpost	/_next/data/OUEmUvoIwu1Azj0i9Vad1/posts/myfirstpost.json

ManifestEntry objects for /posts/myfirstpost:

HTML:

{
  url: '/posts/myfirstpost',
  revision: 'OUEmUvoIwu1Azj0i9Vad1',
}

JSON:

{
  url: '/_next/data/OUEmUvoIwu1Azj0i9Vad1/posts/myfirstpost.json',
  revision: null,
}

Caveat: There is potential for trouble if you precache too many pages. Keep an eye on the size of your cache. Remember that a single JS file for a dynamic page could translate into thousands of pages, depending on what happens in getStaticPaths.

Hazzard

Answer 2

You can make you custom service worker or simply use the package https://github.com/hanford/next-offline with the easy configuration for PWA offline support

Edit: Attached Screenshot for external script

Russell

The problem is that this package is not precaching all routes with it's corresponding HTML files. Static assets are working fine. – Spiccato

it accepts workboxOpts options so you can customize according to your need Read here for more options developers.google.com/web/tools/workbox/modules/… – Russell

@RajatDhoot Helllo, do you know where exactly in nextjs project, do I import the service worker file for it to work? – Lunular

@NevinMadhukarK in nextjs config need to add script path. Screenshot attached above – Russell

@RajatDhoot Thoughts on just using Workbox for Nextjs? Any experience on that? – Lunular

@NevinMadhukarK workbox can be easily configured with next-offline kindly check docs it's easy to configure github.com/hanford/next-offline – Russell

@RajatDhoot Yes, but I wanted to try without next-offline #63842153 Feel free to answer if you know the answer – Lunular

Are you using next server or custom server...? – Russell

@RajatDhoot NextJS server. – Lunular