gatsby_使Gatsby成为PWA：服务工作者和Web应用程序清单

- 日理万妓 2022-11-27 04:29 165阅读 0赞

gatsby

[Progressive Web Apps][] (PWAs) allow developers to deliver an app-like experience to the user. Paired with the top-notch performance of Gatsby.js, and you get a blazing fast website.

[渐进式Web应用程序][Progressive Web Apps] (PWA)允许开发人员向用户提供类似应用程序的体验。 加上Gatsby.js的一流性能，您将获得一个快速的网站。

The steps in this guide assume you have a working Gatsby project. So if you haven’t already, you can get started with Gatsby by following along the [Gatsby First Steps][] article. You’ll be diving right into the site configuration.

本指南中的步骤假定您有一个正常的Gatsby项目。 因此，如果您还没有开始，请按照《 [盖茨比第一步》一][Gatsby First Steps]文开始使用盖茨[比][Gatsby First Steps] 。 您将直接进入站点配置。

## Web应用清单 **(**The Web App Manifest**)** ##

The Web App Manifest is a brief JSON file with metadata about your web app. It provides some instructions for the browser on how to behave when installed on the user’s device.

Web App Manifest是一个简短的JSON文件，其中包含有关Web应用程序的元数据。 它为浏览器提供了一些有关在用户设备上安装后的行为的说明。

Adding a **web app manifest** to Gatsby can be done by installing the [gatsby-plugin-manifest][]:

可以通过安装[gatsby-plugin-manifest][]将**网络应用清单**添加到Gatsby中：

$ npm install --save gatsby-plugin-manifest

Then, we can add the plugin to our Gatsby configuration:

然后，我们可以将插件添加到我们的Gatsby配置中：

gatsby-config.js

module.exports = {
      ...
      plugins: [
        {
          resolve: `gatsby-plugin-manifest`,
          options: {
            name: `Alligator.io`,
            short_name: `Alligator`,
            start_url: `/`,
            background_color: `#FFF`,
            theme_color: `#FAE042`,
            display: `standalone`,
          },
        },
      ],
    }

Now let’s take a look at some of the options to configure our **web app manifest**.

现在，让我们来看一些配置**Web应用清单**的选项。

### 图示 **(**Icons**)** ###

We can define a set of icons for the browser to use when the app is saved to the user’s home screen. There are three options available for us to do so.

我们可以定义一组图标，供浏览器在将应用保存到用户主屏幕时使用。 我们有三种选择。

#### 1.自动 **(**1. Automatic**)** ####

There are two automatic options available. With the first, we need to provide Gatsby.js with the largest icon size with the following prerequisites:

有两个自动选项。 首先，我们需要为Gatsby.js提供最大的图标大小，并具有以下先决条件：

*  At least 512x512 in size.
    
    大小至少为512x512。
 *  Squared. If it’s not transparent, bars will be automatically added to make it so.
    
    平方。 如果它不是透明的，则会自动添加条形图。
 *  One of the following formats: JPEG, PNG, WebP, TIFF, GIF or SVG.
    
    以下格式之一：JPEG，PNG，WebP，TIFF，GIF或SVG。

We then add the following line to the plugin’s options:

然后，将以下行添加到插件的选项中：

gatsby-config.js

icon: `src/images/icon.png`,

Gatsby will generate a pre-configured set of icons from the provided source.

Gatsby将从提供的源中生成一组预配置的图标。

#### 2.混合动力 **(**2. Hybrid**)** ####

The hybrid option gives us a bit more flexibility over which icons are automatically generated. We follow the same prerequisite as before for the source file. And add the following to the plugin options:

混合选项使我们可以更灵活地自动生成图标。 对于源文件，我们遵循与之前相同的先决条件。 并将以下内容添加到插件选项中：

gatsby-config.js

icon: `src/images/icon.png`, 
    icons: [
      {
        src: `/favicons/android-chrome-192x192.png`,
        sizes: `192x192`,
        type: `image/png`,
      },
      {
        src: `/favicons/android-chrome-512x512.png`,
        sizes: `512x512`,
        type: `image/png`,
      },
    ],

Here, we can provide the `icons` array configurations for the desired icon sizes.

在这里，我们可以提供所需图标大小的`icons`数组配置。

#### 3.手册 **(**3. Manual**)** ####

With the manual mode, we’re responsible for providing the desired icons in the [static][] folder, as well as defining the entire **web app manifest**.

在手动模式下，我们负责在[静态][static]文件夹中提供所需的图标，并定义整个**Web应用清单** 。

We specify the icon sizes in the plugin’s options, while omitting the `icon` setting.

我们在插件的选项中指定了图标大小，同时省略了`icon`设置。

gatsby-config.js

icons: [
      {
        src: `/favicons/android-chrome-192x192.png`,
        sizes: `192x192`,
        type: `image/png`,
      },
      {
        src: `/favicons/android-chrome-512x512.png`,
        sizes: `512x512`,
        type: `image/png`,
      },
    ],

There are a few more options available to override the defaults, such as localization and data fetching, which you can find in on [package’s page on the npm website][package_s page on the npm website]. I’d also recommend visiting the [Web App Manifest fundamentals][] for further insight into what each option can do.

