js操作serviceWorker缓存静态文件

Posted 叶家伟的博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js操作serviceWorker缓存静态文件相关的知识，希望对你有一定的参考价值。

js操作serviceWorker缓存静态文件

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

  1. 先看下效果

  2. 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>

  3. 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缓存静态文件的主要内容，如果未能解决你的问题，请参考以下文章

我如何在Service Worker中缓存动态URL？它与预缓存有关系吗？我正在使用ReactJS默认serviceWorker

React脚手架工程化项目里ServiceWorker.js文件作用

仅在离线时使用 ServiceWorker 缓存

华为OD机试 - 静态扫描最优成本（JS）

vue 中使用 Service Worker 遇到的问题

Service Worker 正在缓存文件，但从未触发 fetch 事件