How to use Next Js to create PWA

Introduction

Progressive web app(PWA) is an app which built using web technology, but can provide platform specific user experience. It can be install and uninstalled just like any other app. PWA can be freely distributed directly from your website. It enables app developer to have single code-base for all platform

Steps

To create a PWA with Next.js, you can follow these general steps:

  1. Setup Next.js: Start by setting up a new Next.js project. You can use the Next.js CLI or create a project manually by installing the required dependencies.
  2. Service Worker: Service worker are event-driven worker which act as a proxy server between web app and browser. Next.js allows you to register a custom service worker using the next-offline plugin or by writing your own service worker code. The service worker will handle caching and offline capabilities for your PWA.
  3. Web App Manifest: Next.js allows you to include a web app manifest in your project. The manifest file is a JSON file that defines metadata about your app, such as its name, icons, and other properties. Including a manifest is necessary for users to add your PWA to their home screen.
  4. Responsive Design: You can create responsive layouts and styles using CSS frameworks like Tailwind CSS or CSS-in-JS libraries like Styled Components.
  5. Optimization: Next.js provides various optimization techniques to improve the performance and speed of your PWA. This includes automatic code splitting, prefetching, and server-side rendering, which can be leveraged to ensure fast and efficient loading of your app.
  6. Push Notifications: To implement push notifications in your Next.js PWA, you can use third-party libraries or the Web Push API directly. These libraries and APIs allow you to send push notifications to your users, even when the app is not actively open.

Implementation

1. create Next-app using npx

npx create-next-app pwa-example

✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Use App Router (recommended)? … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
  1. Move to folder
cd pwa-example
  1. Run the application and navigate to localhost:3000
npm run dev


4. Install next-pwa dependency

npm i next-pwa
  1. open the project in visual studio code
  2. Use any online website to create manifest file or create manifest.json manually in public folder
{
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "pwa-example",
    "short_name": "simple-pwa",
    "description": "Simple pwa application",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}
  1. create _document.js file in public folder
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="manifest" href="/manifest.json" />
        <link rel="apple-touch-icon" href="/icon.png"></link>
        <meta name="theme-color" content="#fff" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
  1. Add following line to your next.config.js file
module.exports = {
    reactStrictMode: true,
};
const withPWA = require('next-pwa')({
    dest: 'public'
  })
  
  module.exports = withPWA({
  })
  1. Add following line to src/app/layout.js file
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
      <link rel="manifest" href="/manifest.json" />
      <meta name="theme-color" content="#90cdf4" />
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  )
}
  1. Run following command to create build pwa artificates in public folder.
npm run build
  1. Run following command to start your application
npm run start
  1. Visit to http://localhost:3000/

you can see the install button in your search bar menu. Click on that install the app.

Repository

https://github.com/sharmapankaj01234/pwa-example

Final thoughts

Remember that PWAs have specific requirements, such as being served over HTTPS, having a service worker, and meeting certain performance benchmarks. You’ll need to ensure that your Next.js PWA meets these requirements for it to be recognized and installed as a PWA by browsers.

Additionally, keep in mind that the specific implementation details may vary depending on your project’s requirements and the libraries and tools you choose to use. It’s always a good idea to consult the Next.js documentation and explore additional resources and examples related to creating PWAs with Next.js.

Leave a comment