Creating a Progressive Web Application using Next JS

In this article, you will learn about the progressive web app, and why PWA is gaining popularity, and also you can create a simple PWA app using NextJs.

Overview

• Progressive Web App
• Project setup with NextJs
• PWA implementation

Progressive Web App ( PWA )

PWA = web + experience of a native application

What is PWA?

The progressive web app is a simple web application that runs on a web browser similar to that of a website and provides an installable feature on a mobile device. PWA gives you a rich mobile experience via native-like functionalities such as the ability to work offline, push notifications, device hardware accessibility, and many more. Web applications can reach anyone, anywhere, on any device with a single codebase as a result PWA is more special. PWA offers the same experience as the native app and you need not download it from an app store or play store. PWA loads runs and functions in a web browser.

The Native app is known for rich and reliable with its own standalone user experience, the web app are best for reachability. Progressive Web Apps combine the best features of both native and web apps, including native-like functionality, dependability across all platforms with a single codebase, installability, and accessibility to anyone, anywhere. They are designed, developed, and enhanced using cutting-edge and modern APIs.

Why PWA?

Some people may wonder why we need PWA if we can have a separate version of apps like android, IOS, and web. The PWA is gaining popularity because of the following features:

1. Installable: Installable on a mobile device and available via the device’s home screen. A PWA feels like a native app on the device with an immersive user experience.
2. Offline support: PWA offers the same services as on the web. If you try to load a website without internet connectivity, you will get a message saying you are offline. On the other hand, Progressive Web page enables you to connect to the website, even when you are offline that being said you must visit the PWA at least once before, in an online mode.
3. Platform independence: As you know native mobile apps are platform-specific, and can only be accessed from their respective OS like Android or iOS whereas PWA’s are platform independent and can run independently of any OS since they are browser-based.
4. Background synchronization: In the mobile application, you have to frequently re-install or update the apps when the new or additional features in the app are integrated. But in the case of PWA, the content is updated in the progressive web apps in the background, and new features are automatically integrated within the website, with a simple page refresh.
5. Cost-effective: PWA is quicker to develop with a lesser developmental cost making it cost-effective.
6. Enhance Loading Speed: As compared to normal websites, PWA has an instant loading time. As it is based on the method of intelligent caching, the first load, as well as the subsequent loads, are faster. Due to this, the bounce rate for PWA is lower compared to mobile websites.

Project Setup with NextJs

You will use NEXTJS to implement the PWA which is a react framework for developing feature-rich frontend web applications. Now, Let’s create the project executing any commands mentioned below in your terminal based on the package management tool that you have.

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

After executing the command you will have a pre-configured NextJs project.

PWA Implementation

Now you will work on the implementation of PWA in the project that you just configured. For PWA implementation you will make use of next-pwa which is a zero-config PWA Plugin for NextJs. Let’s install the plugin in the project using the command below:

yarn add next-pwa

npm install next-pwa

Step 1: withPWA

Now, update or create next.config.js

/** @type {import('next').NextConfig} */
const runtimeCaching = require("next-pwa/cache");
const withPWA = require("next-pwa")({
disable: process.env.NODE_ENV === "development",
dest: "public",
register: true,
skipWaiting: false,
runtimeCaching,
});
const nextConfig = withPWA({});

module.exports = nextConfig;

After running next build, this will generate two files in your public: workbox-*.js and sw.js, which will automatically be served statically.

Step 2: Create a custom server ( optional )

This step is optional. So if you want to use a custom server then you can proceed with this step. To create a custom server using express the root of the project with the file name server.js in order to load the service work. For creating the express server, you need to add express into the project

yarn add express

npm install express

const express = require("express");
const next = require("next");
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== "production";
const app = next({
dev,
});

const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.get("/service-worker.js", (req, res) => {
app.serveStatic(req, res, "./.next/service-worker.js");
});

server.get("*", (req, res) => {
return handle(req, res);
});
server.listen(port, (err) => {
if (err) throw err;
});
});

Step 3: Creating and adding Manifest File

You have to generate the manifest file inside the public folder in the project. For this, you can use any online tool for generating the manifest file.

Fill in all the information and generate the manifest file. After that copy the content into the public directory and rename the file as manifest.json

So now lets _document.tsx page and include the manifest.json link inside the Head tag as below:

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/logo.png"></link>
<meta name="theme-color" content="#fff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

export default MyDocument;

You have successfully configured your project with PWA up to this point. Now run the following command and build the project.

yarn build

npm build

After build completion starts the build app using the following command:

yarn start

npm start

 

When the app is started, you can see an install icon at the top of the browser like in the above image. Now you can install and use the app.

For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop custom web apps using React JS, please visit our technology page.

Content Source:

1. medium.com