typecho添加servicework

2021-08-29 15:33:17 阅读：260 来源： 互联网

标签：function servicework return url request js endsWith typecho 添加

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

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

标签：function,servicework,return,url,request,js,endsWith,typecho,添加
来源： https://www.cnblogs.com/POTUS/p/15202661.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

typecho添加servicework