开始写PWA
前言
PWA（Progressive Web Apps）是 Google 提出的一个新的 web 体验方式，离线时也可以访问，极大的提升了用户体验。
有三个特性：
* Reliable (可靠的)
* Fast (快速的)
* Engaging (可参与的)
具体可以看官网的介绍，这里不再赘述。
技术点
PWA 有三个技术点：
* Service Worker
* Manifest
* Push Notification
SW 是最重要的技术点（缓存，离线浏览）；Manifest 是定义图标、启动地址等列表清单文件（和 Android app 的 manifest 文件类似）；Push Notification 是利用服务器和SW之间的通信来进行消息的订阅和推送的。
栗子
新建一个 index.html 文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello PWA</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<img src="images/logo.jpg">
<script>
if ('serviceWorker' in navigator) { // 浏览器支持SW
navigator.serviceWorker.register('sw.js').then(function (registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function (err) {
console.log('ServiceWorker registration failed: ', err);
});
}
</script>
</body>
</html>demo有 logo.jpg 和 style.css 文件
新建 sw.js 文件如下：
var cacheName = 'hello-pwa';
self.addEventListener('install', event => {
event.waitUntil(
caches.open(cacheName)
.then(cache => cache.addAll(
[
'/', // 这个一定要包含整个目录，不然无法离线浏览
'./images/logo.jpg',
'./index.html',
'./css/style.css'
]
)).then(() => self.skipWaiting())
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request)
.then(function (response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});到这里就一个入门级的栗子就写完了，关于 Service Worker API 可以查看文档学习
接下来通过 http-server 和 ngrok（https）进行调试查看
安装 http-server
npm install http-server -g安装 ngrok，下载解压即可
在项目目录下执行如下命令：
http-server -c-1 // -c-1 会关闭缓存再开启另外一个终端在 ngrok 文件的目录下执行如下命令：
./ngrok http 8080 // http-server 默认开启8080端口效果
以下是Chrome浏览器环境测试结果：
浏览器支持 SW 打印如下：
Application 控制台可以看到 ‘hello-pwa’ 已经缓存，如下：
尝试离线刷新：
