service worker

  service worker

    使用步骤

    <script>

       

        // 1 在网页加载完成的时候 注册 service worker

        window.addEventListener('load', () => {

            // 2 能力检测

            if ('serviceWorker' in navigator) {

                navigator.serviceWorker.register('./sw.js').then(registration => {

                    console.log(registration);

                }).catch(err=>{

                    console.log(err);

                })

            }

        })

       

 self.addEventListener('install', event => {

     

    console.log('install',event);

    //  会让 service  worker 跳过等待 直接激活进入到 activate 状态

    //  self.skipWaiting()

    // 等待 skipWaiting 结束 才进入到 activate

    event.waitUntil(self.skipWaiting())

     

 })

 self.addEventListener('activate', event => {

    console.log('activate',event);

    // 表示 service worker 激活后, 立即获取控制权

    event.waitUntil(self.clients.claim())

})

 

//   fetch 事件会在请求发送的时候触发

self.addEventListener('fetch', event => {

    console.log('fetch',event);

})

---------------

fetch

   // window 对象上有fetch属性

        fetch('./data.json').then(res=>{

            // res 请求得到的响应内容， 二进制的流

            // 调用 res.json()方法 可以把数据变成 json 格式

            // console.log(res);

            return res.json()

        }).then( data =>{

            console.log(data);

        })

       

 --------------------