JavaScript新知：service workers-js教程-PHP中文網

JavaScript新知：service workers

阿神

發布： 2017-01-24 14:30:41

原創

1401 人瀏覽過

前端技術正在像桌面技術靠近，其中一項很重要的就是service workers，它讓HTML App離線工作成為可能。本文會以一個簡單的案例程式碼來說明這項技術。我使用的工具：

1.瀏覽器版本為chrome 55

2.伺服器系統：Node 5.0

我們需要準備3個檔案：

touch  index.html b.html sw.js

登入後複製

其中檔案index.html內容為：

  <script>
    if (&#39;serviceWorker&#39; in navigator) {
      navigator.serviceWorker.register(&#39;/sw.js&#39;);
    }    </script>

登入後複製

它註冊一個

其中檔案index.html內容為：

   const cacheName = &#39;v1::static&#39;;    self.addEventListener(&#39;install&#39;, e => {
      e.waitUntil(
        caches.open(cacheName).then(cache => {          return cache.addAll([            &#39;/&#39;,
          ]).then(() => self.skipWaiting());
        })
      );
    });    self.addEventListener(&#39;fetch&#39;, event => {
      event.respondWith(
        caches.open(cacheName).then(cache => {          return cache.match(event.request).then(res => {            return res || fetch(event.request)
          });
        })
      );
    });

登入後複製

它註冊一個

其中檔案index.html內容為：