'PWA support in NextJs
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?
Solution 1:[1]
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
Solution 2:[2]
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.
- if you use standard
- 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
- Use the build ID as the
- To precache the home page HTML: set
pwa.dynamicStartUrl
tofalse
(defaulttrue
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
.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | Christopher Peisert |