nextjs pwa/offline

[urban cove]

how to persist web app locally so that subsequent access without internet still works

[vestal sonnet]

Hi @urban cove. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To implement offline functionality and persist your Next.js web app locally for subsequent access without internet, you can use a service worker. Next.js doesn't have built-in offline support, but you can integrate Serwist (formerly Workbox) to achieve this. Here's how you can do it:

1. Install Serwist:
   First, install Serwist and its Next.js integration package:

   npm install serwist @serwist/next
   

2. Configure Next.js:
   Update your next.config.js file to use Serwist:

   import withSerwistInit from "@serwist/next";
   
   const withSerwist = withSerwistInit({
     swSrc: "src/app/sw.ts",
     swDest: "public/sw.js",
   });
   
   const nextConfig = {
     // Your existing Next.js config
   };
   
   export default withSerwist(nextConfig);
   

3. Create a service worker file:
   Create a file src/app/sw.ts (or sw.js if you're not using TypeScript) with the following content:

   import { defaultCache } from "@serwist/next/worker";
   import type { PrecacheEntry } from "serwist";
   import { Serwist } from "serwist";
   
   declare const self: ServiceWorkerGlobalScope & {
     __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
   };
   
   const serwist = new Serwist({
     precacheEntries: self.__SW_MANIFEST,
     skipWaiting: true,
     clientsClaim: true,
     navigationPreload: true,
     runtimeCaching: defaultCache,
     fallbacks: {
       entries: [
         {
           url: "/",
           matcher({ request }) {
             return request.destination === "document";
           },
         },
       ],
     },
   });
   
   serwist.addEventListeners();
   

This configuration will cache your app's assets and allow it to work offline. The fallbacks option ensures that the root URL ("/") is cached and served when offline.

For more detailed information and advanced configurations, you can refer to the Next.js Progressive Web Applications (PWA) documentation (https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps#offline-support).

Remember that implementing offline support requires careful consideration of your app's architecture and data management. You'll need to decide which parts of your app should work offline and how to handle data synchronization when the user comes back online.

Next.js Progressive Web Applications (PWA) documentation (https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps#next-steps) also suggests exploring additional PWA capabilities like background sync, periodic background sync, or the File System Access API to enhance your application's offline experience.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: