JavaScript新知：service workers

前端技術正在像桌面技術靠近，其中一項很重要的就是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 = 'v1::static';    self.addEventListener('install', e => {
      e.waitUntil(
        caches.open(cacheName).then(cache => {          return cache.addAll([            '/',
          ]).then(() => self.skipWaiting());
        })
      );
    });    self.addEventListener('fetch', event => {
      event.respondWith(
        caches.open(cacheName).then(cache => {          return cache.match(event.request).then(res => {            return res || fetch(event.request)
          });
        })
      );
    });

它註冊一個

其中檔案index.html內容為：

<h1 id="serviceWorker-nbsp-B">serviceWorker B</h1>

它註冊一個一個

其中檔案index.html內容為：

npm i http-server 
    http-server

它註冊一個service worker，檔案名稱為sw.js，一個JavaScript程式碼檔案。所以真正關鍵的檔案是sw.js，其內容為：

http://localhost:8080/index.html

作為一個事件，install會在ServiceWorker第一次裝入時被調用，此處你可以做一些初始化的工作，典型的工作是加載在離線時會需要的檔案到cache內。這裡我們制定了"/",因此任何內容都會被緩存下來。

第二個事件是fetch，當存取遠端資源時會被呼叫。這裡可以做一個匹配，如果在cache內有就曲cache內的資源返回，否則去遠端取。

第三個文件b.html就是一個為了演示離線效果的文件，內容為：

http://localhost:8080/b.html

雖然即可安裝http server，並在當前路徑內執行它:

 http://localhost:8080/b.html

訪問:

 chrome://inspect/#service-workers

和

reee

隨後，關閉http server，再次訪問

 chrome://serviceworker-internals/

居然可以訪問~，而這就是離線實現的效果。 🎜🎜嗯，想要查看service workers的運行狀況，還可以使用如下url來：🎜

http://caniuse.com/#feat=serviceworkers

🎜可以看到更加細節的是這個：🎜rrreee🎜在這裡可以啟動，撤銷註冊等操作。 🎜🎜可以查詢它的實作情況，還不是那麼樂觀：🎜rrreee