渐进式Web应用(PWAS)让开发者可以为用户提供类似APP的体验。再加上Gatsby.js的一流表现，你就会得到一个速度惊人的网站。
本指南中的步骤假定您有一个正在运行的Gatsby项目。因此，如果您还没有，您可以通过阅读Gatsby First Steps]文章来开始了解Gatsby。您将直接进入站点配置。
Web应用清单
Web应用程序清单是一个简短的JSON文件，其中包含有关您的Web应用程序的元数据。它为浏览器提供了一些在安装到用户设备上时如何操作的说明。
向Gatsby添加 web应用manifest 可以通过安装gatsby-plugin-manifest完成：
1$ npm install --save gatsby-plugin-manifest
然后，我们可以将插件添加到Gatsby配置中：
1[label gatsby-config.js]
2module.exports = {
3 ...
4 plugins: [
5 {
6 resolve: `gatsby-plugin-manifest`,
7 options: {
8 name: `Alligator.io`,
9 short_name: `Alligator`,
10 start_url: `/`,
11 background_color: `#FFF`,
12 theme_color: `#FAE042`,
13 display: `standalone`,
14 },
15 },
16 ],
17}
现在让我们来看看配置我们的 Web应用清单 的一些选项。
图标
我们可以为浏览器定义一组图标，以便在应用程序保存到用户的主屏幕时使用。我们有三种选择。
1.自动
有两个自动选项可用。对于第一个，我们需要提供具有最大图标大小的Gatsby.js，并满足以下先决条件：
- 尺寸至少为512x512。
- 平方。如果它不是透明的，将自动添加条以使其透明。
- 以下格式之一：JPEG、PNG、WebP、TIFF、GIF或SVG。
然后，我们将以下行添加到插件的选项中：
1[label gatsby-config.js]
2icon: `src/images/icon.png`,
Gatsby将从提供的源中生成一组预先配置的图标。
2.混合
混合选项为我们提供了更多关于自动生成图标的灵活性。对于源文件，我们遵循与以前相同的先决条件。并将以下内容添加到插件选项中：
1[label gatsby-config.js]
2icon: `src/images/icon.png`,
3icons: [
4 {
5 src: `/favicons/android-chrome-192x192.png`,
6 sizes: `192x192`,
7 type: `image/png`,
8 },
9 {
10 src: `/favicons/android-chrome-512x512.png`,
11 sizes: `512x512`,
12 type: `image/png`,
13 },
14],
在这里，我们可以提供所需图标大小的`icons‘数组配置。
3.手册
在手动模式下，我们负责在static文件夹中提供所需的图标，以及定义整个Web应用程序清单 。
我们在插件的选项中指定图标大小，但省略了icon设置。
1[label gatsby-config.js]
2icons: [
3 {
4 src: `/favicons/android-chrome-192x192.png`,
5 sizes: `192x192`,
6 type: `image/png`,
7 },
8 {
9 src: `/favicons/android-chrome-512x512.png`,
10 sizes: `512x512`,
11 type: `image/png`,
12 },
13],
还有一些选项可以覆盖默认值，例如本地化和数据获取，您可以在npm网站上的包页面中找到。我还建议您访问Web App Manifest fundamentals以进一步了解每个选项的功能。
服务工作者
现在我们已经准备好Web应用程序清单 ，让我们来看看如何为我们的站点生成服务Worker。首先，让我们安装gatsby-plugin-offline：
1$ npm install --save gatsby-plugin-offline
然后，我们可以将以下内容添加到Gatsby配置中：
1[label gatsby-config.js]
2plugins: [`gatsby-plugin-offline`]
<$>[warning]重要提示：要缓存 Web应用manifest ，我们需要在** gatsby-plugin-offline之前列出gatsby-plugin-manifest ** 。<$>
该插件利用谷歌的Workbox库为我们创建了一个服务工作者 。我们获得自动** 文件缓存** ，使页面在用户第一次访问后可以离线访问。
如果您的站点存在需要服务工作人员 提供额外服务的特定需求，您可以使用optionsconfig](https://developers.google.com/web/tools/workbox/modules/workbox-build).覆盖[默认工作箱但是，请记住，更改默认设置可能会中断离线支持。请务必阅读链接的资源以了解更多信息。
移除服务工作者
如果您发现需要关闭离线功能，可以使用gatsby-plugin-remove-serviceworker.移除服务工作者
为此，您需要先安装移除插件，然后卸载gatsby-plugin-offline：
1$ npm install gatsby-plugin-remove-serviceworker
2$ npm uninstall gatsby-plugin-offline
然后，您可以更新Gatsby配置：
1[label gatsby-config.js]
2 plugins: [
3- `gatsby-plugin-offline`,
4+ `gatsby-plugin-remove-serviceworker`,
5 ]
这将确保服务工作者 正确取消注册。
结论
向Gatsby添加离线支持开辟了许多可能性。比如离线浏览、缓存资源以加快加载速度，以及将网站保存到移动主屏幕以便于访问。您可以使用这些插件做很多事情，我强烈建议您阅读整篇文章中链接的参考资料。