PWA with offline support using next-pwa package (NextJs)
So, What are PWAs?
Okay, so we all know about Platform Specific apps or Native Apps, right? Those apps which runs on platform specific devices like Android and IOS are called platform specific apps.
We also know about Web Apps and they are basically an application program that is stored on a remote server and delivered over the Internet through a browser interface. We call them a Websites in layman’s term.
If you think about platform-specific apps and web apps in terms of capabilities and reach, platform-specific apps represent the best of capabilities whereas web apps represent the best of reach. So where do Progressive Web Apps fit in?
Progressive Web Apps (PWAs) is kind of a hybrid version of both Native apps as well as web apps. It uses modern APIs to provide greater functionality just like Native apps, with great deal of dependability and installability while reaching anybody, anytime and on any device with a single codebase.
Here in this article, we are going to build a Progressive Web App with offline support on a NextJs application using next-pwa package. Please follow along the instructions:
- First of all, initialize a project using create-next-app and install next-pwa package.
- As you might already know, for a PWA to function properly, we need different sizes of logos for our app to run on different range of devices. I found a very good websites called PWA app Icon Generator and Icogen to generate these images in different sizes. Here i have used PWA Icon Generator to generate multiple size images.
3. Now download and copy all the assets files along with the manifest file into the public folder as shown below.
Note:
Remember, don’t forget to add the other image sizes inside the icons array . I have shortened the JSON here to take a Screenshot.You can take a look in my github repo attached below for the complete code.
4. After that, we need to link the manifest.webmanifest file in our Next.js <Head>component in all the pages with this code.<link rel='manifest' href='/manifest.webmanifest' />
5. Now, in the first step, we installed the next-pwa package which we will be using now. In your project's root, there is a next.config.js which we have to configure accordingly.
Here, we have to import the withPWA function from the next-pwa package and wrap the export in that function, here we can add a pwa object which we will configure as shown in the code below. The dest property is the destination folder and we added a disableproperty which disables creating the service workers while we are in development environment.
const withPWA = require(‘next-pwa’);module.exports = withPWA({
pwa: {
dest: ‘public’,
disable: process.env.NODE_ENV === ‘development’,
},
reactStrictMode: true,
});
6. Additionally, we can also add a page to show if the user is offline which enhances the user experience and makes it work like an actual app.
We just have to add a page named _offline.js inside our pages folder with basic “Page is Offline” kinda message, and next-pwawill automatically show that page if the user is offline. But the condition is that the user has to visit the website so that the offline page is cached whenever the user first visits the website.
7. Now lets build the application using yarn build command. As you can see, it generates 3 files, namely Service Worker (sw.js), workbox and Offline fallback files within the public folder. Now, lets add these files to the .gitignore as these are production files and we won’t be adding them to the git.
8. Lastly, lets run our application using yarn dev command.
As you can see, we could see the PWA support is disabled message in the terminal, which means our PWA app is working properly. We just have to disable or comment the development config in next.config.js file to test it in the development environment as shown below.
Now again run the yarn dev command and open the url in your browser. You will see this(see below) Pop-up in your browser. You can install it and see for yourself that your PWA is working properly.🙇♂️
Lastly, you can also see the manifest in Application tab as well as Lighthouse report to confirm that your PWA is working properly.
As you can see, our lighthouse report also shows that our app is a PWA. There might be some performance issue as shown in the lighthouse report, you can fix them easily by following the report itself.
Here is my github repo link as well. Feel free to explore if you have some confusion or you could ask me in the comments below.
Happy Coding!🎉
