ServiceWorker入门

用户2845596

发布于 2021-01-21 15:10:48

4220

发布于 2021-01-21 15:10:48

文章被收录于专栏：劝学劝学

使用前提

站点必须是https的，不过本地开发若是localhost访问，则本地可以是http协议
浏览器支持情况，数据来源，caniuse.com
SW里面的API要求是异步的，所以localStorage不能使用，下面的demo可以看到大量的promise

基础使用

scope

scope作用域，一开始以为是同静态资源的作用域，后来才个发现这个作用域是hmtl的作用域，即只要html页面在这个作用域里，那页面的请求就会被fetch回调捕捉到。

下面的sw.js的路径是/，或是把sw.js的Header加上``头，当前涉及到运维的事都会比较麻烦啦。所以就是前端把sw.js放在/下会简单些。

设置成功后就输出这样子:reg success with scope https://domain.com/sw/

navigator.serviceWorker.register('/sw.js', {scope: '/'})
    .then(reg => {
        console.log('reg success with scope', reg.scope)
    })
    .catch(err => {
        console.log('serviceWorker reg fail', err)
    })
复制代码

/**
 * 
 * 改了这个文件，在浏览器里禁用了缓存，sw.js也不会再加载，在index.html里加上时间戳就会重新加载
 */
const VERSION = 'v2'

self.addEventListener('install', onInstall)
self.addEventListener('activate', onActivate)
self.addEventListener('fetch', onFetch)


function onInstall(event) {
    // waitUntil 的第一个参数是Promise
    event.waitUntil(
        Promise.all([
            self.skipWaiting(),
            // caches,不是cache
            caches.open(VERSION).then(cache => {
                // 在某一个cache集合里添加
                return cache.addAll([
                    // 这里的路径是相对于reg的scope的，而是网站的root
                    // 所以推荐写绝对路径
                    '/0.0.js',
                    '/2.2.js',
                    '/3.3.js',
                    '/4.4.js',
                ])
            })
        ])
    )
}

function onActivate(event) {
    let cacheWhiteList = [VERSION]

    event.waitUntil(
        caches.keys().then(function (keys) {
            return Promise.all(keys.map(function(key) {
                if (cacheWhiteList.indexOf(key) === -1) {
                    // 删除某一个Cache集合
                    return caches.delete(key).then(suc => {
                        return clients.claim()
                    })
                }
                // 强制更新service worker
                return clients.claim()
            }))
        })
    )
}

function onFetch(event) {
    let url = new URL(event.request.url)
    if (url.pathname !== event.request.pathname)) {
        return event.respondWith(
            fetch(event.request)
        )
    }

    // index.html的请求也会进来
    event.respondWith(
        caches.match(event.request).then(resp => {
            return resp || fetch(event.request, {
                credentials: 'omit'   // 不发送cookie
            }).then(response => {
                const cacheKey = VERSION
                return caches.open(cacheKey).then(cache => {
                    // put 得是某一个cache
                    cache.put(event.request, response.clone()).then(() => {
                    }).catch((e) => {
                    })
                    return response
                })
            })
        })
    )
}
复制代码