PWA之 Service worker

const self = this;
const HOST_NAME = location.host;
const VERSION_NAME = ‘CACHE-v5‘;
const CACHE_NAME = HOST_NAME + ‘-‘ + VERSION_NAME;
const CACHE_HOST = [HOST_NAME, ‘0.plus‘, ‘icms.biyong.io‘];

var cacheList = [
    "./css/common.css",
    "./css/discover.css",
    "discover.html",
]

const onInstall = function (event) {
    console.log(‘触发install事件--------‘);
    // 打开一个缓存空间，将相关需要缓存的资源添加到缓存里面
    event.waitUntil(
        caches
            .open(CACHE_NAME)
            .then(function (cache) {
                self.skipWaiting();
                console.log(‘Install success---------------‘);
                return cache.addAll(cacheList)
            })
    );
};

// 当浏览器解析完sw文件时，serviceworker内部触发install事件
self.addEventListener(‘install‘, onInstall);

const onActive = function (event) {
    event.waitUntil(
        caches
            .keys()
            .then(function (cacheNames) {
                return Promise.all(
                    cacheNames.map(function (cacheName) {
                        // active事件中通常做一些过期资源释放的工作
                        if (CACHE_NAME.indexOf(cacheName) === -1) {
                            return caches.delete(cacheName);
                        }
                    })
                );
            })
            .then(function () {
                console.log(‘active claim success 2-------------‘);
                self.clients.claim();
            })
    );
};

// 如果当前浏览器没有激活的service worker或者已经激活的worker被解雇，
// 新的service worker进入active事件
self.addEventListener(‘activate‘, onActive);

const onFetch = function (event) {
    event.respondWith(handleFetchRequest(event.request));
};

const handleFetchRequest = function (req) {
    const request = req;
    if (isCORSRequest(req.url, HOST_NAME)) {
        const request = new Request(req.url, {mode: ‘no-cors‘});
    }
    return caches.match(request)
        .then(function (response) {
            if (response) {
                return response;
            } else {
                console.log(‘缓存没找到‘ + request.url);
            }
        })

    const request = req;
    if (isCORSRequest(req.url, HOST_NAME)) {
        const request = new Request(req.url, {mode: ‘no-cors‘});
    }
    return fetch(request)
        .then(function (response) {
            console.log(request.url + ‘请求回来了‘);
            // online: Return the response if need
            if (isNeedCache(req) && isValidResponse(response)) {
                const clonedResponse = response.clone();
                caches
                    .open(CACHE_NAME)
                    .then(function (cache) {
                        cache.put(request, clonedResponse);
                        console.log(‘添加缓存: ‘ + request.url);
                    })
            }
            return response;
        })
        .catch(error => {
            // offline: Return the caches
            console.log(‘fetch ‘ + request.url + ‘ fail: ‘ + error.message);
            return caches.match(request)
                .then(function (response) {
                    if (response) {
                        return response;
                    } else {
                        console.log(‘缓存没找到‘ + request.url);
                    }
                })
        })

};

self.addEventListener(‘fetch‘, onFetch);