“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:
- A manifest file (provided by gatsby-plugin-manifest)
- A service worker (provided by gatsby-plugin-offline)
- The site is served over https
This recipe:
Installs the necessary NPM packages.
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).
<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,
}}
/>
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.