Build PWA with Gatsby

PWA — trending word, Everyone wants to build PWA, But why?

Let find the answer today by building one, So to build PWA there is two important item we need to add in a web app — manifest and service worker, And your web app served over https, Today here we will learn how to add this to in web app so that web app will run awesome without internet.

Here is the PWA checklist, go through this — https://developers.google.com/web/progressive-web-apps/checklist

Second check lighthouse score -(https://developers.google.com/web/tools/lighthouse/) will show you PWA score, we also will add lighthouse score for the app we are building in parallel with this article.

We will not discuss the benefits of PWA here, find out more details here —

https://appinstitute.com/a-beginners-guide-to-progressive-web-apps/
https://www.gatsbyjs.org/docs/progressive-web-app/

Before we jump into building PWA, you need gatsby-cli install on your system

Install gatsby

npm install --global gatsby-cli

Next

Create a new project, here we will use the same project I have built in the last article, we will try to understand some of the components here we will use to build a web app.

gatsby new wordpress-blog-pwa https://github.com/mhjadav/wordpress-blog-gatsby

To run this blog you need to add .env file and add credential for a wordpress blog, I have covered necessary setup steps in build-a-blog-with-react-wordpress-using.

Once you clone repository, look for gatsby-config.js,

gatsby-config.js is a config file for the Gatsby project, Gatsby uses this config in different stages of the build process, we will add gatsby plugin here to do some task like — ‘gatsby-plugin-manifest’ — to create a manifest file, ‘gatsby-plugin-offline’ — to add service worker

The first thing we will do here is to add a web app manifest file, web app manifest file provides browser some information about the web app, and if a manifest is there then a user can save web app to their home screen. if you have this file on web app then a user will get Add to Home Screen popup.

To create a manifest file, we will use gatsby-plugin-manifest, provide out of the box facility to create a manifest file.

Sample plugin config —

{
resolve: 'gatsby-plugin-manifest',
options: {
name: 'Wordpress Blog PWA',
short_name: 'Blog PWA',
start_url: '/blog',
background_color: '#1d69ab',
theme_color: '#1d69ab',
display: 'standalone',
icon: path.join(__dirname, 'src/images/logo.png'),
},
},

Options in little more detail —

name: Used in app install propmt
short_name: Used in home screen, launcher or some place where space is limited
start_url: Page to load when app is launched from home screen, this is to avoid wrong page load.
background_color: This is used on splash screen when app is launched
theme_color: Web app theme color,
display: This is to customize browser ui when app is launched, you can choose any one of these four property - fullscreen, standalone, minimal-ui, browser, we will use stanalone to show add to home screen prompt.
icon: These icons are used in places like the home screen, app launcher, task switcher, splash screen, you provide big size image plugin will create set of icon required,

there are some more properties, please go through this article to get more detail about each one — https://developers.google.com/web/fundamentals/web-app-manifest/

Now run

yarn build

Once done, Open public/manifest.webmanifest, you will see all property added in a file and with a set of icons.

Great! We are one step closer

Now let’s add Service worker

Service worker provides offline support for your web app, which helps the user to load web app even in bad network conditions, service worker runs in the background, also provide support for push notification and background sync.

It’s super easy with Gatsby to add service worker, you just have to add ‘gatsby-plugin-offline’ in gatsby config file, and you are done.

But But But Add ‘gatsby-plugin-offline’ at last, so all necessary files required to be added in service worker will not get missed.

run

gatsby build

Once done, Check out public/sw.js, And if service worker generated then you are done.

run

gatsby serve

you will see a prompt to add the web app to the home screen.

Once you click on add

wow! you are done, PWA is ready, I hope you definitely fill the difference in the web app with service worker and without service worker, Now web app runs even without a network that’s so cool, try to navigate through the page and you will fill it.

Let add some more info on a web app for viewer and SEO, to added meta info on a web app, you need below plugins, already added in a project.

gatsby-plugin-react-helmet react-helmet

in gatsby-config.js, you will find gatsby-plugin-react-helmet

Go to layout.js

You will find <Helmet> tag, that is used to add a title, description, image, any other meta info, or any header tags and lot more.

<Helmet
title={data.site.siteMetadata.title}
meta={[
{ name: 'description', content: 'Convert your wordpress blog to pwa using gatsby' },
{ name: 'keywords', content: 'wordpress, gatsby, blog, pwa' },
]}
>
<html lang="en" />
</Helmet>

This metadata in the head is used by any search engine for web app placement, so this is very important elements you should add it on your web app. It’s also good for the viewer — if you want your site shows some relative info when shared on any other portal or in a search engine.

You can add helmet on any component, let say you want to set the title of blog post page as a title of page and meta description also specific to blog post.

<Helmet
title={post.title}
meta={[
{ name: 'description', content: post.excerpt },
]}
/>

add this in post.js template and meta info for each post is set different now.

Now you may be thinking, as I am ready to add a web app on a search engine I need sitemap and robots.txt,

Let’s add sitemap and robots.txt

Gatsby provides super cool plugin — ‘gatsby-plugin-sitemap’ — to auto-generate sitemap with all link on a web app, which includes blog post links.

And ‘gatsby-plugin-robots-txt’ — to generate robots.txt with necessary properties, like userAgent, disallow etc.

'gatsby-plugin-sitemap',
{
resolve: 'gatsby-plugin-robots-txt',
options: {
host: siteUrl,
sitemap: `${siteUrl}/sitemap.xml`,
policy: [{ userAgent: '*', disallow: '' }],
},
},

run

gatsby build

Once done, check out in public directory, you will find robots.txt and sitemap.xml is generated, wow! it’s magic.

Lighthouse score, PWA score is 97, I am missing on some point, will check out that and make it 100%.

Yo! Done( PWA, Helmet, Sitemap, Robots.txt)! An app is ready to launch.

I hope this article is useful to you, in some way.

Github link — https://github.com/mhjadav/wordpress-blog-gatsby

Demo Link — https://wordpress-gatsby.netlify.com/blog/

Follow me on twitter — https://twitter.com/mhjadav

Thanks for reading