html5离线缓冲（service worker）

最新推荐文章于 2024-09-09 09:16:44 发布

原创最新推荐文章于 2024-09-09 09:16:44 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #javascript

html css js 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了如何在HTML中使用Service Worker实现简单的网站缓存管理，包括注册Service Worker、定义缓存策略和处理fetch事件。通过逐步添加资源到缓存，展示了基础进度加载示例。

最简单示例程序

在index.html中添加

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ',  registration.scope);
  }).catch(function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
  });
}
</script>

和index.html同位置放置sw.js

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/index.html',
  '/jquery.min.js',
  '/files/pa.png',
  '/files/pc.png',
  '/files/pc1.png',
  '/files/pc2.png',
  '/files/pc3.png'
];

var num = 0;
var PRO = null;
 
self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        //return cache.addAll(urlsToCache);
        getnext(cache);
        return PRO;
      })
  );
});

function getnext(cache){
      var pro = cache.add(urlsToCache[num]);
      num++;
      
      if(num < urlsToCache.length){
          pro.then(() => {
    
             console.log("download: "+num+" "+Date.now());
             getnext(cache);

          });
      }
      else{
          PRO = pro;
      }
}

this.addEventListener('fetch', function (event) {
  //console.log(event.request.url);
  event.respondWith(
    caches.match(event.request).then(res => {
      return res ||
        fetch(event.request)
          .then(responese => {
            console.log(event.request.url+"need download!");
            const responeseClone = responese.clone();
            caches.open(CACHE_NAME).then(cache => {
              cache.put(event.request, responeseClone);
            })
            return responese;
          })
          .catch(err => {
            console.log(err);
          });
    })
  )
});

在install中，我用cache.add代替了cache.addall，这样是为了能有一个基本的加载进度显示。