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 manifest and service worker, I hope you have some idea about both, and the third very important thing is progressive page loading

How I can say this is web app is PWA, to find go through this checklist

https://developers.google.com/web/progressive-web-apps/checklist
Or test your website with a lighthouse, will show you PWA score

https://developers.google.com/web/tools/lighthouse/
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 use to build PWA.

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

To run this blog you need to add .env file and add you 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 prompt

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: App theme color,
display: This is to customize browser ui when app is launched, you can any of these four property – fullscreen, standalone, minimal-ui, browser, user 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 detail about each one — https://developers.google.com/web/fundamentals/web-app-manifest/

Now run

yarn build

check to file public/manifest.webmanifest, you will find all elements 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 even in bad network conditions, service work 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.

Do not add manifest file after offline plugin, otherwise manifest will not be included in service worker.

run

gatsby build
gatsby serve

And you are done you will see a popup on to add to the home screen.

Once you click on add

wow! you are done, PWA is ready.

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.

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

Go to layout.js

You will find tag, that is used to add a title, description, image, any other meta info, or any header tags,

This metadata in the head is used by any search engine for placement, so this is very important elements you should add it on your web app.

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.
add this in post.js template and meta info for each post is set different now.

Now you may be wondering you also need sitemap and robots.txt, as you want your web app visible on search engine.

Let’s add sitemap and robots.txt

Gatsby provide super cool plugin — ‘gatsby-plugin-sitemap’

To auto-generate site with all link on a web app

And generate robots.txt with ‘gatsby-plugin-robots-txt’ plugin,

Below config I have used, you can use as you want.

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

Build your web app with below command and your will see robots.txt and sitemap is created in your build directory, here it’s ./public

gatsby build
gatsby serve

Yo! Done — PWA, Helmet, Sitemap, Robots.txt.

I hope this is useful to you.

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