Building a Next JS PWA using next-pwa and service worker

Before jumping into building a Next JS PWA (progressive web app), let’s go over some basics.

What is a PWA?

PWA refers to ‘Progressive web application’. PWAs are built using common web technologies like HTML, CSS, and JavaScript, but they feel almost like native apps. PWAs offer many of the same functionalities as native apps — like push notifications, offline support, hardware access, and much more. Meanwhile, native apps are built using a programming language specific to that platform — like Swift for iOS and Kotlin or Java for Android.

PWAs offer great flexibility over native apps. You can reuse your web application codebase to build a PWA. Many prominent companies have built and deployed their PWAs and seen significant growth in their business. One example is Twitter Lite — a PWA that delivers a state-of-the-art experience to Twitter users with lower data consumption, instant loading, and high user engagement. With this PWA, Twitter saw a 75% increase in tweets sent, a 65% increase in pages per session, and a 20% decrease in bounce rate.

The Engineering Lead of Twitter Lite, Nicolas Gallagher said:

Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter. The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android.

What is a Service Worker?

A service worker is a script that runs in the background in your browser on a separate thread, separate from a web page. This lets us use features like push notifications and background sync that don’t require user or web page interaction. It sits between the network and the browser, acting as a proxy server. So using service workers, we can control network requests. Cache requests to enable offline access to cached content, which also improves performance! Note that this network cache is independent of the browser cache or network status. Also, this cache is persistent. As the Service worker is a JavaScript worker, we can’t access DOM directly in the service worker.

Now we have a good understanding of PWA and Service workers — why these technologies exist and why we should use them. With that, it’s time to start converting an existing or new Next JS application into a PWA. Let’s go!

Step 1: Install next-pwa

In the first step, we will install an npm package next-pwa in our project. Run:

 npm install next-pwa

OR

yarn add next-pwa

Step 2: Create a Service worker for offline support and caching

We need to create a service-worker.js file in the root directory to add offline support and caching. We should also configure this for push notifications or any other features we might want to add in the future. Here is the example service worker —

~/service-worker.js

Step 3: Create a fallback page when the app is offline

Due to service-worker.js, our app will still work when there is no network access available and serves the cached content. But what happens when a user visits a page that is not cached by a service worker? To handle this situation, we’ll create a fallback.jsx page in the pages directory which shows a message if the device is offline. Here is the example code for a fallback page —

~/pages/fallback.jsx

Step 4: Create a next.config.js file

Now the next step is to create the next.config.js file inside the root directory. This will create a sw.js file using our service-worker.js file. This file will be served from the public folder in the production build. Here is a sample next.config.js file —

~/next.config.js

Step 5: Provide all the information for the PWA

Now the next step is to create the manifest.json file inside the public directory and provide all the details related to the PWA like name, description, icon, etc. You can customize the name, icons, and other details according to your use case.

~/public/manifest.json

Step 6: Link the manifest.json to the web application

In this step, we will use the manifest.json file that we created earlier and link that file to our web application in the HEAD section. Put this code in the HEAD section of your web application —

<link rel=”manifest” href=”/manifest.json” />

Step 7: Make a build and validate your PWA

This step is the last step of our PWA building process. Now all we have to do is make a build of our Next JS app! First, create a build using:

npm run build

We are making the build because in dev mode there is a lot of unused JS code. So, we can’t run the lighthouse audit in dev mode.

The output you see will be something like this —

Once the build has been created, start a server on localhost using:

npm run start

Now you’ll start to see a small install icon in the URL bar of your browser. Go ahead and install your PWA! Once installed, this app will be added to your device’s app drawer with the icon that you selected in the manifest.json file. Now you can access the application directly by clicking on the app icon.

Finally, you can validate your PWA using Lighthouse in dev tools. To do this, go to Chrome dev tools, open the Lighthouse tab, and click on Generate report. Once the report is ready, you’ll see something like this.

That green mark above the ‘Progressive Web App’ label means that the lighthouse validates our web application as a PWA.

And we’re done! I hope this post helped you understand the basics for building your first PWA in Next JS 😊