# 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/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.org/packages/gatsby-plugin-manifest
- https://www.gatsbyjs.org/packages/gatsby-plugin-offline