資訊專欄INFORMATION COLUMN
摘要：前端技術(shù)正在像桌面技術(shù)靠近，其中一項很重要的就是就是，它讓離線工作成為可能。本文會以一個簡單的案例代碼來說明這項技術(shù)。這里我們制定了因此任何內(nèi)容都會被緩存下來。第二個事件是，當(dāng)訪問遠(yuǎn)程資源時會被調(diào)用。
前端技術(shù)正在像桌面技術(shù)靠近，其中一項很重要的就是就是service workers，它讓HTML App離線工作成為可能。本文會以一個簡單的案例代碼來說明這項技術(shù)。
我使用的工具：
瀏覽器版本為chrome 55
服務(wù)器系統(tǒng)：Node 5.0
我們需要準(zhǔn)備3個文件：
touch index.html b.html sw.js
其中文件index.html內(nèi)容為：
它注冊一個service worker，文件名為sw.js，一個JavaScript代碼文件。所以真正關(guān)鍵的文件是sw.js，其內(nèi)容為：
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第一次裝入時被調(diào)用，此處你可以做一些初始化的工作，典型的工作是加載在離線時會需要的文件到cache內(nèi)。這里我們制定了"/",因此任何內(nèi)容都會被緩存下來。
第二個事件是fetch，當(dāng)訪問遠(yuǎn)程資源時會被調(diào)用。這里可以做一個匹配，如果在cache內(nèi)有就曲cache內(nèi)的資源返回，否則去遠(yuǎn)程取。
第三個文件b.html就是一個為了演示離線效果的文件，內(nèi)容為：
serviceWorker B
雖然即可安裝http server，并在當(dāng)前路徑內(nèi)執(zhí)行它:
npm i http-server
http-server
訪問:
http://localhost:8080/index.html
和
http://localhost:8080/b.html
隨后，關(guān)閉http server，再次訪問
http://localhost:8080/b.html
居然可以訪問~，而這就是離線實現(xiàn)的效果。
嗯，想要查看service workers的運行狀況，還可以使用如下url來：
chrome://inspect/#service-workers
可以看到更加細(xì)節(jié)的是這個：
chrome://serviceworker-internals/
在這里可以啟動，撤銷注冊等操作。
可以查詢它的實現(xiàn)情況，還不是那么樂觀：
http://caniuse.com/#feat=serviceworkers
ref
https://developers.google.com...
關(guān)于作者：劉傳君
創(chuàng)建過產(chǎn)品，創(chuàng)過業(yè)。好讀書，求甚解。
可以通過 1000copy#gmail.com 聯(lián)系到我
bootstrap小書 https://www.gitbook.com/book/...
http小書 http://www.ituring.com.cn/boo...
Git小書 http://www.ituring.com.cn/boo...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81247.html
摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發(fā)人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題...
摘要：的生命周期的生命周期與頁面完全分離。換句話說，這個將為這個域中的所有內(nèi)容接收事件。這不是必要的，但絕對是推薦的。新的將啟動并且安裝事件將被移除。使用，可以很容易被劫持連接并偽造響應(yīng)。后臺同步允許延遲操作，直到用戶具有穩(wěn)定的連接。 這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第8篇。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ 如果你錯過了前...
摘要：生命周期的生命周期和網(wǎng)頁完全不相關(guān)。意即會作用于整個源地址上。激活安裝完之后下一步即激活。同時檢查響應(yīng)類型是否為，即檢查請求是否同域。創(chuàng)建新的的過程將會啟動，然后觸發(fā)事件?？梢岳媒俪志W(wǎng)絡(luò)連接和偽造響應(yīng)數(shù)據(jù)。 原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協(xié)議共享，BY Troland。 本系列持續(xù)更新中，Github 地址請查閱這里。 這是 JavaScript 工...
摘要：的生命周期生命周期與您的網(wǎng)頁是完全分開。激活安裝之后，下一步是將其激活。一旦激活，將開始控制所有屬于其范圍的頁面。否則，將執(zhí)行事件。響應(yīng)結(jié)果被添加到緩存中。請求和響應(yīng)必須被克隆，因為它們是流。新的將啟動并且事件將被觸發(fā)。 showImg(https://segmentfault.com/img/bV9Sa2?w=800&h=410);您可能已經(jīng)知道，漸進(jìn)式Web應(yīng)用(PWA)會越來越受...
閱讀 3064·2021-11-18 10:02
閱讀 3333·2021-11-02 14:48
閱讀 3395·2019-08-30 13:52
閱讀 558·2019-08-29 17:10
閱讀 2087·2019-08-29 12:53
閱讀 1409·2019-08-29 12:53
閱讀 1031·2019-08-29 12:25
閱讀 2167·2019-08-29 12:17
