在盖茨比离线

2020年12月30日11:12:38 发表评论 29 次浏览

本文概述

使用Gatsby进行构建意味着自动完成了设置所需的繁重工作, 因此你可以专注于为UI编写代码。但是, 盖茨比(Gatsby)无法直接使用脱机功能或通常称为渐进式Web应用程序(PWA)的功能。

PWA是可以完全或部分导航而无需互联网连接的任何网站, 并且可以直接从浏览器安装在设备上(就像本机应用程序一样)。有网站必须满足的三个基本标准有资格成为PWA。总之, 它:

  • 必须有清单文件
  • 使用服务工作者缓存资源并拦截网络请求
  • 必须通过HTTPS提供

在本文中, 我将详细介绍如何转换盖茨比动力网站到PWA中, 以及如何做到这一点。

PWA转换之前的Lighthouse报告

步骤1:添加清单

清单是一个JSON文件, 它指示浏览器使你的网站可安装并启用"添加到主屏幕"功能。它还描述了将站点安装在设备上后的行为。在清单文件中, 你将定义诸如应用程序的名称, 图标以及从应用程序的主屏幕启动应用程序时应导航至的基本URL之类的内容。

与几乎所有内容一样, Gatsby提供了一个插件来简化此过程。

首先, 请安装插件:

npm install gatsby-plugin-manifest

然后, 在以下位置添加并配置插件gatsby-config.js文件:

plugins: [
    {
      resolve: `gatsby-plugin-manifest`, options: {
        name: `CodeWithLinda`, short_name: `CodeWithLinda`, start_url: `/`, background_color: `#212121`, theme_color: `#f39ca9`, display: `standalone`, icon: `src/images/icon.png`
      }, }, ], 

让我解释一下配置属性:

  • 名称–通过浏览器将站点安装为应用程序时显示的名称
  • 简称–在用户主屏幕, 启动器或其他空间可能受限的地方显示的名称
  • start_url–告诉浏览器从设备主屏幕启动应用程序时导航到哪个URL。将其视为你的首页网址
  • 背景颜色–首次在移动设备上启动应用程序时, 初始屏幕上使用的颜色
  • theme_color–从主屏幕启动应用程序时浏览器工具栏的颜色
  • 显示–指定启动应用程序时浏览器UI的显示方式。选项包括全屏, 独立, 最小用户界面和浏览器
  • 图标–用于不同设备尺寸的不同尺寸图标的数组。这些图标用于主屏幕, 应用程序启动器, 任务切换器, 初始屏幕等。盖茨比提供默认的512×512, 它将自动为其他屏幕生成其他尺寸

要测试并验证清单设置正确, 你需要重新启动开发服务器。为此, 请使用以下命令杀死端口Ctrl / Cmd + C然后重新运行盖茨比开发。使用Chrome开发者工具的应用程序面板中的清单窗格来确认:

我们为制作了一个自定义演示.
不完全是。点击这里查看.

在盖茨比离线1
在应用程序面板中检测到的清单

如你所见, 清单已被检测到。

步骤2:向服务人员添加离线支持

服务工作者只是浏览器运行的JavaScript文件, 其主要目的是使用浏览器的缓存存储来缓存网站的资源, 然后拦截网络请求, 以在用户请求时从浏览器的缓存中获取这些资源。这样, 即使没有互联网连接, 你的站点也可以导航。

就像清单插件一样, 盖茨比(Gatsby)有一个用于添加服务人员的插件, 该插件使用工作箱构建为站点创建服务工作者, 然后将服务工作者加载到客户端。

开始。安装插件:

npm install gatsby-plugin-offline

然后, 在你的盖茨比config.js文件:

plugins: [
{
  resolve: `gatsby-plugin-offline`, options: {
    precachePages: [`/`, `/blog/*`], }, }, ]

precachePages使你可以指定页面数组, 其资源应由服务工作者预先缓存。在上面的代码示例中, 我缓存了主页以及URL以/ blog /开头的所有页面。这包括博客页面和所有单独的博客文章。

在大多数情况下, 这就是你需要的所有配置。

确保配置gatsby-plugin-offline后盖茨比插件清单在你的gastby-config.js文件。这确保了脱机插件也能够缓存创建的清单文件。

你无法在开发模式下测试服务人员。通过运行来测试, 构建和服务你的网站盖茨比建和盖茨比发球.

