《PWA实战：面向下一代的Progressive Web APP》读书笔记

前言

之前自己根据网上的教程学习写了几个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
}));
复制代码