You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
fix(tutorial): Remove gatsby-plugin-offline from the tutorial (#30579)
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.
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.
115
115
116
-
## Add offline support
117
-
118
-
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.
119
-
120
-
[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.
121
-
122
-
### ✋ Using `gatsby-plugin-offline`
123
-
124
-
1. Install the plugin:
125
-
126
-
```shell
127
-
npm install gatsby-plugin-offline
128
-
```
129
-
130
-
2. Add the plugin to the `plugins` array in your `gatsby-config.js` file.
131
-
132
-
```javascript:title=gatsby-config.js
133
-
{
134
-
plugins: [
135
-
{
136
-
resolve:`gatsby-plugin-manifest`,
137
-
options: {
138
-
name:`GatsbyJS`,
139
-
short_name:`GatsbyJS`,
140
-
start_url:`/`,
141
-
background_color:`#6b37bf`,
142
-
theme_color:`#6b37bf`,
143
-
// Enables "Add to Homescreen" prompt and disables browser UI (including back button)
144
-
// see https://developers.google.com/web/fundamentals/web-app-manifest/#display
145
-
display:`standalone`,
146
-
icon:`src/images/icon.png`, // This path is relative to the root of the site.
147
-
},
148
-
},
149
-
// highlight-next-line
150
-
`gatsby-plugin-offline`,
151
-
]
152
-
}
153
-
```
154
-
155
-
That's all you need to get started with service workers with Gatsby.
156
-
157
-
> 💡 The offline plugin should be listed _after_ the manifest plugin so that the offline plugin can cache the created `manifest.webmanifest`.
158
-
159
116
## Add page metadata
160
117
161
118
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.
@@ -198,7 +155,6 @@ module.exports = {
198
155
icon:`src/images/icon.png`, // This path is relative to the root of the site.
0 commit comments