Make your Gatsby site a “Progressive web app" (PWA)

“Progressive web app” (PWA) is a term for a new philosophy of building websites.

PWAs help provide native-like features to web apps and require 3 things:

1. A manifest file (provided by gatsby-plugin-manifest)
2. A service worker (provided by gatsby-plugin-offline)
3. The site is served over https

This recipe:

---

Installs the necessary NPM packages.

<NPMPackage name="gatsby-plugin-manifest" /> <NPMPackage name="gatsby-plugin-offline" />

---

Adds the manifest plugin and the offline plugin to your Gatsby config, which will add a manifest file and a service worker for you.

It also adds a default icon @ src/images/icon.svg (which you can replace afterwards with your own).

<File path="src/images/icon.png" content="https://github.com/gatsbyjs/gatsby/raw/master/docs/tutorial/getting-started/part-eight/icon.png" />

<GatsbyPlugin name="gatsby-plugin-manifest" options={{ name: GatsbyJS, short_name: GatsbyJS, icon: src/images/icon.png, start_url: /, background_color: #f7f0eb, theme_color: #a2466c, display: standalone, }} />

<GatsbyPlugin name="gatsby-plugin-offline" />

---

After running this recipe, your site will be a PWA.

Refer to the documentation for the manifest & offline plugins if there are any other edits you'd like to make.

• https://www.gatsbyjs.com/plugins/gatsby-plugin-manifest
• https://www.gatsbyjs.com/plugins/gatsby-plugin-offline