JavaScript新知：service workers

Tony 發布于2019-08-20 13:47 / 1738人閱讀

摘要：前端技術正在像桌面技術靠近，其中一項很重要的就是就是，它讓離線工作成為可能。本文會以一個簡單的案例代碼來說明這項技術。這里我們制定了因此任何內容都會被緩存下來。第二個事件是，當訪問遠程資源時會被調用。

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

瀏覽器版本為chrome 55

服務器系統：Node 5.0

我們需要準備3個文件：

touch  index.html b.html sw.js

其中文件index.html內容為：

它注冊一個service worker，文件名為sw.js，一個JavaScript代碼文件。所以真正關鍵的文件是sw.js，其內容為：

    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)
          });
        })
      );
    });

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

第二個事件是fetch，當訪問遠程資源時會被調用。這里可以做一個匹配，如果在cache內有就曲cache內的資源返回，否則去遠程取。

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

    serviceWorker B

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

    npm i http-server 
    http-server

訪問:

    http://localhost:8080/index.html

和

    http://localhost:8080/b.html

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

    http://localhost:8080/b.html

居然可以訪問~，而這就是離線實現的效果。

嗯，想要查看service workers的運行狀況，還可以使用如下url來：

    chrome://inspect/#service-workers

可以看到更加細節的是這個：

    chrome://serviceworker-internals/

在這里可以啟動，撤銷注冊等操作。

可以查詢它的實現情況，還不是那么樂觀：

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

ref

https://developers.google.com...

關于

作者：劉傳君

創建過產品，創過業。好讀書，求甚解。
可以通過 1000copy#gmail.com 聯系到我

出品

bootstrap小書 https://www.gitbook.com/book/...
http小書 http://www.ituring.com.cn/boo...
Git小書 http://www.ituring.com.cn/boo...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81247.html

javasscript - 收藏集 - 掘金

摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題...

Rango 2019-08-20 17:15 評論0 收藏0
JavaScript 是如何工作的：Service Worker 的生命周期及使用場景

摘要：的生命周期的生命周期與頁面完全分離。換句話說，這個將為這個域中的所有內容接收事件。這不是必要的，但絕對是推薦的。新的將啟動并且安裝事件將被移除。使用，可以很容易被劫持連接并偽造響應。后臺同步允許延遲操作，直到用戶具有穩定的連接。這是專門探索 JavaScript 及其所構建的組件的系列文章的第8篇。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！如果你錯過了前...

zzzmh 2019-08-23 14:28 評論0 收藏0
JavaScript 工作原理之八－Service Workers，生命周期及其使用場景

摘要：生命周期的生命周期和網頁完全不相關。意即會作用于整個源地址上。激活安裝完之后下一步即激活。同時檢查響應類型是否為，即檢查請求是否同域。創建新的的過程將會啟動，然后觸發事件。可以利用劫持網絡連接和偽造響應數據。原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。本系列持續更新中，Github 地址請查閱這里。這是 JavaScript 工...

oysun 2019-08-22 17:35 評論0 收藏0
JavaScript工作原理（八）：Service Workers，生命周期和應用案例

摘要：的生命周期生命周期與您的網頁是完全分開。激活安裝之后，下一步是將其激活。一旦激活，將開始控制所有屬于其范圍的頁面。否則，將執行事件。響應結果被添加到緩存中。請求和響應必須被克隆，因為它們是流。新的將啟動并且事件將被觸發。 showImg(https://segmentfault.com/img/bV9Sa2?w=800&h=410);您可能已經知道，漸進式Web應用(PWA)會越來越受...

huaixiaoz 2019-08-26 11:53 評論0 收藏0