gatsby_使用Gatsby构建渐进式Web应用程序

在上一篇文章《渐进式Web应用程序：简介》中，我写了有关构建PWA的关键技术以及如何开始使用它们的信息。 在这篇文章中，我将向您介绍我使用静态站点生成器Gatsby构建PWA的经验。

什么是盖茨比？

Mud开发团队的一些成员最近对盖茨比感到非常兴奋-实际上，我们最近发布的以足球世界杯为主题的网站On the Plane是由盖茨比建造的。 与其他静态站点生成器不同，Gatsby使用React作为其模板引擎。 您构建的所有内容都在React组件中呈现，使其变得非常快。 我写的入门盖茨比在我的个人博客， 在这里 （也发表了关于盖茨比网站）。

您不需要了解React就可以启动和运行一个简单的Gatsby网站，尽管如果您想利用它提供的所有功能可能会有所帮助。 但是，一些中级JavaScript会让您惊讶的！

Gatsby的一大优点是它已经配置了完整的构建设置，这意味着，如果您讨厌处理这些东西（像我一样），您可以专注于有趣的东西，例如编写出色的代码！ 另一个很棒的事情是文档，这是一流的。 在完成了现场教程并构建了自己的网站CSS {In Real Life}之后 ，我的下一个目标是使我的网站成为Progressive Web App。

构建渐进式Web应用

与其他静态网站生成器相比，盖茨比（Gatsby）网站上的比较表显示了其众多功能的叠加，老鹰眼的观众会发现它在“性能/ PWA”部分中得分很高。 实际上，我对过程如此简单感到惊讶。

需要注意的一件事是，您的站点从一开始就不必是PWA-完全有可能建立一个常规站点，然后再将其转换为PWA。

HTTPS

PWA使用服务工作者（功能非常强大的Web工作者）来获取和缓存内容，因此在您的站点成为PWA之前，它必须首先使用HTTPS。 我的网站托管于Netlify，可与Gatsby轻松集成。 通过Netlify，这是一个简单的步骤（只需单击一个按钮）即可验证您的域，提供LetsEncrypt证书并将站点切换到HTTPS。

安装Gatsby插件

Gatsby有一个很棒的插件生态系统，可以自动执行各种不同的任务。 我们需要安装其中的几个，以便为我们的PWA提供离线功能：

• Gatsby-plugin-manifest生成Web应用程序清单，该清单文件是一个JSON文件，其中包含有关浏览器应如何显示PWA的说明。
• Gatsby-plugin-offline创建服务工作者并将其加载到客户端。

安装Gatsby插件与安装节点模块很像-您运行npm install [name of plugin] ，然后将它们作为数组添加到gatsby-config.js文件中，如本例所示。

plugins: [`gatsby-plugin-manifest`undefined `gatsby-plugin-offline`];

对于我们的PWA，必须在阵列中gatsby-plugin-manifest 之后列出gatsby-plugin-offline 。

安装插件后，您需要停止并重新启动开发服务器（使用命令gatsby develop ）。 清单JSON文件将生成，然后您只需添加自己的配置选项-您的网站标题，背景色主题颜色和图标-这将改善用户的视觉体验，并允许他们将PWA添加到主屏幕（在支持的浏览器中）。

通常，在构建PWA时，您需要提供多个图标大小以说明不同的显示。 使用Gatsby插件，您仅可以提供一个分辨率最高的图标（512像素x 512像素），其余的图标将为您生成。

灯塔

在停止并重新启动开发服务器以使更改生效之后，您可以在Chrome的开发工具中检查您的网站。 我们可以通过转到“应用程序”选项卡来检查我们的服务人员是否已激活。 在“应用程序”视图的左侧，您应该看到“清单和服务工作者”。 单击服务工作者选项卡将向您显示服务工作者是否处于活动状态。

要查看您的网站如何进行度量，可以使用Google的Lighthouse工具，该工具是为测试PWA而开发的。 您可以从开发工具的“审核”面板中获得此功能，也可以将其作为Chrome扩展程序使用。 您也可以通过安装节点模块从命令行运行它。 Lighthouse将对您的站点进行审核，性能，PWA状态，可访问性，最佳实践和SEO的测试，并生成包含改进建议的报告。 它不是构建PWA的必要部分，但我总是觉得它非常有用。

自定义

毫无疑问，您还想做的是优化您的网站（Lighthouse会采取的措施）的一件事就是使用您网站的元数据自定义文档的信息。 在Gatsby中，您不能直接编辑 ，因此最好的方法是使用插件gatsby-plugin-react-helmet来访问它。 按照相同的步骤安装以前的插件。 然后，您可以在 标签内添加标签，该标签将在编译时显示在 ：

然后，您可以运行gatsby build并发布您的网站。 恭喜，您现在有了渐进式Web应用程序！

翻译自: https://css-irl.info/building-a-progressive-web-app/