service workers离线应用

最新推荐文章于 2024-06-27 23:17:02 发布

zhener09

最新推荐文章于 2024-06-27 23:17:02 发布

阅读量250

点赞数

本文链接：https://blog.csdn.net/sinat_41747081/article/details/100513597

版权

service workers有一大好处就是在网络断开时依然能请求到资源，因为该资源并非是发送请求到server获得的，而是从缓存中（CacheStorage)拿到的，下面是一个小的demo。
serviceworker.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>
    <link href="./index.css" rel="stylesheet">
</head>
<body>
    serviceworker离线应用测试
</body>
<script src="index.js"></script>
</html>

index.css:

body {
    background: #fefefe;
}

index.js:

if (navigator.serviceWorker) {
    // 注册文件的作用域为当前目录下
    navigator.serviceWorker.register('./serviceworker.js', {scope: './'})
    .then(function (reg) {
        console.log('成功注册ServiceWorker');
    })
    .catch(function (e) {
        console.log('注册ServiceWorker失败');
    })
} else {
    console.log('当前环境不支持serviceWorker');
}

serviceworker.js:

// serviceworker生命周期后安装、激活
self.addEventListener('install', function(e) {
    e.waitUntil(
        // 给缓存起个名字
        caches.open('chche-name')
        .then(function (cache) {
            console.log('打开缓存了');
            // 将需要servicehttpservice缓存的文件放入数组中
            return cache.addAll([
                './index.js',
                './index.css',
                './serviceworker.html'
            ])
        })
    )
})
// 所有请求的文件都会经过fetch（捕获），如果缓存中有该请求，下次请求会直接从缓存中拿
// 否则会重新向server发送请求
self.addEventListener('fetch', function (e) {
    e.respondWith(
        caches.match(e.request).then(function (res) {
            if (res) {
                console.log(77, res);
                return res;
            } else {
                fetch(url).then(function (res) {
                    if (res) {
                        // 将请求的资源仿佛cachestorage中
                        caches
                    } else {
                        // 没有数据
                    }
                })
            }
        })
    )
})

最后结果如下图所示：
在这里插入图片描述
当刷新页面的时候，请求的资源可以直接从CacheStorage中拿到：

当网络断开时，这些资源依然可以直接从CacheStorage中拿到：

zhener09

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
service workers离线应用

service workers有一大好处就是在网络断开时依然能请求到资源，因为该资源并非是发送请求到server获得的，而是从缓存中（CacheStorage)拿到的，下面是一个小的demo。serviceworker.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...
复制链接

扫一扫