转换为PWA后的Lighthouse报告

如你所见, 将网站转换为PWA不仅可以改善性能指标, 还可以改善最佳实践指标。

需要警告的是, 服务人员可能会感到恐怖。尽管它的目标是改善UX, 但如果处理不当, 则可能会成为不良UX的来源, 更新问题.

在Gatsby中, 当你更改项目并部署时, 将生成具有唯一文件名的新文件。这将导致服务工作者文件进行更新。但是, 浏览器仅在以下三种情况下查找对服务工作者文件的更新:用户重新加载页面, 用户导航到另一个页面或在上次更新后至少24小时内进行的每次访问都定期进行。继服务人员生命周期, 如果浏览器在任何这些活动中都找到了更新的服务工作者, 它将开始安装它。成功安装后, 更新的服务程序将不会立即被激活, 而是将等待直到当前服务程序控制的所有其他选项卡关闭。

这意味着, 如果我们的访问者忘记了我们网站的已打开选项卡, 或者偶尔不关闭并重新打开你的网站, 则服务工作者可能永远不会更新, 并且用户将陷于旧版网站中。作为解决方案, gatsby-plugin-offline 工作箱配置设置服务人员的skipWaiting真实。这样可以确保新服务工作者在安装完成后立即激活, 而不必等待时间。这样, 将尽快向用户提供我们网站的最新更新。

现在唯一的问题是, 一旦激活了新的服务人员, 盖茨比将在路由更改时启动整个站点重新加载。如果用户正在网站上执行某项操作(例如填写表格), 则他们可能必须重新开始。这是糟糕的UX。

我们可以通过延迟来改善服务人员的更新流程skipWaiting然后显示一个更新按钮或横幅, 用户可以单击该按钮来启动重新加载, 并在方便时将网站更新为最新更改。 Jakub Ziebikiewicz写了一篇非常容易遵循的指南关于如何使用他的服务工作者更新npm软件包。你还可以阅读其他延迟策略这里.

另外, 如果出于任何原因, 你不想使用gatsby-offline-plugin, 你可以通过添加一个sw.js到静态文件夹, 然后在你的计算机中注册服务工作者gatsby-browser.js文件:

//in gatsby-browser.js

export const registerServiceWorker = () => true

步骤3:通过HTTPS服务

在开发过程中, 你可以访问并能够测试localhost上的服务人员, 但是要使访问者可以访问它, 你必须通过HTTPS而非HTTP服务你的站点。这是因为服务人员可以拦截网络请求并更改响应, 从而使通信通道容易受到"中间人攻击。通过HTTPS为服务人员提供服务可确保通信通道的安全, 并确保在通过网络的过程中不会被篡改。

如果你将站点托管在GitHub页面或Netlify上, 则默认情况下启用HTTPS。另外, 根据你的托管服务提供商, 你可以使用免费的让我们加密SSL证书如果你的托管服务提供商支持或购买SSL证书并与托管服务提供商进行配置。你可以通过Google搜索找到所有需要了解的信息。

总结

不必向网站添加离线功能, 但这可以提高网站的性能并提升访问者的体验, 因此当使用低带宽的设备(例如手机或移动设备)时, 他们仍然可以访问网站的全部或部分内容。没有地下隧道, 电梯或飞机之类的接待处。

关于服务人员, 如果你使用任何自定义更新流程, 我希望在评论中听到它。在此之前, 请继续打造伟大的事物!

日志火箭:全面了解你的网络应用

LogRocket仪表板免费试用横幅

日志火箭是一个前端应用程序监视解决方案, 可让你重播问题, 就好像问题发生在你自己的浏览器中一样。 notlogy无需猜测错误发生的原因, 也不要求用户提供屏幕截图和日志转储, 而是让你重播会话以快速了解出了什么问题。无论框架如何, 它都能与任何应用完美配合, 并具有用于记录来自Redux, Vuex和@ ngrx / store的其他上下文的插件。

除了记录Redux动作和状态外, notlogy还会记录控制台日志, JavaScript错误, 堆栈跟踪, 带有标题+正文, 浏览器元数据和自定义日志的网络请求/响应。它还使用DOM来记录页面上的HTML和CSS, 甚至可以为最复杂的单页面应用程序重新创建像素完美的视频。

免费试用

.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: