主题。webstack

1、在主题目录下/js/bootstrap.min.js文末尾添加

1 if('serviceWorker' in navigator) {  
2     //注册上一步创建的js文件
3     navigator.serviceWorker  
4         .register('../outwork.js')  
5         .then(function() { console.log('Service Worker Registered'); });  }

outwork.js是功能主文件，前面是2个点一个斜杠。少一个点的话，路径不对。

2、在网站根目录添加outwork.js文件。代码借鉴来自：开源实验室

var cacheName = 'navv-service-worker-v0.0.1';
cacheName = "2021-08-29-09-10-52"

var filesToCache = [
'./admin/img/editor@2x.png',   //  随便写的，还不知这些文件的作用。写太多，写几十行的话，serviceWorker报错
'./admin/img/editor.png',
'./admin/img/noscreen.png',

];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('activate', function(e) {  
  console.log('[ServiceWorker] Activate');  
  e.waitUntil(  
    caches.keys().then(function(keyList) {  
      return Promise.all(keyList.map(function(key) {  
        console.log('[ServiceWorker] Removing old cache', key);  
        if (key !== cacheName) {  
          return caches.delete(key);  
        }  
      }));  
    })  
  );  
});


if (typeof String.prototype.endsWith != 'function') {
 String.prototype.endsWith = function (str){
    return this.toLowerCase().slice(-str.length) == str;
 };
}

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(respond){
      return respond || fetch(e.request)
        .then(function(res){
          return caches.open(cacheName).then(function(cache){
            if (e.request.url.endsWith("jpg") ||
                e.request.url.endsWith("jpeg") ||
                e.request.url.endsWith("png") ||
                e.request.url.endsWith("bmp") ||
                e.request.url.endsWith("gif") ||
                e.request.url.endsWith("css") ||
                e.request.url.endsWith("js") ||
                e.request.url.endsWith("woff")){
              cache.put(e.request.url, res.clone()); 
            }
            return res;
          });
          // return res;
        })
       // .catch(function(){
        //  return caches.match("outline.html");  // 还不知这些的作用。
       //});
    })
  )
});

 3、结果：

      可以实现缓存管理，但是离线页面还是没有。