/pwa-play

Primary LanguageCSS

A Bare Minimum NextJS PWA

Making a very simple PWA with NextJS shouldn't require installing a package.

PWABuilder Studio is not required, but helps a lot.

Making the webapp installable

  1. Create a manifest.json file in the public directory.
  2. Create a service-worker.js file in the public directory.
  3. Update app/layout.js to specify manifest and a themeColor in viewport.

Register the Service Worker

At this point the service worker is available, but not being used.

  1. Create a script file that will register the service worker at public/sw-register.js
  2. Invoke this script in the root layout file using Script from next/script

Display an offline page from cache

  1. Cache the html and assets on service worker install.
  2. When online, respond to fetch requests with the placeholder offline page .

References

Video: Building offline-first Progressive Web Apps - Google I/O 2016
Old (NextJS 13) blog about PWA but useful