image.png本文由云 + 社区发表
传统的 Web 网页存在以下几个问题：
Native app：
2016 年 Google I/O 大会上提出一个 Next Web Generation 的概念。PWA 是在传统 Web 应用的基础上，结合 Manifest 和 service worker，完善 Web 应用的一些能力，比如：
Web App Manifest 技术实现了将 PWA 网页应用 添加至桌面的功能，但该项技术目前仍处于实验性阶段，各浏览器支持度不高
image.png
PWA 站点部署的 manifest.json 文件满足以下条件时会自动显示横幅：
- short\\_name （主屏幕显示）
- name （安装横幅显示）
- icons （必须包含一个 mime 类型为 image/png 的图标声明）
- start\\_url （应用启动地址）
- display （必须为 standalone 或 fullscreen）
- 站点注册 Service Worker。
- 站点支持 HTTPS 访问。
- 同一浏览器中站点至少被访问两次，间隔至少为 5 分钟。
PWA 应用的离线体验、定期的后台同步以及推送通知等功能的实现依赖于 Service Worker 技术，下图为目前 SW 技术的支持度。
SW 具有以下特征：
Service Worker 是基于注册、安装、激活等步骤
注册
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/jslearning/sw.js') // 默认作用域为jslearning下，也可以通过设置scope参数进行设置
.then(function (registration) {
// 注册成功
console.log('ServiceWorker registration successful with scope: ', registration.scope);
})
.catch(function (err) {
// 注册失败:(
console.log('ServiceWorker registration failed: ', err);
});
});
}
安装
this.addEventListener('install', function(event) {
console.log('V1 installing…');
//需要缓存的重要的高优先级资源
var vipUrlsToPrefetch = [
'./index.html'
];
//次重要的资源
var urlsToPrefetch = [
'./icon.png'
];
event.waitUntil(
caches.open(OFFLINE_CACHE_NAME).then(function(cache) {
//urlsToPrefetch非重要资源，即使有资源加载失败也不影响Service Worker安装
cache.addAll(urlsToPrefetch);
//vipUrlsToPrefetch中资源全部请求成功，Service Worker安装事件才顺利完成，可以进入激活事件
return cache.addAll(vipUrlsToPrefetch);
})
);
});
激活
//Service Worker激活事件
this.addEventListener('activate', function(event) {
//在激活事件中清除非当前版本的缓存避免用户存储空间急剧膨胀
event.waitUntil(caches.keys().then(function(cacheNames) {
console.log('V1 activate');
return Promise.all(cacheNames.map(function(cacheName) {
if (cacheName !== OFFLINE_CACHE_NAME) {
if(cacheName.indexOf(OFFLINE_CACHE_PREFIX) != -1) {
return caches.delete(cacheName);
}
}
}));
}));
});
Service Worker 缓存策略大部分在 fetch 与 install 时间中定义，对于某些固定不变的静态资源，可以在 Service Worker 初次安装的 install 事件中将其缓存，但资源过大或者网络不佳都会造成资源并未全部下载成功而导致 Service Worker 安装被中断安装失败。SW 主要有以下几类缓存策略：
// 渐进式缓存
var addToCache = function(req) {
return fetch(req.clone()).then(function(resp) {
var cacheResp = resp.clone();
if (!resp.ok) {
return resp;
}
caches.open(OFFLINE_CACHE_NAME).then(function(cache) {
cache.put(req.clone(), cacheResp);
});
return resp;
});
};
this.addEventListener('fetch', function(event) {
event.respondWith(
caches.open(OFFLINE_CACHE_NAME).then(function(cache) {
return cache.match(event.request);
}).then(function(response) {
if (response) {
return response;
} else {
return addToCache(event.request);
}
})
);
});
PWA 应用可以通过开发者工具中的 Application 进行查看调试，如下图所示：
优点
缺点
此文已由作者授权腾讯云 + 社区在各渠道发布
获取更多新鲜技术干货，可以关注我们腾讯云技术社区 - 云加社区官方号及知乎机构号
