cacheStorage緩存及離線開發

案例地址:https://zhangxinxu.github.io/https-demo/cache/start.html

我們直接看一個例子吧，如下HTML和JS代碼：

<h3>一些提示信息</h3>
<ul>
    <li>瀏覽器是否支持：<span id="isSupport"></span></li>
    <li>service worker是否注冊成功：<span id="isSuccess"></span></li>
    <li>當前注冊狀態：<span id="state"></span></li>
    <li>當前service worker狀態：<span id="swState"></span></li>
</ul>

<script src="./static/jquery.min.js"></script>
<script>
if ('serviceWorker' in navigator) {
    $('#isSupport').text('支持');

    // 開始注冊service workers
    navigator.serviceWorker.register('./sw-demo-cache.js', {
        scope: './'
    }).then(function (registration) {
        $('#isSuccess').text('注冊成功');

        var serviceWorker;
        if (registration.installing) {
            serviceWorker = registration.installing;
            $('#state').text('installing');
        } else if (registration.waiting) {
            serviceWorker = registration.waiting;
            $('#state').text('waiting');
        } else if (registration.active) {
            serviceWorker = registration.active;
            $('#state').text('active');
        }
        if (serviceWorker) {
            $('#swState').text(serviceWorker.state);
            serviceWorker.addEventListener('statechange', function (e) {
                $('#swState').append('&emsp;狀態變化為' + e.target.state);
            });
        }
    }).catch (function (error) {
        $('#isSuccess').text('注冊沒有成功');
    });
} else {
    $('#isSupport').text('不支持');
}
</script>




sw-demo-cache.js這個JS中復制如下代碼：

var VERSION = 'v1';

// 緩存
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(VERSION).then(function(cache) {
      return cache.addAll([
        './start.html',
        './static/jquery.min.js',
        './static/mm1.jpg'
      ]);
    })
  );
});

// 緩存更新
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          // 如果當前版本和緩存版本不一致
          if (cacheName !== VERSION) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

// 捕獲請求並返回緩存數據
self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).catch(function() {
    return fetch(event.request);
  }).then(function(response) {
    caches.open(VERSION).then(function(cache) {
      cache.put(event.request, response);
    });
    return response.clone();
  }).catch(function() {
    return caches.match('./static/mm1.jpg');
  }));
});