Authored by 毕凯

PWA 基本可用

... ... @@ -6,5 +6,4 @@ public/static/yas-jssdk
public/js/home/jquery.upload.js
public/js/activity/live
public/build/dll
sw.js
workbox*.js
... ...
/* eslint-env worker */
importScripts('workbox-sw.prod.v2.1.2.js');
// 不得已写 es5 的代码,忽略 var
/* eslint-disable vars-on-top */
var precacheStaticFile = [
'/index.css',
'/common.css',
... ... @@ -8,9 +11,21 @@ var precacheStaticFile = [
var customCacheDomain = [
'cdn.yoho.cn',
'static.yhbimg.com'
]
];
// 工具函数
function iSInCustomCacheDomain(domain) {
var isIn = false;
customCacheDomain.forEach(function(d) {
if (domain.indexOf(d) >= 0) {
isIn = true;
}
});
return isIn;
}
function parseQs(str) {
var vars = {},
hashes,
... ... @@ -27,21 +42,9 @@ function parseQs(str) {
}
}
return vars;
};
function iSInCustomCacheDomain(domain) {
var isIn = false;
customCacheDomain.forEach(function(d) {
if (domain.indexOf(d) >= 0) {
isIn = true
}
})
return isIn;
}
var qs = parseQs(self.location.search.substr(1))
var qs = parseQs(self.location.search.substr(1));
// WorkboxSW
var workboxSW = new self.WorkboxSW({
... ... @@ -57,13 +60,13 @@ var precacheFile = [
}
];
precacheFile = precacheFile.concat(precacheStaticFile.map(function (file) {
precacheFile = precacheFile.concat(precacheStaticFile.map(function(file) {
// 根据业务自定义资源路径
var url = self.location.protocol + qs.staticServer + file + '?t=' + qs.t;
return {
url: url
}
};
}));
workboxSW.precache(precacheFile);
... ... @@ -79,7 +82,8 @@ workboxSW.precache(precacheFile);
// });
self.addEventListener('error', event => {
console.error('error', event)
console.error('error', event);
// 上报错误信息
// 常用的属性:
// event.message
... ... @@ -87,22 +91,23 @@ self.addEventListener('error', event => {
// event.lineno
// event.colno
// event.error.stack
})
});
self.addEventListener('unhandledrejection', event => {
console.error('unhandledrejection', event)
console.error('unhandledrejection', event);
// 上报错误信息
// 常用的属性:
// event.reason
})
});
self.addEventListener('fetch', function (event) {
self.addEventListener('fetch', function(event) {
var domain = event.request.url.split('/')[2];
var shouldCache = iSInCustomCacheDomain(domain);
// 使用域名白名单进行缓存
if (shouldCache) {
event.respondWith(
caches.match(event.request).then(function (response) {
caches.match(event.request).then(function(response) {
// 如果 Service Worker 有自己的返回,就直接返回,减少一次 http 请求
if (response) {
return response;
... ... @@ -114,16 +119,16 @@ self.addEventListener('fetch', function (event) {
return fetch(request, {
mode: 'cors',
credentials: 'same-origin'
}).then(function (httpRes) {
}).then(function(httpRes) {
// 请求失败了,直接返回失败的结果就好了。。
if (!httpRes || httpRes.status !== 200) {
return httpRes;
}
// 请求成功的话,将请求缓存起来。
let responseClone = httpRes.clone();
var responseClone = httpRes.clone();
caches.open('custom-cache').then(function (cache) {
caches.open('custom-cache').then(function(cache) {
cache.put(event.request, responseClone);
});
... ... @@ -133,3 +138,5 @@ self.addEventListener('fetch', function (event) {
);
}
});
/* eslint-enable vars-on-top */
... ...