Progressive Web App 是由谷歌提出推广的,在移动端利用提供的标准化框架,在网页应用中实现和原生应用相近的用户体验。
1、Installability(可安装性):添加到主屏
2、App Shell:第一次渲染渲个壳、等异步数据来了再填充
3、Offline Web App (离线能力)
4、Re-engageable:推送通知的能力。推送通知依赖Service Worker与HTTP Push,不过默认的支持是GCM(Google提供的云服务)
将Web和App的技术相结合:
- 不需要安装
- 快速加载
- 推送消息
- 桌面图标
- 全屏体验
Web App Manifest
App shell
Service worker
push Notifion
Service Worker 是什么? service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本。
要求:需要HTTPS本地调试localhost 浏览器支持(目前andorid的chrome部分支持)
sw里面的一些简单变量说明
- self: 表示 Service Worker 作用域, 也是全局变量
- self.skipWaiting: 表示强制当前处在 waiting 状态的脚本进入 activate 状态
- self.clients.claim():获取到客户端页面的控制权
1.sw 注册:检查 Service Worker API 是否可用,如果可用,则在页面加载后注册位于 /sw.js 的服务工作线程
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
// registration failed
console.log('ServiceWorker registration failed: ', err);
});
});
}
2.sw安装:执行以下步骤
a.打开缓存
b.缓存文件
c.确认文件是否缓存
//SW安装
self.addEventListener('install', e=> {
console.log('[sw]ServiceWorker Install');
e.waitUntil(
caches.open(staticCache).then(function(cache) {
return cache.addAll(filesToCache)
.then(function () {
console.log('[sw]All files are cached');
return self.skipWaiting();//跳过等待直接activate
})
.catch(function (error) {
console.log('[sw]Failed to cache', error);
})
})
);
});
3.sw激活: 如果你的 service worker 已经被安装,但是刷新页面时有一个新版本的可用,新版的 service worker 会在后台安装,但是还没激活。当不再有任何已加载的页面在使用旧版的 service worker 的时候,新版本才会激活。一旦再也没有更多的这样已加载的页面,新的 service worker 就会被激活。
//SW激活
self.addEventListener('activate', function(e) {
console.log('[sw]ServiceWorker Activate');
var arr = [htmlCache,staticCache];
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (arr.indexOf(key) === -1) {
console.log('[sw]ServiceWorker Removing old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim(); //更新客户端取得页面控制权
});
4.sw fetch缓存和返回请求:
self.addEventListener('fetch', e=> {
// console.info('Event: Fetch');
var request = e.request;
let url = e.request.url
e.respondWith(
//If request is already in cache, return it
caches.match(request).then(function(response) {
if (response) {
console.log('[sw]Found response in cache:', url);
return response;
}
//if request is not cached, add it to cache
console.log('[sw]No response found in cache. About to fetch from network...');
return fetch(request).then(function(response) {
var responseToCache = response.clone();
//请求和响应流只能被读取一次。为了给浏览器返回响应以及把它缓存起来,我们不得不克隆一份。所以原始的会返回给浏览器,
//克隆的会发送到缓存中。它们都是读取了一次
caches.open(htmlCache).then(
function(cache) {
cache.put(request, responseToCache).catch(function(err) {
console.warn(request.url + ': ' + err.message);
});
});
console.log('[sw]Response from network is:', url);
return response;
});
})
);
});
caches.match(event.request) 允许我们对网络请求的资源和 cache 里可获取的资源进行匹配,查看是否缓存中有相应的资源
如果没有在缓存中找到匹配的资源,你可以告诉浏览器对着资源直接去fetch 默认的网络请求: fetch(event.request)
如果没有在缓存中找到匹配的资源,同时网络也不可用,你可以用 match() 把一些回退的页面作为响应来匹配这些资源,比如: caches.match('/offline.html');
示例链接:速卖通
示例链接:https://progressive-web-application.herokuapp.com/
示例链接:线上环境 m.tomtop.com
api:https://googlechrome.github.io/sw-toolbox/