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