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

最新推荐文章于 2024-05-13 10:08:52 发布

cuotangu3718

最新推荐文章于 2024-05-13 10:08:52 发布

阅读量284

点赞数

文章标签： java python 编程语言 web linux

原文链接：https://css-irl.info/building-a-progressive-web-app/

版权

在上一篇文章《渐进式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的必要部分，但我总是觉得它非常有用。

自定义<head>

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

<Helmet
	title="CSS {In Real Life}">
	<html lang="en-gb" />
	<meta name="description" content="CSS In Real Life is a blog covering CSS topics and useful snippets on the web’s most beautiful language. Published by Michelle Barkerundefined front end developer at Mud and CSS superfan."/>
	<meta name="keywords" content="cssundefined front endundefined web developmentundefined web design"/>
</Helmet>

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