Skip to content

Commit

Permalink
fix(tutorial): Remove gatsby-plugin-offline from the tutorial (#30579)
Browse files Browse the repository at this point in the history
Encouraging people to use service workers in Gatsby sites has caused more trouble than it's helped. We've removed/disabled it elsewhere but hadn't updated the tutorial as it turns out.
  • Loading branch information
KyleAMathews authored Mar 30, 2021
1 parent 5079b91 commit f628c38
Showing 1 changed file with 0 additions and 44 deletions.
44 changes: 0 additions & 44 deletions docs/docs/tutorial/part-eight/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,49 +113,6 @@ npm install gatsby-plugin-manifest

That's all you need to get started with adding a web manifest to a Gatsby site. The example given reflects a base configuration -- Check out the [plugin reference](/plugins/gatsby-plugin-manifest/?=gatsby-plugin-manifest#automatic-mode) for more options.

## Add offline support

Another requirement for a website to qualify as a PWA is the use of a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API). A service worker runs in the background, deciding to serve network or cached content based on connectivity, allowing for a seamless, managed offline experience.

[Gatsby's offline plugin](/plugins/gatsby-plugin-offline/) makes a Gatsby site work offline and more resistant to bad network conditions by creating a service worker for your site.

### ✋ Using `gatsby-plugin-offline`

1. Install the plugin:

```shell
npm install gatsby-plugin-offline
```

2. Add the plugin to the `plugins` array in your `gatsby-config.js` file.

```javascript:title=gatsby-config.js
{
plugins: [
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `GatsbyJS`,
short_name: `GatsbyJS`,
start_url: `/`,
background_color: `#6b37bf`,
theme_color: `#6b37bf`,
// Enables "Add to Homescreen" prompt and disables browser UI (including back button)
// see https://developers.google.com/web/fundamentals/web-app-manifest/#display
display: `standalone`,
icon: `src/images/icon.png`, // This path is relative to the root of the site.
},
},
// highlight-next-line
`gatsby-plugin-offline`,
]
}
```

That's all you need to get started with service workers with Gatsby.

> 💡 The offline plugin should be listed _after_ the manifest plugin so that the offline plugin can cache the created `manifest.webmanifest`.
## Add page metadata

Adding metadata to pages (such as a title or description) is key in helping search engines like Google understand your content and decide when to surface it in search results.
Expand Down Expand Up @@ -198,7 +155,6 @@ module.exports = {
icon: `src/images/icon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-offline`,
// highlight-next-line
`gatsby-plugin-react-helmet`,
],
Expand Down

0 comments on commit f628c38

Please sign in to comment.