Skip to content

Service Worker

特点

** (实际上就是浏览器提供的一组JavaScript API)**

1、拥有独立线程,不会阻塞主线程

2、最重要的功能就两个,一个是对网页的离线缓存,另一个是对浏览器请求的拦截

【不可以访问DOM】

Service Worker的代码单独放在一个js文件中

js
// 这里是要检查用户的浏览器是否支持Service Worker
if ('serviceWorker' in navigator) { // Service Worker就是navigator的一个属性对象
    // 添加一个网页载入事件的监听器
    window.addEventListener('load', function () {
        //网页载入完成,把service-worker.js文件注册到网页中,实现缓存功能的代码在service-worker.js
        navigator.serviceWorker.register('/service-worker.js')
    });
}

生成配置文件的webpack插件

workbox-webpack-plugin