《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
}));
复制代码

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，期待各类新功能的完善，期待能够在项目中用起来！开心到飞起，愈来愈坚信转行前端的决定是正确的:)