前言

之前自己根据网上的教程学习写了几个PWA的小Demo，觉得PWA很有意思，想要更多的了解一下PWA，所以读了这本书。这本书是MANNIN出版社出的，所以书里的代码都有非常棒的注释，因此这篇笔记不会展开讲代码，而是着重于描述PWA的功能以及常见的问题和解决方法。

• 图书资源
• 图书中代码的Github仓库

1. 什么是PWA

简单来说，PWA是一系列新兴技术的统称，这些技术旨在增强web app的功能，使其能够在用户体验上媲美原生应用。PWA的功能包括：

• 响应性：可以适配更小的屏幕
• 连接独立性：因为service worker的缓存，它使网页可以离线工作
• 类似原生应用的交互性：使用应用程序外壳架构（app shell）来构建
• 安全性：基于HTTPS协议
• 可发现性：搜索引擎能够发现它（SEO好）
• 可安装性：可以添加到桌面像原生应用一样启动（基于manifest技术）
• 可链接性：可以很容易的通过URL进行分享

1.1 网站性能测试工具

• Lighthouse
• webpagetest

Lighthouse会生成性能测试报告，但是测试结果会受网络质量的影响。webpagetest是真机测试，但是测试可选地点和浏览器是有限的，有时候还要排队等待。但不管怎样，这些测试工具可以辅助我们测试自己的站点，让我们了解到自己站点现在存在的性能问题，然后着手改善，相信PWA技术会让你的改善变得更加简单快捷，而且效果显著。最最重要的是，PWA是渐进增强的，不需要重写已经存在的代码！！

2. PWA的主要技术

2.1 Service Worker

2.1.1 service worker的功能

简单来说，service worker可以拦截请求（fetch request），可以给出响应(response)。你可以对拦截下来的请求做处理，比如说你发现缓存中已经有了请求的资源，而且资源还在有效期内，你就可以直接从缓存中读取资源终止请求。如果在service worker的安装阶段就缓存好了一些资源，这样再次访问时可以直接从缓存中加载部分资源，页面加载速度会大幅度提升。即使是离线访问页面也可以给出之前缓存好的信息，极大的提升了用户的体验感。可以使用Google的工具库Workbox写service worker文件，里面提供了很多易用的API以及各种缓存策略。

2.1.2 service worker的特点

• 基于HTTPS协议
• 运行在自己的全局脚本上下文中
• 不是绑定到一个特定的web页面
• 无法修改web页面中的元素，无法访问DOM
• 每次对service worker文件进行任何更改时，它都会自动触发service worker更新流。

2.1.3 service worker的调试

可以通过Google的开发者工具Application里面的Service Workers进行调试。

2.1.4 service worker常见问题

1) 缓存更新问题

【方法1】：因为修改service worker文件会触发service worker的更新流，所以想要更新缓存时，可以修改缓存名（cacheName），例如将helloWorld改成helloWorld-2。

【方法2】：Cache busting技术(作者更推荐)，给文件打上版本号，例如：

<script type="text/javascript" src=“/js/main-xtvbas65.js"></script>
复制代码

这种技术被称为缓存总线技术，已经出现了很多年。当一个静态文件被缓存时，它可以被存储很长一段时间，直至到期。如果你更新了一个网站，但由于文件的缓存版本存储在访问者的浏览器中，他们可能看不到所做的更改。缓存总线通过使用唯一的文件版本标识符告诉浏览器文件的新版本是可用的。

2) 拦截请求时怎么忽略查询字符串参数

caches.match(event.request, { ignoreSearch: true })
复制代码

2.2 Manifest

2.2.1 manifest的功能

让web app可以像原生应用一样添加图标到桌面，然后通过桌面图标启动。可配置图标，启动动画等，详细配置见文档。

2.2.2 manifest的调试

可以通过Google的开发者工具Application里面的Manifest进行调试。

2.2.3 manifest常见问题

1) 怎么让添加到主屏幕的横幅显示出来

要让添加到主屏幕的横幅显示出来，必修满足以下条件：

• 需要 manifest.json文件。
• 需要一个启动的URL
• 需要 144 x 144 的PNG图标
• 网站必须基于HTTPS协议，并且使用Service Worker
• 用户必须访问了网站至少两次, 每次至少有五分钟

2.3 Push notifications

2.3.1 Push notifications的功能

即使用户不打开浏览器也可以接收到消息，原生的API写起来有一些麻烦，可以借助第三方的工具库来写，例如OneSignal, Aimtell等。

2.4 Synchronous data

Background sync是Google新推出的Web API，可延迟用户行为，直到用户网络连接稳定。这样有助于保证用户想要发送的数据就是实际发送的数据。

PeriodicSync还在开发中，它可以实现定期同步。

3. 用PWA提升用户体验的例子

3.1 假wifi和单点故障问题

如下面的代码所示可以设置超时时间，用Promise的race函数让超时函数和正常的请求竞跑，如果到超时时间请求还未得到相应则抛出超时错误，这样可以及时让用户了解到出现了网络故障。

function timeout(delay) {return new Promise(function(resolve, reject) = >{setTimeout(function() {resolve(new Response('', {status: 408,statusText: 'Request timed out.'}));},delay);});
};self.addEventListener('fetch', function(event) {if (/googleapis/.test(event.request.url)) {event.respondWith(Promise.race([timeout(3000), fetch(event.request.url)]));} else {event.respondWith(fetch(event.request));}
});
复制代码

上面的代码看上去有一点繁琐，我们可以借助Google的工具库Workbox来简化以上代码

importScripts('workbox-sw.prod.v1.1.0.js');
const workboxSW = new self.WorkboxSW();
workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)', workboxSW.strategies.cacheFirst({cacheName: 'googleapis',networkTimeoutSeconds: 3
}));
复制代码

4. PWA的未来

4.1 Streaming data

Streaming data可以实现流数据的传输。举个例子，如果后台传递了一个很大的数据到前台，正常情况下前台需要接受完这个数据才能进行展示，而流数据可以一边接受一边展示，不需要等到整个数据都接受完再展示。

4.2 Web Bluetooth

Web Bluetooth可以在浏览器中连接蓝牙设备并通过PWA与设备交互。例如，开发人员已经开发出可以与心率监视器交互的网络健身应用程序和可以驾驶微型无人机的网络应用程序。

4.3 The Web Share API

The Web Share API允许您轻松触发原生Android共享对话框，通过URL或文本进行共享。这是一个重要的API，因为它为终端用户提供了对数据共享方式和位置的控制。

4.4 Payment Request API

Web Payments是W3C正在开发的一种新兴网络标准，旨在简化在线支付，并使更多的参与者能够轻松参与网络上的支付生态系统。标准灵活; 它们适用于各种类型的支付系统，适用于任何设备，支付方式或支付服务提供商的任何浏览器。这种灵活性使开发简单性，部署一致性以及与新兴支付技术的未来兼容性。

4.5 Hardware: the Shape Detection API

Shape Detection API允许开发人员访问人脸检测等功能，条形码检测，甚至是文本检测。

结语

看完这本书，特别是PWA未来发展这一块的内容，深深的感觉到web日新月异的发展以及逐渐强大的功能API，期待各种新功能的完善，期待可以在项目中用起来！开心到飞起，越来越坚信转行前端的决定是正确的:)