如何把网站改成PWA，首先我们要了解知道什么是PWA
Progressive Web Apps (下文以“PWAs”代指) 是一个令人兴奋的前端技术的革新。PWAs综合了一系列技术使你的 web app表现得就像是 native mobile app。相比于纯 web 解决方案和纯 native 解决方案，PWAs对于开发者和用户有以下优点：
虽然PWA不是所有浏览器都支持，但是我们不需要担心, 因为pwa是渐进增强的, 你的app仍然可以运行在不支持 PWA 技术的浏览器里。用户不能离线访问，不过其他功能都像原来一样没有影响。综合利弊得失，没有理由不把你的 app 改进为 PWA。
将你的网站改进为一个 Progressive Web App 总共有三个必要步骤：
由于一些显而易见的原因，PWAs 需要 HTTPS 连接。HTTPS 在示例代码中并不是必须的，因为 Chrome 允许使用 localhost 或者任何 127.x.x.x 的地址来测试。你也可以在 HTTP 连接下测试你的 PWA，你需要使用 Chrome ，并且输入以下命令行参数：
manifest 文件提供了一些我们网站的信息，例如 name，description 和需要在主屏使用的图标的图片，启动屏的图片等。
manifest文件是一个 JSON 格式的文件，位于你项目的根目录。它必须用Content-Type: application/manifest+json 或者 Content-Type: application/json这样的 HTTP 头来请求。这个文件可以被命名为任何名字，在示例代码中他被命名为 /manifest.json:
{
"name" : "PWA Website",
"short_name" : "PWA",
"description" : "An example PWA website",
"start_url" : "/",
"display" : "standalone",
"orientation" : "any",
"background_color" : "#ACE",
"theme_color" : "#ACE",
"icons": [
{
"src" : "/images/logo/logo072.png",
"sizes" : "72x72",
"type" : "image/png"
},
{
"src" : "/images/logo/logo152.png",
"sizes" : "152x152",
"type" : "image/png"
},
{
"src" : "/images/logo/logo192.png",
"sizes" : "192x192",
"type" : "image/png"
},
{
"src" : "/images/logo/logo256.png",
"sizes" : "256x256",
"type" : "image/png"
},
{
"src" : "/images/logo/logo512.png",
"sizes" : "512x512",
"type" : "image/png"
}
]
}
在页面的<head>中引入：
<link rel="manifest" href="/manifest.json">
manifest 中主要属性有：
MDN提供了完整的manifest属性列表:Web App Manifest properties
在开发者工具中的 Application tab 左边有 Manifest 选项，你可以验证你的 manifest JSON 文件，并提供了 “Add to homescreen”。
2020042301.png
Service Worker 是拦截和响应你的网络请求的编程接口。这是一个位于你根目录的一个单独的 JAVAscript 文件。
你的 js 文件（在示例代码中是 /js/main.js）可以检查是否支持 Service Worker，并且注册：
if ('serviceWorker' in navigator) {
// register service worker
navigator.serviceWorker.register('/service-worker.js');
}
如果你不需要离线功能，可以简单的创建一个空的 /service-worker.js文件 —— 用户会被提示安装你的 app。
Service Worker 很复杂，你可以修改示例代码来达到自己的目的。这是一个标准的 web worker，浏览器用一个单独的线程来下载和执行它。它没有调用 DOM 和其他页面 api 的能力，但他可以拦截网络请求，包括页面切换，静态资源下载，ajax请求所引起的网络请求。
这就是需要 HTTPS 的最主要的原因。想象一下第三方代码可以拦截来自其他网站的 service worker， 将是一个灾难。
service worker 主要有三个事件： install，activate 和 fetch。
这个事件在app被安装时触发。它经常用来缓存必要的文件。缓存通过 Cache API来实现。
首先，我们来构造几个变量：
// configuration
const
version = '1.0.0',
CACHE = version + '::PWAsite',
offlineURL = '/offline/',
installFilesEssential = [
'/',
'/manifest.json',
'/css/styles.css',
'/js/main.js',
'/js/offlinepage.js',
'/images/logo/logo152.png'
].concat(offlineURL),
installFilesDesirable = [
'/favicon.ico',
'/images/logo/logo016.png',
'/images/hero/power-pv.jpg',
'/images/hero/power-lo.jpg',
'/images/hero/power-hi.jpg'
];
installStaticFiles()方法添加文件到缓存，这个方法用到了基于 promise的 Cache API。当必要的文件都被缓存后才会生成返回值。
// install static assets
function installStaticFiles() {
return caches.open(CACHE)
.then(cache => {
// cache desirable files
cache.addAll(installFilesDesirable);
// cache essential files
return cache.addAll(installFilesEssential);
});
}
最后，我们添加install的事件监听函数。 waitUntil方法确保所有代码执行完毕后，service worker 才会执行 install。执行 installStaticFiles()方法，然后执行 self.skipWaiting()方法使service worker进入 active状态。
// application installation
self.addEventListener('install', event => {
console.log('service worker: install');
// cache core files
event.waitUntil(
installStaticFiles()
.then(() => self.skipWaiting())
);
});
当 install完成后， service worker 进入active状态，这个事件立刻执行。你可能不需要实现这个事件监听，但是示例代码在这里删除老旧的无用缓存文件：
// clear old caches
function clearOldCaches() {
return caches.keys()
.then(keylist => {
return Promise.all(
keylist
.filter(key => key !== CACHE)
.map(key => caches.delete(key))
);
});
}
// application activated
self.addEventListener('activate', event => {
console.log('service worker: activate');
// delete old caches
event.waitUntil(
clearOldCaches()
.then(() => self.clients.claim())
);
});
注意，最后的self.clients.claim()方法设置本身为active的service worker。
当有网络请求时这个事件被触发。它调用respondWith()方法来劫持 GET 请求并返回：
// application fetch network data
self.addEventListener('fetch', event => {
// abandon non-GET requests
if (event.request.method !== 'GET') return;
let url = event.request.url;
event.respondWith(
caches.open(CACHE)
.then(cache => {
return cache.match(event.request)
.then(response => {
if (response) {
// return cached file
console.log('cache fetch: ' + url);
return response;
}
// make network request
return fetch(event.request)
.then(newreq => {
console.log('network fetch: ' + url);
if (newreq.ok) cache.put(event.request, newreq.clone());
return newreq;
})
// app is offline
.catch(() => offlineAsset(url));
});
})
);
});
最后这个offlineAsset(url)方法通过几个辅助函数返回一个适当的值：
// is image URL?
let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f);
function isImage(url) {
return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false);
}
// return offline asset
function offlineAsset(url) {
if (isImage(url)) {
// return image
return new Response(
'<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>',
{ headers: {
'Content-Type': 'image/svg+xml',
'Cache-Control': 'no-store'
}}
);
}
else {
// return page
return caches.match(offlineURL);
}
}
offlineAsset()方法检查是否是一个图片请求，如果是，那么返回一个带有 “offline” 字样的 SVG。如果不是，返回 offlineURL 页面。
开发者工具提供了查看 Service Worker 相关信息的选项：
2020042302.png
在开发者工具的 Cache Storage 选项列出了所有当前域内的缓存和所包含的静态文件。当缓存更新的时候，你可以点击左下角的刷新按钮来更新缓存：
2020042303.png
不出意料， Clear storage 选项可以删除你的 service worker 和缓存：
2020042304.png
离线页面可以是一个静态页面，来说明当前用户请求不可用。然而，我们也可以在这个页面上列出可以访问的页面链接。
在main.js中我们可以使用 Cache API 。然而API 使用promises，在不支持的浏览器中会引起所有javascript运行阻塞。为了避免这种情况，我们在加载另一个 /js/offlinepage.js 文件之前必须检查离线文件列表和是否支持 Cache API 。
// load script to populate offline page list
if (document.getElementById('cachedpagelist') && 'caches' in window) {
var scr = document.createElement('script');
scr.src = '/js/offlinepage.js';
scr.async = 1;
document.head.appendChild(scr);
}
/js/offlinepage.js locates the most recent cache by version name, 取到所有 URL的key的列表，移除所有无用 URL，排序所有的列表并且把他们加到 ID 为cachedpagelist的 DOM 节点中：
// cache name
const
CACHE = '::PWAsite',
offlineURL = '/offline/',
list = document.getElementById('cachedpagelist');
// fetch all caches
window.caches.keys()
.then(cacheList => {
// find caches by and order by most recent
cacheList = cacheList
.filter(cName => cName.includes(CACHE))
.sort((a, b) => a - b);
// open first cache
caches.open(cacheList[0])
.then(cache => {
// fetch cached pages
cache.keys()
.then(reqList => {
let frag = document.createDocumentFragment();
reqList
.map(req => req.url)
.filter(req => (req.endsWith('/') || req.endsWith('.html')) && !req.endsWith(offlineURL))
.sort()
.forEach(req => {
let
li = document.createElement('li'),
a = li.appendChild(document.createElement('a'));
a.setAttribute('href', req);
a.textContent = a.pathname;
frag.appendChild(li);
});
if (list) list.appendChild(frag);
});
})
});
上面这些代码demo在 https://github.com/craigbuckler/pwa-retrofit
上面只简单讲了 Service Worker 如何工作。我们会发现有很多问题需要我们进一步解决：
上面只列出了三个明显的问题，还有很多问题是没有考虑到的。如果让我们自己来解决这些问题，不仅是工作量很大，而且也很难写出生产环境可用的 Service Worker。
既然如此，我们最好是站在巨人的肩膀上，这个巨人就是谷歌。workbox 是由谷歌浏览器团队发布，用来协助创建 PWA 应用的 JavaScript 库。当然直接用 workbox 还是太复杂了，谷歌还很贴心的发布了一个 webpack 插件，能够自动生成 Service Worker 和 静态资源列表 - workbox-webpack-plugin。
只需简单一步就能生成生产环境可用的 Service Worker ：
const { GenerateSW } = require('workbox-webpack-plugin')
new GenerateSW()
京公网安备 11010802035086号