PWA组成技术-Service Worker

最新推荐文章于 2021-01-07 19:11:33 发布

memedadexixaofeifei

最新推荐文章于 2021-01-07 19:11:33 发布

阅读量163

点赞数

分类专栏： ServerWorker PWA

本文链接：https://blog.csdn.net/memedadexixaofeifei/article/details/104299123

版权

PWA 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

ServerWorker

1 篇文章 0 订阅

订阅专栏

Service Worker

Promise

fetch

cache API

Notification API

Service Worker服务工作线程

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>Learn PWA</title>
</head>
<body>
    <h1>来了，老弟</h1>
    <script>
        // 注册ServerWorker， 
        // ServerWorker有两个参数 参数一：外部脚本的地址 参数二：选项对象，其中 scope 代表可控制页面的路径，默认当前路径，根路径代表控制所有页面
        navigator.serviceWorker.register('./sw.js',{scope:'/'})
        // 返回一个Promise对象
        .then(res => {
            console.log('====================================');
            console.log(res);
            console.log('====================================');
        },
        err => {
            console.error(err)
        })
    </script> 
</body>
</html>

sw.js脚本文件

// ServerWorker中不能访问Dom, window,loaction等上下文对象
// 可以访问self，代表这个ServerWorker的全局作用域对象

// ServerWorker的生命周期，install、activate、fetch
self.addEventListener('install',event => {
    console.log('====================================');
    console.log('install', event);
    console.log('====================================');
    //  event.waitUntil事件执行后才会执行 后面的周期
    //  self.skipWaiting()强制停止旧的ServerWorker,开启新的ServerWorker
    event.waitUntil(self.skipWaiting())
})
self.addEventListener('activate',event => {
    console.log("====================================");
    console.log("activate", event);
    console.log("====================================");
    // self.clients.claim() 指ServerWorker控制的所有页面，能够让页面在首次加载后能够让页面同样受到ServerWorker的控制
    // 默认情况下，首次不受控制
    event.waitUntil(self.clients.claim())
})
self.addEventListener('fetch',event => {
    console.log("====================================");
    console.log("fetch", event);
    console.log("====================================");
})