如何将Gatsby网站转换为渐进式网络应用程序

后端之巅
343 阅读17分钟

作者选择了互联网档案馆，作为Write for DOnations计划的一部分接受捐赠。

简介

Gatsby是一个流行的框架，用于将源材料转化为静态HTML文件，并准备好即时部署。正因为如此，它通常被称为静态_网站生成器_（SSG）。作为一个SSG，它已经对用户体验（UX）产生了积极的影响，将多个内容源转化为一个优化的网站，但还有另一层可用于改善用户体验。_渐进式网络应用程序_功能。

A 渐进式网络应用程序 PWA，或称_PWA_，是一种超越了通常的网络功能限制的网站类型，使用较新的技术在你的浏览器和你的操作系统之间架起桥梁。PWA包含了很多不同的功能，如离线浏览、安装支持和较新的网络API。通过结合这些功能，PWA为你的用户提供了更好的整体浏览体验，以及像其他应用程序一样使用你的网站的选择，并配有自己的图标和应用程序窗口。

尽管制作一个最佳的PWA有很多事情要做，但Gatsby提供了工具和支持来简化这一过程，例如清单文件插件（gatsby-plugin-manifest ）和离线插件（gatsby-plugin-offline ）。本教程将指导你使用这些插件，以及Lighthouse等审计工具，最后你将学会如何把Gatsby网站变成一个功能齐全的渐进式Web应用。

前提条件

在开始之前，你将需要以下几样东西。

  • 一个本地安装的Node.js，用于运行Gatsby和构建你的网站。安装程序因操作系统而异，但DigitalOcean有Ubuntu 20.04和macOS的指南，而且你总能在NodeJS官方下载页面找到最新版本。
  • 对JavaScript有一定的熟悉，以便在Gatsby中工作。JavaScript语言是一个广泛的话题，但一个好的起点是我们的《如何在JavaScript中编码》系列。
  • 一个现有的Gatsby项目，还没有PWA支持，但在其他方面是可行的。为了满足这一要求并从头开始建立一个新的Gatsby项目，你可以参考《如何建立你的第一个Gatsby网站》教程的第1步。
  • (可选）为你的网站提供一个图标文件。为了能够安装，你的PWA将需要一个原始分辨率至少为512 x 512 像素的图标。如果你心中没有一个图标，本教程将指导你在步骤2中下载一个样本图标。

本教程在Node v14.17.2、npm v6.14.13、Gatsby v3.9.0、gatsby-plugin-offline v4.8.0和gatsby-plugin-manifest v3.8.0上测试。

第1步 - 准备你的内容（可选

作为先决条件，你已经创建了一个可以建立和部署的功能性Gatsby网站。然而，你可能还没有为你的网站准备任何内容。在这一步，你将准备一个智能家居用户指南的样本网站，以展示什么样的内容能从PWA功能中受益。

由于智能家居用户指南有可能被同一个用户多次访问，它是一个展示PWA主要功能的好例子。PWA的类似于应用程序的特性，如安装支持和主屏幕图标，使其在移动和桌面设备上都可以访问，而且由于有离线支持，即使你的家庭网络出现故障，你或其他居民仍然可以访问指南。

在启动模板的基础上，你可以在src/pages ，为智能家居指南添加一个新页面。创建一个名为src/pages/internet-issues.js 的文件，并添加以下示例页面代码。

src/pages/internet-issues.js

import * as React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = () => (
  <Layout>
    <Seo title="Internet Issues" />
    <h1>Internet Issues - Troubleshooting</h1>
    <p>Having issues connecting to the internet? Here are some things to try in our house.</p>
    <ul>
      <li>Your Device
        <ul>
          <li>Is airplane mode on? Is WiFi enabled?</li>
          <li>Is the device within range of the router or physically connected to the network via ethernet?</li>
          <li>Are you connected to the correct network?</li>
        </ul>
      </li>

      <br />

      <li>The Router / Modem
        <ul>
          <li>Have you checked the ISPs status page to check for an outage? You can use your smartphone and mobile data to check this.</li>
          <li>Have you tried rebooting the router and/or modem?</li>
          <li>Have you checked to make sure that all physical connections to and from the router and modem are secure?</li>
        </ul>
      </li>
    </ul>

    <br/>

    <p>
      <Link to="/">Back to homepage</Link> <br />
    </p>
  </Layout>
)

export default IndexPage

在这个页面代码中，你向你的房客或客人提供了故障排除说明，以便他们在连接互联网时遇到麻烦。你用一个列举式的列表完成了这一工作，提供了一个回到主页的链接，以方便导航。由于这是一个Gatsby项目，你已经将整个页面创建为一个React组件，它将把你的列表嵌套在一个可重用的Layout 组件内，并将页面作为JS2返回，以便Gatsby可以处理它。为了优化导航体验，你还使用了一个Link 组件来链接到主页，而不是一个普通的HTMLa 标签。

确保更新后保存文件，你可以继续并关闭它，因为在本教程中你不需要再次更新它。

这个页面将可以在 your_domain/internet-issues/，但你也将从你的主页上添加一个链接，以使它更容易被访问。

打开src/pages/index.js ，在React组件IndexPage ，添加一个指向新页面的直接链接，如以下高亮代码所示。

src/pages/index.js

import * as React from "react"
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = () => (
  <Layout>
    ...

    <p>
      <Link to="/internet-issues/">Internet Issues Troubleshooting Page</Link> <br />
      <Link to="/page-2/">Go to page 2</Link> <br />
      ...
    </p>
  </Layout>
)

保存并关闭添加了链接的index.js 。

现在你已经为你的智能家居用户指南建立了一个全新的页面，并添加了一个链接，可以从你的主页上进入该页面。在下一步，你将添加一个被称为_清单_文件的特殊文件，它指示网络浏览器关于你的PWA设置的具体内容。

第2步--添加manifest文件

下一步是满足PWA的核心要求之一，添加一个 宣言的JSON文件,manifest.json 。该清单文件告诉网络浏览器关于你的网站的细节，以及如果它被安装在用户的操作系统上，如何向用户显示它，指定细节，如使用什么图标和如何启动它。你将使用 gatsby-plugin-manifest来生成这个文件，在你的Gatsby配置文件中初始化该插件。

首先，通过在你的Gatsby项目目录中运行以下命令来安装Gatsby插件。

npm install gatsby-plugin-manifest

接下来，你将向该插件提供一些细节，告诉它你希望PWA如何出现和行动。你可以通过编辑主要的Gatsby配置文件来做到这一点，该文件位于你项目目录的根部，gatsby-config.js 。打开这个文件并添加以下代码。

gatsby-config.js

module.exports = {
  plugins: [
    ...

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `My Smart-Home Guide`,
        short_name: `SH Guide`,
        description: `Guide for residents of the ABC123 Smart Home`,
        start_url: `/`,
        background_color: `#0a68f0`,
        theme_color: `#0a68f0`,
        display: `standalone`,
        icon: `src/images/pwa-icon.png`,
        icons: [
          {
            src: `/favicons/pwa-icon-192x192.png`,
            sizes: `192x192`,
            type: `image/png`
          },
          {
            src: `/favicons/pwa-icon-512x512.png`,
            sizes: `512x512`,
            type: `image/png`
          }
        ]
      },
    }

    ...
  ]
}

