网站内容添加(PWA是什么引用自Harttle.Land的说法：ProgressiveWebApps)
优采云 发布时间: 2021-10-17 19:08网站内容添加(PWA是什么引用自Harttle.Land的说法：ProgressiveWebApps)
什么是 PWA
引用 Harttle.Land 的话：
PWA（Progressive Web Apps）是谷歌最近提到的一种网络应用程序（或维基百科称之为“软件开发方法”）。Harttle 能找到的最早关于 PWA 的文章 文章 是 Alex Russell 在 2015 年 6 月的一篇博客：Progressive apps escaping tab without lost our soul，让 Web App 在保持 Web 灵魂的同时跳出 Tab。
正如 Alex 所说，PWA 旨在让 Web 在离线、交互和通知方面实现类似 App 的用户体验，同时保留其本质（开放平台、易于访问和可索引）。根据谷歌官方的解释，PWA 具有以下特点：可靠、快速、引人入胜。
它比原生应用程序更轻巧，但比现有的 Web 应用程序具有更多的功能。最大和最关键的区别在于，它可以摆脱浏览器的“束缚”（虽然它仍然是基于浏览器的技术），并且可以将 PWA 网站 添加到您的桌面，无论是 PC 操作系统还是手机操作 系统类似于原生应用，体验堪比原生应用。
它也可以像原生APP应用一样有闪屏，也可以像原生APP应用一样有消息推送——但你要知道它是从Web衍生出来的，通常只有体积的十分之一或更少一款传统APP。不用等时间下载安装，打开网页时就已经“下载”和“安装”了。
要体验这项技术，如果您是Android用户，则已经支持最新版本的Chrome；如果你是iOS用户，可以等待3月份的11.3版本更新；如果你是PC用户，那我们来看看如何在电脑上体验PWA。
配置 Chrome
首先将您的 Chrome 版本更新到 64 或更高版本。
然后在地址栏输入chrome://flags，找到Desktop PWAs的选项开启，然后Chrome会提示你重启浏览器。
重启浏览器后，PWA 已经添加到桌面的功能就可以使用了。
将 PWA 网站 添加到桌面
我在这里使用我的博客（基于我写的 hexo-theme-melody 主题构建）。打开网站，然后找到浏览器右侧的设置按钮。接下来，我将针对Windows平台和macOS平台分别进行说明。
视窗平台
在Windows平台上，找到添加到桌面按钮，点击它，会出现一个确认框：
单击添加。然后就可以在桌面看到对应的图标了：
双击打开：
你会发现打开了一个没有浏览器痕迹的网页，或者一个应用程序——这就是PWA。PWA 支持离线启动技术，即使没有互联网也可以启动应用程序。但是，在网络条件下可以发送的请求仍然需要网络环境。
macOS平台
相较于Windows平台更简单的操作，macOS平台的操作相对要走一些弯路，但大致相同。macOS 上的 Chrome 无法一次性将 PWA 应用程序添加到桌面。您需要先从 PWA 网站 生成一个应用程序，然后手动将应用程序复制到桌面作为快捷方式。
接下来是具体步骤：
打开一个PWA网站，这里以我的博客为例，然后找到右侧的配置菜单，下拉选择添加到“应用程序”文件夹。然后等待几秒钟，会出现一个对话框：
至此，PWA应用已经生成。我们点击添加。然后你可以在你的应用程序列表中看到它：
但是如果你想在你的桌面上添加这个应用程序，你还需要找到这个应用程序的位置，通常在文件夹/Users/你的用户名/Applications/Chrome\Apps.localized/下。使用 Finder 打开：
然后选中这个应用，按住alt+command键拖到桌面，会生成一个快捷方式。这种方法也适用于其他应用。
预防措施
如果是非 PWA 应用程序，还会有添加到桌面或添加到应用程序文件夹的选项。但是，当您双击打开它们时，仍会调用 Chrome 浏览器打开它们，这与之前的书签相同。
但是，它仍然可以通过一个小的操作来实现。感谢@RiiSan 指出我原文中的错误。
前置步骤和之前一样，然后打开 chrome://apps 找到你制作的应用，然后右击在窗口中选择打开。然后你可以通过 PWA 应用程序的单独窗口获得类似的体验。但是它没有离线打开PWA的能力，它只是一个纯粹的网页，通过单独的窗口打开。
目前Desktop PWAs还是一个实验性的功能，所以可能会出现不稳定的情况，大家根据自己的情况来决定吧~
结尾
目前我能想到的理想使用条件是，当一些功能网站支持PWA时，不需要下载他们的桌面客户端，直接通过PWA添加到桌面。您可以像使用本机应用程序一样使用它们。比如推特，比如Medium等。
这里是别人总结的PWA网站列表，大家可以体验一下。
