Implementing PWA in the Next.js project will make it faster and work offline

Work with Next.js: Progressive Web App

20 June, 2022

Contributors

Warman Suganda

@warmansuganda

Once a day, I read an article from a website at the office. Because the article is so long I haven't finished reading the article, and I have the plan to continue reading that article at home. Unfortunately, the internet at home is having problems, so I can't open the article anymore.

I think this incident didn't just happen once and maybe I'm not the only one who experienced that, many of you who are reading this show has experienced it.

Okay, in this show I will share how to make the Next.js project faster and work offline. so that the above incident does not happen to your website visitor.

What is PWA?

Progressive Web Apps (PWA) are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience on par with native apps.

PWA is a hybrid application inspired by the ease of use of browsers across multiple platforms and the convenience of using the apps on your phone or tablet. Then, what is the difference between the three? Following are the characteristics of each application:

Comparation table

How to implement it to Next.js?

Before we implement PWA, let's try the project in offline mode, you can change the network status on your browser or disconnect your computer from the internet to check the online website.

Next.js project without implement PWA

1. Install dependencies

in this show I used the next-pwa to implement PWA in the Next.js, to install run the command below:

2. Configuration

Open next.config.js from the root directory project, and add PWA config:

Note: in configuration, I don't want to run PWA in the development environment.

Update or create public/manifest.json with

You can customize the icons yourself and put the icons file in the public/icons directory. as an example that I use on this show, you can download it at Figma

Add meta and manifest to pages/_app.tsx in <Head>

you can add more meta if you need it

3. Build and Run Project

we can try this config on the production environment, run the command below:

after running yarn build , will generate two files in your public directory: workbox-*.js and sw.js, which will automatically be served statically.

Open your browser http://localhost:3000/

•

Your website will work in offline mode

Next.js project with PWA

•

You can install your web as browser apps

Install as Crome Apps

•

Work well on mobile browser

Mobile Browser

•

Add to the mobile home screen

Mobile Home Screen

•

You can make sure the PWA config with the lighthouse in Google Chrome

Lighthouse Google Crome

Conclusion

Providing a good experience for users is very important because it will make them comfortable when using the website. PWA can be the solution to make it happen. It's been proven some websites that have implemented PWAs have increased their user engagement rates, such as OLX, Blibli, Twitter, and Showwcase.