Build PWA (Progressive Web App) with Next JS under 1 minute

thumbnail

Hello friends, Today in this post we will learn how to create a PWA(Progressive Web Application) with NEXT JS. I also followed this same procedure to make my website a PWA. PWA or Progressive Web Apps are web application that provides the user with a native app-like experience. It provides features such as installing the web app into your device, the ability to work offline, send push notifications, etc. So let’s get started.

We need manifest, icons & next-pwa module.

To learn more about next-pwa package please refer to its documentation below

next-pwa - npm

First install next-pwa using npm install, for manifest file I will show a simple way to generate it.

$ npm install next-pwa

For manifest, just you need logo with 512 x 512 size open https://www.simicart.com/manifest-generator.html/

Fill up your app details and upload your icon, then click on generate your manifest file. A zip file will be generated extract it and place it in your public folder.

Now in your next.config.js import next-pwa and add the following code

/** @type {import('next').NextConfig} */

const withPWA = require("next-pwa");
const nextConfig = withPWA({
  reactStrictMode: true,
  productionBrowserSourceMaps: true,
,
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
    // disable: process.env.NODE_ENV === "development",
  },
});

module.exports = nextConfig;

If you want to disable add this below property.

pwa:{
     ...
     process.env.NODE_ENV === 'developement'
}
...

Now if your run and build your application service worker sw.js and workbox-* file will be generated in the public folder. In your browser you will see the install option.

Thanks for reading this very short post, if you found this post helpful please share maximum, Thanks for reading 😊 Stay tuned.

Also please share your suggestion for us to improve and serve you better.

https://codewithmarish.com/contact

Also Please don’t forget to subscribe to our youtube channel codewithmarish for all web development related challenges.

https://www.youtube.com/channel/UCkPYmdVz8aGRH6qCdKMRYpA

Related Posts