**注意：**如果你已经开始使用gatsby-starter-default 模板，你将在你的配置文件中已经有一些这个插件的值。在这种情况下，用这段代码覆盖现有的值。

这个文件里有很多值，所以这里有一个快速的解释。

  • name 和short_name 应该对应于你的网站名称和你希望网站在安装时如何出现在用户面前。short_name 出现在用户设备的主屏幕上，或其他空间有限的地方，name 出现在其他地方。
  • description 应该是描述你的应用程序的目的的文字。
  • start_url 是用来建议浏览器在用户从他们的启动器启动PWA时应该打开哪个页面。这里使用的/ ，告诉浏览器你希望用户在打开PWA时登陆到你的主页。
  • background_color 和theme_color 都是向浏览器发出的关于PWA样式的指令，其值应与CSS颜色字符串相对应。background_color 只在等待实际样式表加载时使用，作为一个占位背景色，而theme_color 可能在PWA之外的多个地方使用，例如在Android主屏幕的图标周围。
  • display 是一个特殊的值，因为它决定了你的整个网站如何作为一个PWA，而且，与其他支持数百种不同组合的字段不同，它可以是四个可能的值之一：fullscreen,standalone,minimal-ui, 或browser 。在你的配置中，standalone 的值使PWA像一个独立的应用程序一样在标准的网络浏览器之外行事。在实践中，这意味着它的行为类似于一个本地应用程序--它有自己的启动器图标、应用程序窗口，而且URL地址栏被隐藏。
  • icon 不是标准的清单字段之一，而是gatsby-plugin-manifest 范围内的一个特殊字段。通过使用此属性，并提供符合最低要求（至少512x512 像素，正方形）的文件路径，盖茨比插件将自动把图片转化为网站favicon，并作为必要的icons 舱单属性注入舱单中。通过用文件名、尺寸和图像类型的数组指定icons ，您将调用 混合模式配置的manifest插件。这将获取您的单一源图标文件，并将其转换为指定的文件名和尺寸。这不是严格意义上的需要，但它避免了在Apache等环境中部署可能出现的问题，因为Apache不使用默认的/icons 目录。

