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/

你可能感兴趣的:(gatsby_使用Gatsby构建渐进式Web应用程序)