js操作serviceWorker缓存静态文件

serviceWorker的作用就是用来做离线应用的，在手机端程序中用的较多

先看下效果

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            background-image: url("./img/alt.png");
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- <img src="./img/alt.png" alt=""> -->
    <div class="box"></div>
    <script>
        if(navigator.serviceWorker) {
            navigator.serviceWorker.register('./sw.js').then(function(res){
                console.log(res.scope + "->" + "service worker注册成功");
            }).catch(function(err){
                console.log(err);
            })
        }else{
            alert("你的浏览器不支持serviceWorker");
        }
    </script>
</body>
</html>

sw.js

var version = "v1::"; // 设置版本号

self.addEventListener("install", function (event) { // serviceworker第一次加载的时候调用，可以在此时缓存静态资源
    event.waitUntil(
        // caches帮助我们缓存资源
        caches
            .open(version + 'fundamentals')
            .then(function (cache) {
                // 将列出的文件缓存起来
                return cache.addAll([
                    '/',
                    '/img/alt.png'
                ]);
            })
            .then(function () {
                console.log('缓存完毕');
            })
    );
});

self.addEventListener('activate', function (event) { // install方法调用完毕后就调用此方法，主要用来删除过期的缓存

    event.waitUntil(
        caches
            // keys方法用来获取缓存版本号
            .keys()
            .then(function (keys) {
                // 下面的方法用来删除不是以version开头的缓存版本
                return Promise.all(
                    keys
                        .filter(function (key) {
                            return !key.startsWith(version);
                        })
                        .map(function (key) {
                            return caches.delete(key);
                        })
                );
            })
            .then(function () {
                console.log('WORKER: 激活完毕.');
            })
    );
})

self.addEventListener('fetch', function (event) { // 请求外部资源时调用

    // 只捕获get请求
    if (event.request.method !== 'GET') {
        // 只让get请求去缓存中查找
        console.log('WORKER: 被拦截的api.', event.request.method, event.request.url);
        return;
    }

    // 让get请求取缓存中查找资源
    event.respondWith(
        caches
            .match(event.request)
            .then(function (cached) {
                // 将缓存中的资源立即返回，并且同时去服务器下载最新的资源存到缓存中
                var networked = fetch(event.request)
                    .then(fetchedFromNetwork, unableToResolve)
                    .catch(unableToResolve);

                // 通过caches.match这个方法，如果缓存中有资源，直接就返回了，如果没有转向网络
                console.log('WORKER: fetch event', cached ? '(cached)' : '(network)', event.request.url);
                return cached || networked;

                function fetchedFromNetwork(response) {
                    // 从网络中加载资源
                    var cacheCopy = response.clone();
                    console.log('WORKER: 从网络中拉取的资源地址.', event.request.url);
                    caches
                        // 存储资源
                        .open(version + 'pages')
                        .then(function add(cache) {
                            cache.put(event.request, cacheCopy);
                        })
                        .then(function () {
                            console.log('WORKER: 从网络中拉取的资源已经缓存', event.request.url);
                        });
                    return response;
                }

                // 既不能从网络中获取资源又不能从缓存中获取，就会调用此方法
                function unableToResolve() {
                    console.log('WORKER: 获取资源失败.');
                    return new Response('<h1>Service Unavailable</h1>', {
                        status: 503,
                        statusText: 'Service Unavailable',
                        headers: new Headers({
                            'Content-Type': 'text/html'
                        })
                    });
                }
            })
    );
})

js操作serviceWorker缓存静态文件

js操作serviceWorker缓存静态文件

猜你喜欢