Making a PWA app with Next.js
What is a PWA?
In simple words, a PWA (Progressive Web App) is a website with all the benefits of an app. You can install a PWA app on your phone or download it from your web browser on your laptop. It is fast and lightweight.
In this article, we are going to see how you can make your Next.js app a PWA.
In our Next.js app, firstly we are going to install the package next-pwa.
npm i next-pwaSetup PWA
Now, we have to edit our config file. The configuration that we will add will make our application create the required service worker files during the compilation.
Open next.config.js file and add the below code to it.
const withPWA = require('next-pwa') module.exports = withPWA({
pwa: { dest: 'public' }
})
inside next.config.js
With this, the required service worker files will be generated in the public folder.
Creating the manifest file
To specify the PWA app’s properties, we have to define the properties in a manifest.json file. Create a manifest.json file and paste the below content into it.
{
"short_name": "Next App",
"name": "Next App",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo1.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo2.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#21125e",
"background_color": "#ffffff"
}Feel free to edit your own app name, logos and colours to it. You can also search for a manifest generator online and use that to create your json.
Adding meta tags
Our application must have some meta tags to give information about our app. To specify meta tags , in your _app.js file, specify a <Head> element, which is imported from “next/head”.
import Head from "next/head";Now insert the following content in it.
<Head>
<meta charset='utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
<meta name='description' content='Description' />
<title>Next.js PWA</title>
<link rel='manifest' href='/manifest.json' />
<link href='/favicon-16x16.png' rel='icon' type='image/png' sizes='16x16' />
<link href='/favicon-32x32.png' rel='icon' type='image/png' sizes='32x32' />
<link rel='apple-touch-icon' href='/logo1.png'></link>
<meta name='theme-color' content='#21125e' />
</Head>Remember to also add some favicons in the public folder as well, so that you can use them here.
After this, run this command to see your PWA in action
npm run devOn web, you’ll see a download icon in the search bar with an install button, that will install the PWA app on your laptop
On a mobile device, you’ll see an add to home screen button that will install the PWA on your phone.
You can see the live demo here.
You can also find the whole code on my github here.
