pwa demo

最新推荐文章于 2024-05-28 09:44:31 发布

niuyueyang

最新推荐文章于 2024-05-28 09:44:31 发布

阅读量330

点赞数 2

分类专栏： js 文章标签： pwa

本文链接：https://blog.csdn.net/qq_33332184/article/details/103069281

版权

js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./index.css"/>
</head>
<body>
    <div class="app">hello pwa</div>
    <script>
        navigator.serviceWorker.register('./sw.js',{
            scope:'/'
        }).then(registation=>{
            console.log(registation)
        },error=>{
            console.log(error)
        })
    </script>
</body>
</html>

sw.js

const CACHE_NAME = 'cache_v2'
//安装态（如果文件没有改变，默认不调用install事件）
self.addEventListener('install',event=>{
    console.log('install',event)
    event.waitUntil(self.skipWaiting());//强行激活
    event.waitUntil(caches.open(CACHE_NAME).then(cache=>{
        cache.addAll([
            '/',
            './index.css'
        ])
    }))
})
//激活态（如果文件没有改变，默认不调用activate事件）
self.addEventListener('activate',event=>{
    console.log('activate',event);
    // event.waitUntil(self.clients.claim());
    //清理之前缓存
    event.waitUntil(caches.keys().then(cachesNames=>{
        return Promise.all(cachesNames.map(cacheName=>{
            if(CACHE_NAME!==cacheName){
                return caches.delete(cacheName);
            }
        }))
    }))
})
//捕获资源请求
self.addEventListener('fetch',event=>{
    console.log('fetch',event);
    event.respondWith(caches.open(CACHE_NAME).then(cache=>{
        return cache.match(event.request).then(response=>{
            if(response){
                return response;
            }
            return fetch(event.request).then(response=>{
                cache.put(event.request,response.clone());
                return response;
            })
        })
    }))
})

niuyueyang

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pwa demo

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./index.css"/></head>...
复制链接

扫一扫

专栏目录