Progressive Web App + Nextjs
What is Progressive Web App and How to enable it in nextjs Application?
A detailed guide to Progressive Web Apps: How to use it with nextjs and publish on Google play store, Microsoft store, Meta Quest, and Apple play store.
--
Progressive Web Apps (PWAs) are just regular websites; with the help of PWA, you enable or add some additional functions to your regular web application.
PWA helps to provide installation functionality on your regular website. After enabling PWA, you install your web into android, IOS, and desktop, and the good thing about it is that it works across cross-platforms like Windows, Linux, and macOS.
PWA uses service workers', manifests, and progressive enhancement to provide a native app-like experience with your regular website. You do not need to create a desktop app or mobile. All you need to enable PWA in your nextjs app.
All the code is available on GitHub, and check out the online working demo application.
How to enable PWA in nextjs Application?
Enabling the PWA in your nextjs is a copy-paste of code. Do not worry; I will teach you everything related to PWA and Nextjs.
You can follow the steps I mentioned below.
Steps
· How to enable PWA in nextjs Application?
∘ Setup in vscode
∘ Install next-pwa package
∘ Config the next-pwa
∘ Create a manifest.json
∘ Adding metadata for PWA
· FAQ
∘ How to debug pwa next app?
∘ vscode
∘ Dev tool
∘ PWABuilder
∘ Where do we publish PWA app?
∘ How do you publish the PWA app on the Google play store, Microsoft store, Meta Quest, and Apple play store?
∘ How to found a List of PWA install apps in chrome?
∘ Additional resources
· https://www.pwabuilder.com/
∘ Conclusion
Setup in vscode
To work with PWA in vscode, you need to install a PWABuilder Studio plugin.
You can install the PWABuilder Studio plugin, firstly Launch VS Code, and Open the Quick search bar palette (Ctrl+P), paste the following command, and press enter to install a plugin in vscode.
ext install PWABuilder.pwa-studioPWABuilder Studio plugin helps you to set up the manifest.json configuration, manage your Manifest and service workers and generate icons of different sizes in vscode
It also tells you errors related to web manifest and missing configuration and bundles your app, and it helps to publish your PWA app into the Microsoft store, Google play store, Apple play store, and Meta quest.
Install next-pwa package
To enable the PWA in nextjs, you need a next-pwa package for it. You can install it with node package managers like yarn, pnpm, or npm.
npm install next-pwa
# or
yarn add next-pwa
# or
pnpm add next-pwaConfig the next-pwa
For configuring the next-pwa node package with nextjs. You need to open next.config.js file and copy and paste the following code into your next.config.js
const withPWA = require("next-pwa")({
dest: "public",
disable:
process.env.NODE_ENV === "development"
// disable is help to disable PWA in deployment mode
});
/** @type {import('next').NextConfig} */
module.exports = withPWA({
swcMinify: true,
reactStrictMode: true,
typescript: {
ignoreBuildErrors: true,
},
eslint: {
ignoreDuringBuilds: true,
}
// write additional configuration here.
});Create a manifest.json
The last step is to create a manifest.json file in your public folder. There are many ways to generate a manifest file using an online free generator.
The first is a Manifest-generator tool, and the second is the PWABuilder Studio plugin. Both work fine. You do not need to manually write icons and their sizes in the manifest.json file. Manifest-generator and PWABuilder Studio plugin work everything for you.
After generating your file with the Manifest-generator tool or PWABuilder Studio plugin, it generates all the icons according to sizes.
The Manifest-generator tool converts your icon manifest.json into a zip folder. First, extract the folder, and you will find icons and manifest.webmanifest file.
the next step is to rename the manifest.webmanifest to manifest.json and your file looks like this.
{
"theme_color": "#f69435",
"background_color": "#f69435",
"display": "standalone",
"scope": "/home=",
"start_url": "/",
"name": "Next PWA demo",
"short_name": "PWA",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"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"
}
]
}You can learn more about manifest.json file and the meaning of every property.
- theme_color property defines your theme color.
- background_color property defines your website background color.
- name property defines your app name.
- short_name property defines your short or nickname.
- description property defines the small introduction for your app.
- icons property defines icons for the Application.
- lang property defines the language type. If language, your Application is supported.
- scope property defines which URLs are within the navigation scope of your Application.
- start_url property is your starting path or an absolute or relative path in your Application.
- display property defines the display mode \for a website; you can learn to click here.
Some additional properties are available for PWA; you can add them to the manifest.json file. After your manifest.json look like this.
{
"name": "Next PWA demo",
"short_name": "PWA Demo",
"lang": "en-GB",
"version": "1.0.1",
"description": "The next PWA demo is an app built to teach you a basic concept. The demo app teaches you How to use PWA with nextjs.",
"categories": [
"developer",
"eductaion"
],
"orientation": "any",
"shortcuts": [
{
"short_name": "About",
"name": "About us",
"url": "/about",
"description": "About the author",
"icons": [
{
"src": "/icons/icon-two96x96.png",
"type": "image/png",
"sizes":"96x96",
"purpose": "any"
}
]
},
{
"name": "Contact us",
"short_name": "Contact",
"url": "/contact",
"description": "contact page to contact us.",
"icons": [
{
"src": "/icons/icon96x96.png",
"type": "image/png",
"sizes":"96x96",
"purpose": "any"
}
]
}
],
"icons": [
{
"src": "/icons/128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/128x128@2x.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/icons/32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/icons/107x107.png",
"sizes": "107x107",
"type": "image/png"
},
{
"src": "/icons/142x142.png",
"sizes": "142x142",
"type": "image/png"
},
{
"src": "/icons/150x150.png",
"sizes": "150x150",
"type": "image/png"
},
{
"src": "/icons/284x284.png",
"sizes": "284x284",
"type": "image/png"
},
{
"src": "/icons/30x30.png",
"sizes": "30x30",
"type": "image/png"
},
{
"src": "/icons/310x310.png",
"sizes": "310x310",
"type": "image/png"
},
{
"src": "/icons/44x44.png",
"sizes": "44x44",
"type": "image/png"
},
{
"src": "/icons/71x71.png",
"sizes": "71x71",
"type": "image/png"
},
{
"src": "/icons/89x89.png",
"sizes": "89x89",
"type": "image/png"
},
{
"src": "/icons/StoreLogo.png",
"sizes": "50x50",
"type": "image/png"
}
],
"background_color": "#FFE683",
"theme_color": "#0000FF",
"id": "/?home=1",
"start_url": "/?homes=1",
"display": "standalone",
"screenshots": [
{
"src": "/Enable-pwa-1.png",
"type": "image/png",
"sizes": "1280x720"
},
{
"src": "/Enable-pwa-2.png",
"type": "image/png",
"sizes": "1280x720"
},
{
"src": "/Enable-pwa-3.png",
"type": "image/png",
"sizes": "1280x720"
},
{
"src": "/Enable-pwa-4.png",
"type": "image/png",
"sizes": "1280x720"
}
]
}- categories property define the type of your website. You can find a list of general categories here.
- orientation property establishes the orientation of your website.
- screenshots property defines the application information. Screenshots that can showcase your Application in app stores.
- shortcut property provides a shortcut button for a task path. You click the button, and the user goes on a specific path in the Application.
There are tons of properties or configurations available in themanifest.json file. You read on official docs and pwabuilder
Adding metadata for PWA
The last step is adding metadata in your _document.tsx or _app.tsx file. There is two important metadata. The first is adding a manifest.json file with the following code <link rel=”manifest” href=”/manifest.json” /> , and the second is defining icons according to the operating system.
// adding config for pwa and SEO purpose
<meta name="application-name" content="next PWA demo" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="PWA App" />
<meta name="description" content="Best PWA App in the world" />
<meta name="format-detection" content="telephone=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="msapplication-config" content="none" /> {/* learn more https://blog.giantgeek.com/?p=1418 */}
<meta name="msapplication-TileColor" content="#2B5797" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="theme-color" content="#000000" />
// adding icons
<link rel="apple-touch-icon" href="/icons/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="150x150" href="/icons/150x150.png" />
<link rel="apple-touch-icon" sizes="284x284" href="/icons/284x284.png" />
<link rel="apple-touch-icon" sizes="310x310" href="/icons/310x310.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/icons/32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/icons/30x30.png" />
{/* Important adding manifest.json file */}
<link rel="manifest" href="/manifest.json" />
<link rel="shortcut icon" href="/favicon.ico" />
// SEO
<meta property="og:type" content="website" />
<meta property="og:title" content="nex PWA demo" />
<meta property="og:description" content="Best PWA App in the world" />
<meta property="og:site_name" content="PWA App" />
<meta property="og:url" content="https://next-pwa-demo-two.vercel.app/" />
<meta property="og:image" content="/icons/StoreLogo.png" />Now start your local development server with pnpm dev or pnpm run dev the command.
FAQ
Do you know how to look at my application on Android?
Your application looks different on every device, But I use android mobile, and your PWA application installs screen in android looks like this.
How to debug pwa next app?
Debugging the PWA, there are three ways.
- Vscode
- Dev tool
- PWABuilder
Vscode
First is the vscode itself, with the PWABuilder Studio plugin. It helps you debug the PWA app inside vscode.
Dev tool
The second is the Dev tool; you can open the dev tool > Application > click the Manifest tab to check errors and other information about the PWA application.
PWABuilder
The PWA builder is the best debugging tool for PWA applications. The vscode dev tool is often fine with other issues like security, Service Workers, and best practices about PWA.
PWA builder is suitable for testing production-ready or bundler-ready applications.
Go to > https://www.pwabuilder.com/
PWAbuilder website looks like. For testing, you can click on the demo URL button.
Enter your website URL and click the start button.
The PWA builder website guides you with lots of information about security and service worker.
Where do we publish PWA app?
You can publish your PWA base application on the Google play store, Microsoft store, Meta Quest, and Apple play store.
People can also install your PWA-based Application directly from your website. When someone opens your website, people see a download icon in the browser. So everybody installs the PWA application.
How do you publish the PWA app on the Google play store, Microsoft store, Meta Quest, and Apple play store?
For the publish PWA app on the Google play store, Microsoft store, Meta Quest, and Apple play store, you need pwa builder. PWA builder helps you debug and also bundle your Application on various platforms. Every operating system has its guideline for bundle application. You learn on pwa builder docs. PWA builder provides a step-by-step guideline for you.
Before publishing the PWA application on the Google play store, Microsoft store, Meta Quest, and Apple play store, test your application with PWA builder, and in your application doesn't have any issues related to security and PWA, another wise is a higher chance your application maybe reject.
How to found a List of PWA install apps in chrome?
You find all PWA-installed applications in chrome. Just type chrome://apps/ in the browser.
You can also see all available or installed application lists here; you can remove and open your installed Application easily with right-click.
What about the nextjs app folder
In the current stage, if you build an app with nextjs and an app folder. You need PWA functionality in nextjs based website.
There is only one way: a next-pwa package, and follow my instructions.
Nextjs also introduce a manifest function with the app folder. But it still needs to be production ready. You can learn more with the following link.
Additional resources
https://www.freecodecamp.org/news/what-are-progressive-web-apps/
Conclusion
You have many readers or users, and you don't have enough many or time-built separate applications for desktop, android, and IOS. In that case, PWA is for you.
You are closer to your client if your team runs a blog site or any other services that provide PWA base Application installation functionality. It gives a plus point in business without spending extra money and enabling PWA in your nextjs app.
Now opening a website in chrome is a hard task, as installing an application from a play store and then using the service. It is easy to work—even for people who never again use Suppose.
If you and your team face a problem publishing the PWA application on various platforms. You can contact me, and maybe, I can solve your problem.
You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh.dev, Nextjs, frontend web, and Sign up for a free newsletter.
You can also check out awesome-next, a curated list of awesome Nextjs-based libraries that help build small and large-scale applications with next.js.
