清风逐月 | 我思故我在
2019-11-05 | 随笔杂记 | UNLOCK | 更新时间:2019-11-19 15:14

PWA 渐进式网页应用

Progressive Web Apps (渐进式网页应用) 简称 PWA。早在2015年就有类似的概念，直到2017年由 Google 实现技术落地。虽然国外不好说，但直到目前为止，国内并未兴起 PWAs 的热潮，取而代之的是微信的小程序及支付宝的小程序等。但是随着时间的发展，各大浏览器厂商纷纷开始支持 PWAs。

怎么才能称为PWA应用

　　“PWA不特指一种具体的技术，而是在各个浏览器厂商和众多web开发者的共同努力诞生的。它是一种集合多种技术与标准的混合物，它的背后是整个web社区和web规范”
　　正如前文说述，PWA不是使用一种技术创建的。它们代表了构建Web应用程序的新理念，涉及一些特定的模式，API和其他功能。如果一个Web App从一开始就是PWA，那就不那么明显了。当应用程序满足某些要求时，可以将其视为PWA，或者实现一组给定的功能：离线工作，可安装，易于同步，可以发送推送通知等，这里有一些关键的原则来辨别一个web应用是否是一个PWA应用。它应该具有以下特点:

  • 1：内容可以通过搜索引擎发现，可以出现在设备的主屏幕
  • 2：可以简单地通过一个URL来分享它，有新的内容它都可以发送通知
  • 3：可以在离线状态或者是在网速很差的情况下运行
  • 4：在老版本的浏览器仍旧可以使用，在新版本的浏览器上可以使用全部功能

PWA有什么优点和缺点

　　相比原始web，PWA拥有巨大优势，

  • 1：无需安装，无需下载，只需访问一次就能添加到桌面进行使用
  • 2：发布和更新不需要APP商店的审核，也不需要重复发布更新
  • 3：所有网页都能改进为PWA应用，能对用户产生更多的吸引力，并且提高转换效率
  • 4：不需要开发Android和IOS两个版本

当然PWA有存在着劣势，这也是无法避免的问题：

  • 1：游览器对技术支持还不够全面,不是所有游览器都能支持PWA
  • 2：需要通过第三方库才能调用底层硬件（如摄像头）
  • 3：国内一些手机厂商对PWA的屏蔽以及小程序对PWA的压制

PWA的浏览器支持程度

PWA 不依赖于单个 API ，而是使用各种技术来实现提供最佳 Web 体验的目标，PWA 所需的关键要素是 service worker 支持。 值得庆幸的是，桌面和移动设备上的所有主流浏览器都支持 service worker

其他功能，如 Web App Manifest，Push，Notifications和 Add to Home Screen 功能也得到了广泛的支持。 目前，Safari 对 Web App Manifest 和 Add to Home Screen 的支持有限，并且不支持 Web 推送通知。 但是，其他主流浏览器支持所有这些功能。

其中一些 API 是实验性的，文档仍在草稿中，但是看到像 Flipkart 和 AliExpress 这样的成功案例应该说服您尝试在 Web 应用程序中实现一些 PWA 功能。

最重要的是，您应该遵循渐进增强规则 - 仅在支持它们的情况下使用提供此类增强功能的技术，但如果不支持，则仍然提供应用程序的基本功能。 这样每个人都可以使用它，但那些使用现代浏览器的人将更多地受益于 PWA 功能。

实际上这都是理想状态，Chrome浏览器虽然支持Pwa，但仍然需要客户手动开启Chrome实验室的Pwa功能。而在手机端绝大多数的浏览器并不支持Pwa的实现，可以说说很现实了(你不火就不支持)。不过好在Pwa在实现上花费不多，可以当成一颗闲子来下，支持固然美，不支持也无碍。

配置Chrome

Chrome浏览器虽然支持PWA，但是仍然需要用户对浏览器进行配置

首先更新你的 Chrome 版本到 64 或以上。
然后在地址栏输入 chrome://flags，找到 Desktop PWAs 的选项将其 Enabled
然后重启 Chrome 浏览器。

我该怎么对现有网页改进

1：开启 Https支持 ,由于目前 PWA 需要 Https 连接，所有在项目上线后，需要Https支持
在测试环境中，Chrome 允许使用 localhost 或者任何 127.x.x.x 的地址进行测试应用

2：创建一个 Web App Manifest，manifest文件是一个 JSON 格式的文件，位于你项目的根目录, manifest 文件提供了一些网站的信息。

示例参考

3：创建一个 Service Worker,这是位于根目录的javascript 文件,是拦截和响应你的网络请求的编程接口

示例参考

4：构建一个离线页面，离线页面可以是一个静态页面，来说明当前用户请求不可用。也可以用于访问缓存好的页面内容

目前 PWA 处于Chrome实验室的状态，Android 也不是很支持这个技术，不确定什么时候放开，也许在将来的某天。不过即便如此，PWA的离线缓存依然能带来良好的用户体验。

PWA 开启安装提示的功能

在Chrom 浏览器中，PWA功能早期，如果用户需要安装此网站的PWA ，那么需要浏览网站至少30s ，开发人员才能对用户进行提示安装，
现在已经取消了这一限制，但是增加了新的限制：需要用户主动点击或者其他互动，开发者才能调用提示接口。
（如无必要，尽量不添加，兼容性不是很好）

自定义安装提示

var _beforeInstallPrompt;
if ( "onbeforeinstallprompt" in window ) {
  window.addEventListener( "beforeinstallprompt", beforeInstallPrompt );
}
function beforeInstallPrompt( evt ) {
  evt.preventDefault();
  _beforeInstallPrompt = evt;
}

let menu=document.getElementById('addApp')
menu.addEventListener('click',e=>{
  _beforeInstallPrompt.prompt()
  _beforeInstallPrompt.userChoice
  .then(choiceResult => {
    if(choiceResult.outcome === 'accepted') {
      console.log('user accepted A2HS prompt')
    } else {
      console.log('user dismissed A2HS prompt')
    }
    _beforeInstallPrompt = null
  })
})
PWA