DEV Community

Cover image for PWA: Learning, Implementing and Loving ft. NextJS under 2 mins
Aniket Pal
Aniket Pal

Posted on

PWA: Learning, Implementing and Loving ft. NextJS under 2 mins

When I started my web dev journey, I was always overwhelmed by the concept of transforming a web application to mobile app. Being a self taught developer I was pretty clueless on how to do it. It took me 3 months to realise the upscale advantage and the methodology behind it. I believe it's time to give back to the community. So let's learn it all in just 2 mins starting now!

Understanding PWA ✨

If mobile apps and the web had a baby, that baby would be PWA. At its core, PWA helps businesses build web applications with the look and feel of native mobile apps but using web technologies like JavaScript, CSS, and HTML. PWA offers features such as push notifications, offline support and much more. Progressive Web Apps are secure by default. The technologies powering PWA require apps to be served over HTTPS to work. Companies are adopting PWAs which are reducing time in developing, testing and maintaining applications.

Gartner predicts, up to 20% of companies will abandon their native mobile applications. Instead, they believe that PWA will become a more viable alternative to them.

Companies using PWA

In fact, several companies, like Alibaba, have shown that by simply focusing their efforts only on a PWA app instead of having separate native apps increased conversions and average purchases. Since, our blog promises on building PWA with NextJS in 2 minutes let's jump directly into it.

Time starts ⏳

Over here, I will be starting from scratch but you can definitely add PWA to your existing project.

yarn create next-app --typescript 
Enter fullscreen mode Exit fullscreen mode

We have started with the basic NextJS starter with typescript support. Now, let's add the dependency which does the work for us.

yarn add next-pwa @types/next-pwa
Enter fullscreen mode Exit fullscreen mode

Now, we need manifest.json to specify the meta data about the application.

  "name": "PWA Application with Next",
  "short_name": "PWA",
  "icons": [
      "src": "/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
      "src": "/384x384.png",
      "sizes": "384x384",
      "type": "image/png"
      "src": "/512x512.png",
      "sizes": "512x512",
      "type": "image/png"
  "theme_color": "#000000",
  "background_color": "#000000",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait"
Enter fullscreen mode Exit fullscreen mode

You can use this to generate manifest for your application or copy the above manifest. You need 3 images of dimensions 512 x 512 , 384 x 384 and 192 x 192 which you can generate from here. Place all these files - images and manifest.json into the public directory.

Let's create a _document.ts page in the pages directory. You can add the code in the file.

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

class NextDocument extends Document {
  render() {
    return (
          <link rel="manifest" href="/manifest.json" />
          <link rel="apple-touch-icon" href="/192x192.png"></link>
          <meta name="theme-color" content="#000000" />
          <Main />
          <NextScript />

export default NextDocument;
Enter fullscreen mode Exit fullscreen mode

We are almost done!🥳 Let us finally add our new configuration in next.config.js.

/** @type {import('next').NextConfig} */
const withPWA = require("next-pwa");

const nextConfig = {
  reactStrictMode: true,

module.exports = withPWA({
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,

Enter fullscreen mode Exit fullscreen mode

Congratulations!🥳 You were really quick in building your PWA application. Hopefully you were able to do it within 2 mins and faced no errors in the process.

Let me give you a bonus on how to add offline support to your application. Create an _offline.tsx file in pages directory. And replace with the particular code:

import type { NextPage } from "next";

const Offline:NextPage = () =>{
   return (<h1>You need to check your internet connection 😢 </h1>);


export default Offline;

Enter fullscreen mode Exit fullscreen mode

Make sure to add some awesome UI elements and make the offline page more interactive rather than just a statement. Below I have added one of my open source contributions which was to add PWA feature with offline support in Fission which focuses on building Serverless Functions and Workflows for Kubernetes.

PWA addition in fission

Incase you have faced an error and your application is not working or you just want to interact with me feel free to reach me out on LinkedIn 💕

Top comments (6)

bradcypert profile image

One thing that I've found very interesting about PWAs is how a lot of companies are not dropping mobile for PWA support, but instead using PWAs to try to give people a mobile quality experience even if they wont install the app. All this to say, I'm seeing more companies picking up PWAs AND keep mobile around. Curious to see where this goes long term :)

aniket762 profile image
Aniket Pal

Absolutely Brad let's see where it goes. May be down the line, I write another blog on The contagiosity of PWAs

sumana2001 profile image
Sumana Basu


aniket762 profile image
Aniket Pal


kumarshantanu01 profile image
Kumar Shantanu

Very helpful blog✨💯

aniket762 profile image
Aniket Pal

Thanks Shantanu