Turning my website into a progressive web app is very straight forward since I built my website with Gatsby, I only have to install two Gatsby plugin with minor modification.

  1. Install Gatsby offline plugin
npm install --save gatsby-plugin-offline

gatsby-config.js

{
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        ...
      }
    },
    'gatsby-plugin-offline'
  ]
}
  1. Create a web manifest file using gatsby-plugin-manifest

to install plugin

npm i gatsby-plugin-manifest

configure gatsby-config.js

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
        icon: `src/images/kennethau.png`, // This path is relative to the root of the site.
      },
    },

Referring to the screen cap below, using Google lighthouse audit, the score has jump from 31 to 69 by installing and configuring 2 Gatsby plugin.

Note: In order to measure the PWA score properly and PWA to work properly in Chrome, make sure you head to Chomre -> Inspect -> Application -> Clear Storage where you can clear out the cached values and “unregister” service workers.

About Me

I am a self-taught developer who is passionate about software development, entrepreneurship and finance. I love to write about my daily life at work and outside work.

You can find more about me on  Kenneth Au LinkedIn

Previous
Next