请确保保存您所修改的配置文件，但为下一步保持开放，您将在这里添加另一个Gatsby插件并配置离线支持。

在清单值中，用于icon 的路径是src/images/pwa-icon.png ，但你仍然需要在该位置放置一个图像文件，然后才可以工作。如果你有一个至少为512 x 512 像素的方形图像文件，你可以将其复制到该路径。否则，你可以使用为本教程选择的一个预先格式化的图像文件。要使用教程的图标文件，可以下载本教程的样本图标文件并保存在src/images/pwa-icon.png ，或者如果你喜欢命令行，从你的项目根目录使用cURL。

curl -o ./src/images/pwa-icon.png https://assets.digitalocean.com/articles/67869/1.png

这将把图像下载到你的Gatsby应用程序的正确部分。这是你唯一需要的图像文件；Gatsby会自动生成192x192 版本。

你现在已经配置了你的Gatsby项目，以提供一个具有正确值的清单JSON文件，这是启用PWA功能的一个必要部分。在下一步中，您将通过服务工作者插件gatsby-plugin-offline ，添加该功能，以满足PWA的另一个要求，即离线支持。

第3步 - 使用服务工作者添加离线支持

PWA的另一个关键组成部分是离线支持，你将用一种被称为服务工作者的网络技术来实现它。_服务工作者_本质上是一捆JavaScript代码，它与你所在页面的用户界面相关的所有代码分开运行。这种孤立的代码也被授予特殊的权限，例如改变网络请求行为的能力，这对于实现离线支持至关重要。在这个步骤中，你将通过 gatsby-plugin-offline插件，通过你的Gatsby配置文件进行配置。

首先安装gatsby-plugin-offline 包并将其添加到你的依赖项中。你可以这样做。

npm install gatsby-plugin-offline

接下来，通过Gatsby配置加载该插件，也就是在上一步编辑的gatsby-config.js 。

gatsby-config.js

module.exports = {
  plugins: [
    ...

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        ...
      },
    },
    `gatsby-plugin-offline`,

    ...
  ]
}

确保在添加新的插件后保存该配置文件。

警告。 gatsby-plugin-manifest和gatsby-plugin-offline的 文档都规定，在配置数组中，gatsby-plugin-offline 应始终排在gatsby-plugin-manifest 之后，如本代码片断所示。这样可以确保清单文件本身可以被缓存。

至此，您已经添加了离线支持，并为您的应用创建了清单文件。接下来，本教程将解释PWA的第三个必要部分：拥有一个安全上下文。

第4步--提供一个安全上下文

任何PWA的三个基本最低要求中的最后一个是它要在一个安全上下文中运行。_安全上下文_指的是一个网络环境，在这个环境中，认证和安全方面的某些基准标准得到了满足，而且最常见的是指通过HTTPS提供的内容。

安全上下文可以通过许多方式实现。正因为如此，本教程将描述一些不同的策略来获得安全环境，然后继续在本地测试你的Gatsby网站。

如果你通过静态主机部署你的Gatsby项目，如DigitalOcean的应用程序平台，那么很可能HTTPS是支持开箱即用的，不需要设置。有关在App Platform上部署应用程序的更多信息，请查看如何将Gatsby应用程序部署到DigitalOcean App Platform教程。

如果你在一个不自动提供HTTPS的服务器上部署，但你有SSH访问权，你可以使用Let's Encrypt来获取和安装一个免费的TLS/SSL证书。例如，如果你在Ubuntu 20.04上使用Apache，你可以按照《如何在Ubuntu 20.04上用Let's Encrypt保护Apache》来使用Certbot来处理这个过程。如果你要部署到共享主机上，你需要查看他们的具体文档页面，了解是否可以安装SSL证书，以及如何安装。

对于本地测试，你不需要处理获得或安装SSL证书的问题。这是因为大多数现代浏览器将localhost ，即使没有安装TLS/SSL证书或HTTPS协议，也会将网站视为一个安全环境。

你现在已经成功地将PWA支持添加到你的Gatsby项目中，满足了三个基线标准。HTTPS（或一个localhost 安全上下文），一个清单文件和一个服务工作者。下一步是测试和验证它是否正确显示，并启用PWA功能。

第5步 - 运行本地测试

在这一步，你将运行一些本地测试，以确保你的PWA功能正常工作。这是在使用Lighthouse工具进行更全面的审计之前的一个初步测试步骤。

要在本地测试你的Gatsby网站作为PWA的功能，先构建它，然后为生成的构建目录提供服务。

npm run build
npm run serve

一旦准备就绪，你会看到以下情况。

