Implementing PWA in the Next-13 application
PWA stands for Progressive Web App. It is a type of web application that offers an enhanced user experience similar to native mobile apps but is accessed through a web browser. PWAs are designed to work on any platform or device that uses a standards-compliant browser, making them versatile and accessible.
Implementing a Progressive Web App (PWA) in a Next.js 13 (Next13) application involves several steps. PWAs are web applications that offer a user offline access and improved performance. Here’s a general guide on how to implement a PWA in a Next.js 13 app:
Implementing PWA in Next13-app:
In this article, I will guide you through the process of implementing PWA in a Next13 app.
Getting Started
Before starting our project we should have the following prerequisites in our local system.
Prerequisites:
- Node.js(version < 16.10) nodejs
- Yarn package manager Yarn Installation
- Git version controller Git
Creating and setting up Next-js project:
We are using create-next-app, which sets up everything automatically for us. We want to start with a TypeScript in our project so we should use the --typescript flag. To create a project, run:
# I am using yarn as package manager
yarn create next-app --typescript
# or
npx create-next-app@latest --typescript
# or
pnpm create next-app --typescriptFor more about NextJs application, you can visit next-js official documentation here.
During the process, you will be prompted to choose which features to enable for the project. Make sure to select “Yes” for TypeScript and ESLint. Additionally, you will be asked if you would like to use the src/ directory and the experimental app/ directory. I have chosen “Yes” for src/ directory options and “Yes” for app/ directory options. For the import alias, simply press Tab and Enter to accept.
🎉 Bravo, our basic next-app setup has been completed.
Generate manifest.json file :
A manifest file, typically named manifest.json, is an essential component in the world of Progressive Web Apps (PWAs). This file is formatted in JSON and serves as a comprehensive source of metadata and configuration details for your PWA. Within this JSON file, you define crucial information such as your app’s name, icons, start URL, theme color, and display mode.
The significance of the manifest file lies in its role as a key enabler for web browsers to identify and seamlessly install PWAs. This installation process empowers PWAs to mimic the functionality and user experience of native applications on a user’s device. Moreover, the manifest file plays a pivotal role in the browser’s presentation of the PWA. When a user launches the PWA, the browser relies on the manifest file to display the app’s name, icon, and even the splash screen.
Creating a manifest.json file is a straightforward process. You can initiate this by placing the file in the public folder of your project. Then, you simply copy the sample manifest provided below and customize it according to your unique requirements. Alternatively, you can utilize online tools like ‘simicart’ to generate a new manifest file that aligns perfectly with your PWA’s specifications.
public/manifest.json :
{
"name": "Next-13 PWA",
"short_name": "PWA",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"display": "standalone",
"orientation": "portrait",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "icons/icon-48x48.png",
"sizes": "48x48",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
],
"splash_pages": null
}Install the next-pwa package:
The next-pwa package provides a number of features that make it easy to create PWAs, including:
- Service worker generation and registration
- Caching
- Offline support
- Manifest file generation
- Head meta tags
To install the next-pwa package run the following command in your terminal:
yarn add next-pwaNext PWA Configuration:
Configure the next-pwa package in your next.config.js file:
next.config.js :
// Configuration options for Next.js
const nextConfig = {
reactStrictMode: true, // Enable React strict mode for improved error handling
swcMinify: true, // Enable SWC minification for improved performance
compiler: {
removeConsole: process.env.NODE_ENV !== "development", // Remove console.log in production
},
};
// Configuration object tells the next-pwa plugin
const withPWA = require("next-pwa")({
dest: "public", // Destination directory for the PWA files
disable: process.env.NODE_ENV === "development", // Disable PWA in development mode
register: true, // Register the PWA service worker
skipWaiting: true, // Skip waiting for service worker activation
});
// Export the combined configuration for Next.js with PWA support
module.exports = withPWA(nextConfig);The above code sets up a Next.js application with PWA capabilities using the next-pwa package. It configures various options related to React Strict Mode, minification, service worker behavior, and PWA registration based on the development environment.
Note: You may eliminate the comments above. I included them solely for improved comprehension.
Defining PWA metadata:
Next, you have to create/ modify a layout.tsx file in the app directory and paste the following code.
/src/app/layout.tsx :
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "PWA with Next 13",
description: "PWA application with Next 13",
generator: "Next.js",
manifest: "/manifest.json",
keywords: ["nextjs", "nextjs13", "next13", "pwa", "next-pwa"],
themeColor: [{ media: "(prefers-color-scheme: dark)", color: "#fff" }],
authors: [
{ name: "Rajesh Prajapati" },
{
name: "Rajesh Prajapati",
url: "https://www.linkedin.com/in/raazeshp96/",
},
],
viewport:
"minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover",
icons: [
{ rel: "apple-touch-icon", url: "icons/icon-128x128.png" },
{ rel: "icon", url: "icons/icon-128x128.png" },
],
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}The metadata defines the PWA metadata. The title property is the title of the PWA. The description property is a description of the PWA. The generator property is the name of the framework that was used to generate the PWA. The manifest property is the path to the PWA manifest file. The keywords property is a list of keywords that describe the PWA. The themeColor property is the theme color of the PWA. The authors property is a list of authors of the PWA. The viewport property is the viewport meta tag for the PWA. The icons property is a list of icons for the PWA.
Note: Change
metadataaccordingly
Adding a few lines in .gitignore
After generating your build, your project will generate multiple .js files automatically within the public folder. These files are typically not necessary to include in your GitHub repository. To exclude them from version control, you can add the following lines to your .gitignore file.
.gitignore
# Auto Generated PWA files
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.mapBuild and run PWA:
Once you have finished writing the configurations, we can proceed to test the app. To test the Progressive Web App (PWA) locally, let’s begin by generating a new build. Please follow these steps:
- First, stop the terminal if it’s currently running.
- Use the following command to create a new build:
yarn buildAfter the build, you will find two files in your public folder:
sw.js: This file is a Service Worker file. Service Workers are utilized for various purposes such as caching, background synchronization, providing native features, and enabling offline support.workbox-50de5c5d.js: This file, named "workbox," is used to facilitate asset caching. It helps improve the performance of your web application by storing frequently used assets locally to reduce the need for repeated downloads.
Now, you can execute it on your local machine.
yarn devNavigate to localhost:3000 in your web browser, and you’ll notice an installable icon located in the upper-right corner of the URL bar. Simply click on this icon, and you’ll be able to search for the application on your computer and launch it.
When the installable icon (located under the red square in the image above) is clicked, a prompt to install the PWA will appear, as shown in the image below.
Once you have installed your PWA on your device, you can search for the app on your computer and run it proficiently.
You’ve got it! You are now acquainted with the process of transforming your Next.js website into an impressive Progressive Web App (PWA). Here’s to your success!
Repo Link:https://github.com/RaazeshP96/pwa-using-next13
Demo URL:https://pwa-using-next13.vercel.app/
Thank you 🙇
