cansin/next-with-offline

A monorepo for tools needed to easily create a PWA with an offline view for Next.js + React.

@next-with-offline

A suite of libraries that enables you to have a Workbox, Next.js, and React based Progressive Web App with basic offline support.

• @next-with-offline/next-plugin: Next.js plugin for generating a Workbox.
• @next-with-offline/react-hook: React hook for registering/using a Workbox.
• @next-with-offline/service-worker: Code utilities for configuring a service worker.

Install

yarn add @next-with-offline/next-plugin @next-with-offline/react-hook  @next-with-offline/service-worker workbox-window

Basic Usage

1. Update or create next.config.js with:

   const withOffline = require("@next-with-offline/next-plugin");
   
   module.exports = withOffline({
     offline: {
       path: "/offline",
     },
     // .
     // ..
     // ... other Next.js config
   });

2. Add public/sw.js and public/sw.js.map to your .gitignore:

   public/sw.js
   public/sw.js.map
   

3. Create worker.js with:

   import withNext from "@next-with-offline/service-worker";
   
   withNext({ offlinePath: "/offline", showReloadPrompt: true });

4. Update or create pages/_app.js with:

   import useWorkbox from "@next-with-offline/react-hook";
   import { ThemeProvider } from "@material-ui/core/styles";
   import { SnackbarProvider } from "notistack";
   
   export default function App({ Component, pageProps }) {
     useWorkbox({
       offlinePath: "/offline",
       showReloadPrompt() {
         // A function that returns a Promise
         // that resolves when user agrees to reload,
         // or rejects if the user dismisses.
       },
     });
   
     return <Component {...pageProps} />;
   }

5. Create a basic pages/offline.js page:

   import React from "react";
   
   export default function OfflinePage() {
     return (
       <p>
         Oops, you appear to be offline. This app requires an internet connection.
       </p>
     );
   }
   
   export default Page;

Available Options

• offlinePath: string or boolean - a string pathname to the offline page. Or false if you want to disable.
  • defaults to /offline.
• showReloadPrompt: function or boolean - set to a function that returns a Promise that resolves when user agrees to reload, or rejects if the user dismisses. set to true if you simply want to rely on the default implementation that uses window.confirm, or to false if you want to skip waiting and claim clients.
  • defaults to false.