OutputYou can now view gatsby-starter-default in the browser.
⠀
  http://localhost:9000/

你现在可以在你的网络浏览器中访问该URL，如果浏览器支持PWA，你会遇到一些特殊的附加UI元素。例如，在Chrome桌面上，在地址栏中会有一个新的按钮暴露出来，点击后会询问你是否愿意将Gatsby网站安装成一个应用程序，如下图所示。

Screenshot showing a popup menu, originating from the Chrome desktop address bar, asking if you would like to "Install app" for the Gatsby site ("My Smart-Home Guide") running on localhost

如果你想在智能手机上对你的网站进行本地测试，这可以通过Chrome的远程调试工具（仅适用于安卓系统）或ngrok等localhost 隧道服务实现。在手机上，你会遇到同样的选项，将你的网站安装成一个应用程序，如下图所示。

Screenshot from an Android device, showing a "Install app" modal popup in the Chrome browser, for "My Smart-Home Guide", through localhost remote debugging

这个PWA提示对于每个设备、操作系统和浏览器都是不同的。此外，某些功能，如添加到主屏幕可能只在某些设备上可用。在特定设备上运行的某些浏览器可能不完全支持PWA；请查看 caniuse.com了解更多关于平台支持的信息。

你现在已经验证了你的Gatsby项目可以在本地构建和提供服务，你的浏览器成功检测到它提供PWA功能。下一步将是对你所做的工作进行最后检查，并使用Lighthouse工具来检查是否有需要改进的地方。

第6步--使用Lighthouse进行审计

在这一点上，你有一个符合PWA所有核心要求的Gatsby网站：它有HTTPS、清单和一个用于离线支持的服务工作者。然而，PWA的概念超越了任何单一的要求--它包含了所有的方面一起工作，并遵守一般的准则。考虑到这一点，你的最后一步是使用一个审计工具来验证你是否符合基线标准，以及收集关于你如何进一步优化你的Gatsby项目以满足PWA最佳实践的信息。

有几种不同的方法来审核你的网站作为PWA，但目前的黄金标准是Lighthouse工具。如果你安装了桌面Chrome浏览器，你可以直接在网页浏览器DevTools中对你的网站进行审计。

首先，在Chrome浏览器中导航到你的Gatsby网站，然后在网页的任何地方点击右键，在右键菜单中选择 "检查"，打开Chrome DevTools。接下来，点击DevTools下的Lighthouse标签。如果你没有看到它，请点击最右边的标签旁边的**>>**标签，以显示由于尺寸限制而隐藏的标签。

现在，要实际运行报告，请取消Lighthouse标签上除Progressive Web App以外的所有选项，然后点击Generate Report，分析你的网站。

Screenshot showing the Lighthouse tab in desktop Chrome DevTools, with only the Progressive Web App report category checked

你也可以通过Lighthouse Node.js CLI以编程方式生成该报告。该命令将运行仅针对PWA的审计，然后打开报告供查看。

npx lighthouse http://localhost:9000 --only-categories=pwa --view

然而，通过CLI使用Lighthouse并不能绕过安装Chrome浏览器的需要，这只是让这个过程更容易实现自动化。

Lighthouse生成的报告会告诉你一些事情，并分成若干类别。其中最重要的几项是

  • 可安装。这是最重要的类别，它涉及你的网站是否符合可安装PWA的三个基本标准--HTTPS、清单文件和服务工作者。
  • PWA优化。这些是你为获得最佳PWA用户体验应该做的事情，但并不是严格要求你的PWA能够发挥作用。可以把这些看作是最佳实践的建议。其中的一些例子是创建一个自定义的闪屏，在移动应用加载时显示，为地址栏设置一个主题颜色，并在JavaScript不可用时提供后备内容。如果你想看完整的清单，请查看Lighthouse的官方文档。

通过使用Lighthouse工具来审核你的Gatsby PWA，你现在不仅有了一个功能性的PWA，而且对它如何满足PWA的要求和最佳实践有了一个概念。

总结

按照这些步骤，你现在有了一个Gatsby网站，它也可以作为一个现代可安装的渐进式网络应用程序运作，并有强大的离线支持。你现在为你的用户提供了两个世界中最好的东西：他们可以像普通的网页一样浏览你的网站，但他们也可以像使用本地应用程序一样使用它，有自己的启动器图标、显示窗口，以及他们期望从本地应用程序获得的可靠性能。

如果你正在寻找更多的方法来提供最优化的PWA体验，除了Lighthouse PWA审计之外，谷歌还发布了一份PWA检查表，会对你有所帮助。如果你想阅读更多关于Gatsby的内容，请查看《如何用Gatsby.js创建静态网站》系列的其他内容。

avatar
文章
阅读
粉丝