还有其他一些选项可以覆盖默认设置，例如本地化和数据获取，您可以在[npm网站的软件包页面上找到它们][package_s page on the npm website] 。 我还建议您访问[Web App Manifest基础知识，][Web App Manifest fundamentals]以进一步了解每个选项可以做什么。

## 服务人员 **(**The Service Worker**)** ##

Now that we have our **web app manifest** ready to go, let’s take a look at how we can generate a [Service Worker][] for our site. To get started, let’s install the [gatsby-plugin-offline][]:

现在我们已经准备好要**发布的Web应用程序清单** ，下面让我们看一下如何为网站生成[Service Worker][] 。 首先，让我们安装[gatsby-plugin-offline][] ：

$ npm install --save gatsby-plugin-offline

Then, we can add the following to our Gatsby configuration:

然后，我们可以将以下内容添加到我们的Gatsby配置中：

gatsby-config.js

plugins: [`gatsby-plugin-offline`]

Important: For the **web app manifest** to be cached, we’ll need to list `gatsby-plugin-manifest` **BEFORE** `gatsby-plugin-offline`.

重要提示：要缓存**Web应用清单** ，我们需要**在** `gatsby-plugin-offline` **之前**列出`gatsby-plugin-manifest` 。

The plugin creates a **service worker** for us by leveraging Google’s [Workbox][] library. We get automatic **file caching**, enabling pages to be available offline after the user’s first visit.

该插件利用Google的[Workbox][]库为我们创建了一个**服务人员** 。 我们获得了自动**文件缓存功能** ，使页面在用户首次访问后即可脱机使用。

If there is a specific need to your site that requires a little extra from the **service worker**, you can override the [default options][] with a [workbox config][]. However, keep in mind that changes to the defaults could break offline support. Be sure to go over the linked resources for further information.

如果您的站点有特殊需要，而**服务工作者**需要一些额外的帮助，则可以**使用工作** [箱配置][workbox config]覆盖[默认选项][default options] 。 但是，请记住，更改默认值可能会中断离线支持。 确保查看链接的资源以获取更多信息。

### 卸下服务人员 **(**Removing the Service Worker**)** ###

If you find that offline functionality needs to be turned off, you can remove the **service worker** by utilizing the [gatsby-plugin-remove-serviceworker][].

如果发现需要关闭脱机功能，则可以通过使用[gatsby-plugin-remove-serviceworker][]来删除**服务工作器** 。

To do so, you’ll need to first install the removal plugin and uninstall `gatsby-plugin-offline`:

为此，您需要先安装删除插件并卸载`gatsby-plugin-offline` ：

$ npm install gatsby-plugin-remove-serviceworker
    $ npm uninstall gatsby-plugin-offline

Then, you can update the Gatsby config:

然后，您可以更新Gatsby配置：

gatsby-config.js

plugins: [
    -  `gatsby-plugin-offline`,
    +  `gatsby-plugin-remove-serviceworker`,
     ]

This will ensure the **service worker** is properly unregistered.

这将确保**服务工作者**已正确注销。

## 结论 **(**Conclusion**)** ##

Adding offline support to Gatsby opens up a lot of possibilities. Things like offline browsing, cached assets for faster load times, and saving websites to mobile home screens for easier reach. There’s a lot more you can do with these plugins and I highly encourage you to read the resources linked throughout the article.

为Gatsby添加离线支持会带来很多可能性。 诸如脱机浏览，缓存资产以加快加载时间，以及将网站保存到移动主屏幕以便更轻松地访问等内容。 您可以使用这些插件做更多的事情，我强烈建议您阅读本文中链接的资源。

> 翻译自: [https://www.digitalocean.com/community/tutorials/gatsbyjs-gatsby-pwa][https_www.digitalocean.com_community_tutorials_gatsbyjs-gatsby-pwa]

gatsby

[Progressive Web Apps]: https://www.digitalocean.com/js/intro-progressive-web-apps/
[Gatsby First Steps]: https://www.digitalocean.com/community/tutorials/gatsbyjs-gatsby-first-steps
[gatsby-plugin-manifest]: https://www.npmjs.com/package/gatsby-plugin-manifest
[static]: https://www.gatsbyjs.org/docs/static-folder/
[package_s page on the npm website]: https://www.npmjs.com/package/gatsby-plugin-manifest#user-content-feature-configuration---optional
[Web App Manifest fundamentals]: https://developers.google.com/web/fundamentals/web-app-manifest/
[Service Worker]: https://www.digitalocean.com/community/tutorials/js-service-workers
[gatsby-plugin-offline]: https://www.npmjs.com/package/gatsby-plugin-offline
[Workbox]: https://developers.google.com/web/tools/workbox/
[default options]: https://www.npmjs.com/package/gatsby-plugin-offline#overridding-options
[workbox config]: https://developers.google.com/web/tools/workbox/modules/workbox-build
[gatsby-plugin-remove-serviceworker]: https://www.npmjs.com/package/gatsby-plugin-remove-serviceworker
[https_www.digitalocean.com_community_tutorials_gatsbyjs-gatsby-pwa]: https://www.digitalocean.com/community/tutorials/gatsbyjs-gatsby-pwa