Creating a PWA on a NextJS application
Published: 2023-12-18 22:41:09


A Progressive Web App (PWA) is a type of application software delivered through the web that is built using common web technologies such as HTML, CSS, and JavaScript. PWAs are designed to work on any platform that uses a standards-compliant browser, and they have additional capabilities that allow them to function more similarly to native applications.

Here are some key features and benefits of PWAs:

Reliability:

PWAs can work reliably even in uncertain network conditions or offline. They use service workers to cache resources, enabling offline functionality.
Performance:

PWAs are optimized for performance, providing a smooth and responsive user experience. They leverage techniques like lazy loading and efficient caching.
Responsive Design:

PWAs are designed to work seamlessly across various devices and screen sizes. They are responsive by default, adapting to the user's device.
App-Like Experience:

PWAs provide an app-like experience to users. They can be installed on a user's home screen, launch in full-screen mode, and offer immersive experiences without the need for a browser.
Push Notifications:

PWAs can send push notifications to users, allowing you to re-engage with users even when they are not actively using the application.
Discoverability:

PWAs can be discovered and accessed through web browsers, search engines, and other web-based tools. They don't require installation through an app store.

To successfully enable a PWA installation for your web application, follow these steps:

In the ‘Public’ folder, create a file named ‘manifest.webmanifest’ and configure it to your liking or paste 
this code: (While creating your own manifest file, make sure to include theme_color, background_color, 
display, scope, start_url, name, short_name, and description) as in the first 8 line of the code below:

```
{
"theme_color": "#000000",
"background_color": "#ffffff",
"display": "standalone",
"scope": "/",
"start_url": "/",
"name": "Hello Halo lab",
"short_name": "Hello Halo",
"description": "My demo PWA application",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"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"
}
]
```
Make sure there is a _document.js file in your pages folder, and paste this line of code inside the head tag:

<link rel="manifest" href="/manifest.webmanifest" />
My _document.js file contains this code,

```
import Document, { Html, Head, Main, NextScript } from "next/document";
class PWADocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="apple-touch-icon" href="/icon-192x192.png" />
<meta name="theme-color" content="#fff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default PWADocument;
```
To create and install a PWA: 
Add this code to your ‘next.config.js’ file which is in your root folder:

```
const withPWA = require("next-pwa");
module.exports = withPWA({
pwa: {
dest: "public",
register: true,
skipWaiting: true,
},
});
```
On your terminal, run 'npm run build'.
Next, run 'npm start'.

Voila! Check for your installation icon at the browser searchbar on opening the Url to your web app. On 
mobile devices, click on the 3 icons on the top left of the screen on your app, and you should see, ‘add 
to Homescreen’

Go ahead to install and open your PWA