首页 > 其他 > 详细

typecho添加servicework

时间:2021-08-30 00:24:17      阅读:31      评论:0      收藏:0      [点我收藏+]

主题。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、结果:

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

typecho添加servicework

原文:https://www.cnblogs.com/POTUS/p/15202661.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!