将网站转变为渐进式 Web 应用程序的简单方法

什么是渐进式 Web 应用程序？

基本上，PWA 是一个可以保存在用户设备（台式机、平板电脑或智能手机）上的网站，因此感觉和行为很像原生应用程序：加载屏幕，消除浏览器的界面混乱以增强用户注意力，并且如果连接断开，它仍然显示（缓存的）内容，使用户能够继续离线工作。

为什么它很重要？

它往往会提高用户参与度：如果 Android 的 Chrome 浏览器（不确定其他移动浏览器是否如此）检测到该网站是 PWA，它会提示用户使用您选择的图标将其保存在其设备的主屏幕上。

与移动应用程序相比，它简化了最终用户的设置过程，摆脱了应用商店的束缚。

PWA 对客户的业务非常有利。阿里巴巴（中国的亚马逊）注意到，由于浏览器提示“安装”网站，用户参与度提高了 48%（来源）。

这使得努力完全值得为之奋斗！

这项服务的实现得益于一项名为Service Workers的技术，它允许你将静态资源（html、css、javascript、json 等）保存在用户系统中，并指定manifest.json网站作为已安装应用程序的行为方式。Service Workers 的功能远不止于此，例如离线时轮询用户操作，并在用户重新上线后在后台同步这些操作。

示例

著名的 PWA 有 Slack、Spotify、星巴克、纽约时报等等……

以下是我自己使用此处描述的相同技术制作的几个 PWA。

plancomptablebelge.be（单页网站）
mathr.app（使用 Sveltekit 制作的练习微积分的游戏）

设置

将网站转变为 PWA 可能听起来很复杂（Service Workers 是什么？），但其实并没有那么难。跟着我的方法，读完这篇文章后你就能拥有一个！

1. 要求：https 而不是 http

PWA 仅适用于在安全域名上运行的网站（使用https :// 而不是 http://）。
这些域名通常很难手动设置，但幸运的是，如果您有自己的服务器，可以使用letsencrypt轻松自动地完成设置。而且……免费。

2.工具

2.1 灯塔测试

灯塔测试是由 Google 创建和维护的自动化测试，它根据三个标准（渐进性、性能和可访问性）对网站进行测试。它会为每个标准给出百分比分数，并针对每个问题提供解决方案建议。这是一款非常棒的学习工具。
realfavicongenerator.net
UpUp.js库

2.2 realfavicongenerator.net

realfavicongenerator.net负责处理 PWA 的视觉层。它会生成上面提到的 manifest.json 文件，以及将网站保存到任何移动设备时所需的所有图标版本，以及一个可添加到页面<head>标签的 HTML 代码片段。

2.3 服务工作者，通过 upup.js

Service Workers 是一项 JavaScript 技术。我感觉它对于我疲惫不堪、缺乏耐心的大脑来说很难掌握。不过幸运的是，一位来自德国的聪明女孩向我推荐了Tal Atler编写的 JavaScript 库，它能让你的网站在连接中断时也能轻松正常运行。谢谢，Ola Gasidlo！

只需完成快速UpUp 教程就可以了。

2.4 清单

编辑 RFG 为您生成的 manifest.json 文件。该文件至少应包含以下条目：“scope”、“start_url”、“short_name”和“display”。以下是实际示例：

{
    "name": "My PWA Sample App",
    "short_name" : "PWA",
    "start_url": "index.html?utm_source=homescreen",
    "scope" : "./",
    "icons": [
        {
            "src": "./android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "./android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffee00",
    "background_color": "#ffee00",
    "display": "standalone"
}

更多信息请访问developers.google.com。

3. 方法论

使用 Realfavicongenerator 生成 HTML 和图片代码，并将它们添加到您的网站代码中。
在您的 https 域上发布。
做灯塔测试。
分析结果。
逐一解决每个问题。
回到 3，冲洗并重复。
不断迭代，直到所有地方都接近 100，并且在“渐进式”中接近 100。
在手机上测试一下，看看会发生什么。在安卓设备上，你很可能会在底部看到一个弹窗，邀请你将网站保存到手机主屏幕上！

深入兔子洞……

这是我使用 Github 页面制作的一个 PWA 示例项目，用于BeCode的下属实时编码：用你的手机访问它的 Github 页面进行测试。访问它的仓库来查看代码。

您可以在本书中找到有关 PWA 所需的所有信息：

。

就这样！祝 PWA 一切顺利！

您的 PWA 已准备就绪：您如何学习如何使用 Git 自动部署它？

文章来源：https://dev.to/becodeorg/the-easy-way-to-turn-a-website-into-a-progressive-web-app-77g