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

#productivity #webdev #beginners #programming

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.

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

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

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"
}

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 (
      <Html>
        <Head>
          <link rel="manifest" href="/manifest.json" />
          <link rel="apple-touch-icon" href="/192x192.png"></link>
          <meta name="theme-color" content="#000000" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default NextDocument;

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,
  },
  nextConfig,
});

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;

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.

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)

Brad • Feb 19 '22

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 :)