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

_作者选择了 Internet Archive以作为 Write for Donations计划的一部分接收捐款。

介绍

Gatsby是一个流行的框架,用于将源材料转化为静态的HTML文件,这些文件可以立即部署,因此它通常被称为 Static Site Generator (SSG)。作为SSG,它已经对用户体验(UX)产生了积极的影响,通过将多个内容来源转化为优化的网站,但有另一个层可用于UX改进: _Progressive Web App_功能。

A [进步的Web App] (https://web.dev/what-are-pwas/),或"PWA_",是一类超越了通常的Web容量限制的网站,使用更新的技术来弥补您浏览器与操作系统之间的差距. PWA包含许多不同的功能,如离线浏览,安装支持,以及更新的网络API等. 通过这些功能的结合,PWAs为您的用户提供了更好的总体浏览体验,以及像其他应用程序一样使用您网站的选择,并完成自己的图标和应用窗口.

虽然有很多事情要做,使一个最佳的PWA,Gatsby提供工具和支持来简化这个过程,如一个明显的文件插件(‘gatsby-plugin-manifest’)和一个离线插件(‘gatsby-plugin-offline’)。

前提条件

在开始之前,这里有一些你需要的东西:

  • 当地安装Node.js,用于运行Gatsby并建设你的站点。 安装程序因操作系统而异,但DigitalOcean有Ubuntu 20.04和macOS的指南,在官方NodeJS下载页上总能找到最新的发布.
  • 一些熟悉的JavaScript,在加兹比工作. JavaScript语言是一个可扩展的话题,但好的起步点是我们[如何用JavaScript来编码 (https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript)系列.
  • 联合国 现有的Gatsby项目尚未获得PWA支持,但在其他方面是实用的. 为了满足这一要求并从零开始建设新的Gatsby项目,您可以参考 [如何设置您的第一个Gatsby网站] (https://andsky.com/tech/tutorials/how-to-set-up-your-first-gatsby-website) 教程中的 步骤1** . (备选) 您网站的图标文件 。 要安装, 您的 PWA 需要有一个至少为 512 x 512 像素的原始分辨率的图标 。 如果您没有图标, 此教程将指示您下载* Step 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的文件,并添加以下样本页面代码:

 1[label src/pages/internet-issues.js]
 2import * as React from "react"
 3import { Link } from "gatsby"
 4
 5import Layout from "../components/layout"
 6import Seo from "../components/seo"
 7
 8const IndexPage = () => (
 9  <Layout>
10    <Seo title="Internet Issues" />
11    <h1>Internet Issues - Troubleshooting</h1>
12    <p>Having issues connecting to the internet? Here are some things to try in our house.</p>
13    <ul>
14      <li>Your Device
15        <ul>
16          <li>Is airplane mode on? Is WiFi enabled?</li>
17          <li>Is the device within range of the router or physically connected to the network via ethernet?</li>
18          <li>Are you connected to the correct network?</li>
19        </ul>
20      </li>
21
22      <br />
23
24      <li>The Router / Modem
25        <ul>
26          <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>
27          <li>Have you tried rebooting the router and/or modem?</li>
28          <li>Have you checked to make sure that all physical connections to and from the router and modem are secure?</li>
29        </ul>
30      </li>
31    </ul>
32
33    <br/>
34
35    <p>
36      <Link to="/">Back to homepage</Link> <br />
37    </p>
38  </Layout>
39)
40
41export default IndexPage

在这个页面代码中,你向你的室友或客人 提供了排除故障的指示 当他们有 连接互联网的困难。 你用一个被子弹击中的列表这样做,提供了回回首页的链接,以方便导航. 由于这是一个Gatsby项目,所以您创建了整个页面作为反应组件,该页面将把您的列表嵌入可重复使用的"Layout"组件,并返回该页面作为JSX,因此Gatsby可以处理. 对于最优化的通航体验,您还使用了["Link"组件 (https://andsky.com/tech/tutorials/gatsbyjs-gatsby-link)回路与主页连接,而不是普通的HTML"a"标记.

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

此页面将可访问您的域名/互联网问题,但您还将从您的主页添加链接,以便更容易访问。

打开src/pages/index.js,并在React组件IndexPage中添加一个直接链接到新页面,如下所示:

 1[label src/pages/index.js]
 2import * as React from "react"
 3import { Link } from "gatsby"
 4import { StaticImage } from "gatsby-plugin-image"
 5
 6import Layout from "../components/layout"
 7import Seo from "../components/seo"
 8
 9const IndexPage = () => (
10  <Layout>
11    ...
12
13    <p>
14      <Link to="/internet-issues/">Internet Issues Troubleshooting Page</Link> <br />
15      <Link to="/page-2/">Go to page 2</Link> <br />
16      ...
17    </p>
18  </Layout>
19)

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

您现在已经为您的智能家居用户指南构建了一个全新的页面,并添加了一个链接,从您的主页获取它. 在下一步,您将添加一个称为 manifest 文件的特殊文件,该文件将指示 Web 浏览器关于您的 PWA 设置的具体信息。

步骤 2 — 添加明示文件

下一步是通过增加一个明显 JSON 文件,`明显.json',满足PWAS的核心要求之一。 显示文件向网页浏览器详细介绍您的网站,如果安装在用户的OS上,如何向用户显示,并具体说明使用何种图标和如何启动等细节. 您将通过初始化您的 Gatsby 配置文件中的插件来生成此文件 .

首先,通过在您的 Gatsby 项目目录中运行以下命令来安装 Gatsby 插件:

1npm install gatsby-plugin-manifest

接下来,您将为插件提供一些细节,告诉它您希望 PWA 如何出现和行动. 您可以通过编辑主要的 Gatsby config 文件,该文件生活在您的项目目录的根部, gatsby-config.js。

 1[label gatsby-config.js]
 2module.exports = {
 3  plugins: [
 4    ...
 5
 6    {
 7      resolve: `gatsby-plugin-manifest`,
 8      options: {
 9        name: `My Smart-Home Guide`,
10        short_name: `SH Guide`,
11        description: `Guide for residents of the ABC123 Smart Home`,
12        start_url: `/`,
13        background_color: `#0a68f0`,
14        theme_color: `#0a68f0`,
15        display: `standalone`,
16        icon: `src/images/pwa-icon.png`,
17        icons: [
18          {
19            src: `/favicons/pwa-icon-192x192.png`,
20            sizes: `192x192`,
21            type: `image/png`
22          },
23          {
24            src: `/favicons/pwa-icon-512x512.png`,
25            sizes: `512x512`,
26            type: `image/png`
27          }
28        ]
29      },
30    }
31
32    ...
33  ]
34}

<$>[注] 注: 如果您已经开始使用gatsby-starter-default模板,则您的 config 文件中已经包含了该插件的某些值。

这个文件中有很多值,所以这里有一个快速的解释:

  • " 名称 " 和 " 短名 " 应当与您网站的名称相匹配,以及您希望网站安装后在用户面前出现的方式。 短名'出现在用户设备的主屏幕或其他空间有限的地方,而名字'出现在其他任何地方。
  • `说明 ' 应为说明申请目的的案文。
  • " start_url " 用于向浏览器建议在用户从其发射装置发射PWA时打开哪一页。 此处使用的 " / " 值告诉浏览器,您希望用户在打开PWA时登陆您的主页。
  • 背景-color'和them-color'都是给浏览器的关于PWA样式的指示,数值应与CSS颜色字符串对应。 背景-color'只在等待实际样式表时作为占位背景颜色来加载,而主题-color'则可能用于PWA以外的多地,例如Android家用屏幕上围绕图标。
  • " 披露 " 是一个特殊值,因为它决定了你整个网站如何发挥PWA的作用,而且与支持数百种不同组合的其他领域不同(https://developer.mozilla.org/en-US/docs/Web/Manifest/display# values): " 全屏幕 " 、 " 独立 " 、 " 最小用户 " 或 " 浏览器 " 。 在你的配置中,"独立"的价值使得PWA在标准网络浏览器之外的行为像一个独立的应用程序. 在实际操作中,这意味着它的行为类似于一个本地应用程序——它得到了自己的启动器图标,应用程序窗口,URL地址栏被隐藏.
  • **icon'不是标准表列领域之一,而是gatsby-plugin-manifest'背景下的一个特殊领域。 Gatsby插件使用此属性,并提供符合最低要求(至少为512x512'像素,正方形)的文件的路径,将自动将图像转换为站点favicon,并注入清单,作为[所需的cons' 显示属性](https://developer.mozilla.org/en-US/docs/Web/Manifest/icons)。 通过指定带有文件名、大小和图像类型的 ) 。 这将您单个源图标文件转换为指定的文件名和大小 。 这严格来说并非必要,但它避免了部署[在Apache (https://github.com/gatsbyjs/gatsby/issues/12233 等环境中]可能出现的任何问题,因为部署与默认的"/icons"目录不相干. .

请确保保存配置文件与您的更改,但保持它打开的下一步,在那里你将添加另一个Gatsby插件和配置离线支持。

在显式值中,用于 " icon " 的路径是 " src/images/pwa-icon.png " ,但您仍然需要在该地放置一个图像文件才能工作。 如果您的正方形图像文件至少为 ) :

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

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

您现在已经配置了您的 Gatsby 项目,以便以正确的值服务一个显而易见的 JSON 文件,这是启用 PWA 功能所需的一部分。 在下一步中,您将通过通过服务工人插件添加该功能来解决另一个 PWA 需求,即离线支持。

步骤 3 – 添加与服务人员的离线支持

PWAs的另一个关键组成部分是离线支持,您将通过被称为[服务工 (https://andsky.com/tech/tutorials/js-service-workers)的一款网络技术加以实施. _ service worker_本质上是一捆JavaScript代码,它与您所打开的页面中所有与UI相连的代码分开运行. 这种被孤立的代码也获得了特殊特权,例如改变网络请求行为的能力,这对于实施离线支持至关重要. 在这一步骤中,您将通过通过您的 Gatsby 配置文件配置的 [`gatsby-plugin-offline' (https://www.gatsbyjs.com/plugins/gatsby-plugin-offline/ ) 插件设置一个强大的服务员.

首先,安装gatsby-plugin-offline包,并将其添加到您的依赖中。

1npm install gatsby-plugin-offline

接下来,通过Gatsby config加载插件,同样的gatsby-config.js在上一个步骤中编辑:

 1[label gatsby-config.js]
 2module.exports = {
 3  plugins: [
 4    ...
 5
 6    {
 7      resolve: `gatsby-plugin-manifest`,
 8      options: {
 9        ...
10      },
11    },
12    `gatsby-plugin-offline`,
13
14    ...
15  ]
16}

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

<$>[警告] 警告: 无论是 docs for gatsby-plugin-manifest 还是 docs for gatsby-plugin-offline 都规定在配置数列中,如本代码片段所示, gatsby-plugin-manifest 应该始终在 gatsby-plugin-manifest 之后出现。

在这一点上,您既增加了离线支持,又为您的应用程序创建了一个显而易见的文件,接下来,本教程将解释PWA的第三个必要部分:具有安全的背景。

第4步:提供安全的背景

对于任何PWA的三个基本最低要求的最后一个是它在安全的环境中运行(https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts)。

因此,本教程将描述一些不同的策略,以获得安全的背景,然后继续在本地测试您的Gatsby网站。

如果您正在通过静态主机部署您的 Gatsby 项目,例如 DigitalOcean’s App Platform,那么很可能 HTTPS 将被支持,无需安装。有关在 App Platform 上部署您的应用程序的更多信息,请参阅 如何将 Gatsby 应用程序部署到 DigitalOcean App Platform 教程。

如果您正在部署在不自动提供HTTPS的服务器上,但有SSH访问权限,可以使用让我们加密来获取并安装免费的TLS/SSL证书. 例如,如果使用Apache与Ubuntu 20.04,您可以跟随How To Security Apache with Let's Encrym on Ubuntu 20.04使用Certbot来处理这一过程. 如果您正在向共享主机部署, 您将想要检查其特定的文档页面, 以了解 SSL 证书安装是否可用以及如何可用 .

对于本地测试,您不必处理获取或安装SSL证书,这是因为大多数现代浏览器将本地主机网站视为安全的背景,即使没有安装TLS/SSL证书或HTTPS协议。

您现在已经成功地将 PWA 支持添加到您的 Gatsby 项目中,通过满足三个基准标准: HTTPS(或),一个显然的文件和一个服务工作者。

步骤5:运行本地测试

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

要本地测试您的 Gatsby 网站作为 PWA 的功能,请构建它,然后服务生成的构建目录:

1npm run build
2npm run serve

一旦完成,你会看到以下内容:

1[secondary_label Output]
2You can now view gatsby-starter-default in the browser.
3⠀
4  http://localhost:9000/

您现在可以在您的 Web 浏览器中访问该 URL,如果您的浏览器支持 PWAs,您将遇到一些特殊的额外的 UI 元素。例如,在 Chrome桌面上,地址栏中将出现一个新的按钮,在点击时询问您是否希望将 Gatsby 网站安装为 app ,如下图所示:

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 的远程调试工具(仅限 Android)或一个‘localhost’隧道服务,如 ngrok.在移动设备上,您将遇到安装您的网站作为应用程序的相同选项,如下所示:

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;请查看 caniuse.com 有关平台支持的更多信息。

您现在已经验证了您的 Gatsby 项目可以本地构建和服务,您的浏览器成功检测到它提供了 PWA 功能。下一步将是对您所组装的内容进行最终检查,并使用 Lighthouse 工具检查是否有可改进的领域。

步骤6 - 使用灯塔进行审计

此时,您拥有一个Gatsby网站,它满足了PWA的所有核心要求:它拥有HTTPS,一个清单,以及一名服务员进行离线支持. 然而,《太平洋行动计划》的概念超越了任何单一的要求,它包括了共同努力的所有方面,并遵守了一般准则。 考虑到这一点,你的最后一步是使用审计工具来验证你是否达到基准标准,以及收集如何进一步优化你的Gatsby项目以满足PWA最佳做法的信息.

有几种不同的方式来审核您的网站作为一个PWA,但目前的黄金标准是 Lighthouse Tool. 如果您有桌面Chrome安装,您可以对您的网站直接在Web浏览器中(https://developer.chrome.com/docs/devtools/)运行审核。

首先,在Chrome中导航到您的Gatsby网站,然后在网页上的任何地方右键单击Chrome DevTools,并在右键单击菜单中选择 Inspect ,然后在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-only 审计,然后打开该报告以查看:

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

然而,通过 CLI 使用 Lighthouse 不会绕过安装 Chrome 的需求;这只会使过程更容易自动化。

由 Lighthouse 生成的报告告诉你几件事,分成几个类别,其中一些最重要的是:

*可安装 :这是最重要的类别,它涉及你的网址是否达到可安装的PWA-HTTPS、清单文件和服务人员的三个基线标准。 *PWA 优化 : 这些都是你应该做的 最佳的PWA用户体验, 但并不严格要求 你的PWA是功能。 将这些建议视为最佳做法建议。 其中的一些例子包括创建自定义的飞溅屏幕,以便在移动应用程序加载时显示,为地址栏设置主题颜色,并提供JavaScript无法使用时的倒置内容. 请检查access-date=中的日期值 (帮助) 请检查access-date=中的日期值 (帮助) [灯塔官方文献] (https://web.dev/lighthouse-pwa/# pwa-optimized). .

通过使用 Lighthouse 工具来审核您的 Gatsby PWA,您不仅可以拥有功能性的 PWA,还可以了解它如何满足 PWA 要求和最佳实践。

结论

遵循这些步骤后,你现在有一个Gatsby网站,它也可以作为一个现代可安装的进步式Web应用程序,具有强大的离线支持。你现在正在为用户提供两个世界的最好:他们可以浏览你的网站作为一个正常的网页,但他们也可以使用它作为一个原生应用程序,具有自己的启动器图标,显示窗口和他们从原生应用程序中期望的可靠性能。

如果您正在寻找更多方法来提供最优化的 PWA 体验,除了 Lighthouse PWA 审核之外,Google 还发布了一份 PWA 检查清单这将有助于您。 如果您想了解更多关于 Gatsby 的信息,请查看其余的 如何使用 Gatsby.js 创建静态网站系列。

Published At
Categories with 技术
Tagged with
comments powered by Disqus