資訊專欄INFORMATION COLUMN
摘要：另一部分屬于進程，它重新在后臺起了一個進程，它和應(yīng)用的主進程互不影響，可以同時執(zhí)行。其中一般作為應(yīng)用程序瀏覽器和網(wǎng)絡(luò)如果可用之間的代理服務(wù)。他們還將允許訪問推送通知和后臺同步。然后開始在進程中通過事件，來監(jiān)聽請求，并對請求和響應(yīng)進行緩存。
前言:
我們的應(yīng)用可以分為兩部分，一部分是屬于主進程的(包括js(同步,異步)，以及dom渲染等等)，在一個時刻點，只能執(zhí)行一個，要么先去渲染dom，完了再去執(zhí)行js；要么執(zhí)行完js，在去渲染dom，而不能同時執(zhí)行js和dom渲染。 另一部分屬于worker進程，它重新在后臺起了一個進程，它和應(yīng)用的主進程互不影響，可以同時執(zhí)行。
常見的worker有，web worker， service worker， shared worker等等。
其中service worker一般作為web應(yīng)用程序、瀏覽器和網(wǎng)絡(luò)（如果可用）之間的代理服務(wù)。他們旨在創(chuàng)建有效的離線體驗，攔截網(wǎng)絡(luò)請求，以及根據(jù)網(wǎng)絡(luò)是否可用采取合適的行動，更新駐留在服務(wù)器上的資源。他們還將允許訪問推送通知和后臺同步API。用來構(gòu)建PWA 應(yīng)用
使用service-worker前，我們必須要先在主進程中注冊它，然后才能在service-worker進程中編寫邏輯。
主進程
//index.js
if ("serviceWorker" in navigator) {
// Use the window load event to keep the page load performant
window.addEventListener("load", () => {
navigator.serviceWorker.register("/service-worker.js").then(registration=>{
console.log("register succces...")
}, err=>{
console.log("register error...",err)
});
});
}
service-worker進程
//service-worker.js
console.log("Hello from service-worker.js");
service-worker的語法簡介在service-worker.js中，self/this 表示 ServiceWorkerGlobalScope， 即全局的serviceworker工作環(huán)境，相當(dāng)于在主進程中的window。在此文件中，js的其他api無法使用，如DOM，BOM操作等，但是大部分的js api可用，同時ES6也可以使用。
在service-worker中可以定義監(jiān)聽事件，然后在對應(yīng)事件中進行邏輯處理。
具體api可查看 service worker MDN
service-worker進程的執(zhí)行流程
首先在主進程中開始注冊，調(diào)用register方法，進入sw進程，在sw進程中判斷如果還沒有安裝service worker.js，則觸發(fā)install事件。開始安裝
一旦sw進程安裝完成，會通知主進程register成功。
接著在sw進程 觸發(fā)到activate事件。
如果已經(jīng)安裝過service-worker.js文件，則在注冊時會發(fā)現(xiàn)并跳過install事件，直接進入注冊成功，然后觸發(fā)activate事件。
然后開始在sw進程中通過fetch事件，來監(jiān)聽http請求，并對請求和響應(yīng)進行緩存。
//在service worker中監(jiān)聽install
this.addEventListener("install", function(event) {
event.waitUntil(
caches.open("v1").then(function(cache) {
return cache.addAll([
"/sw-test/",
"/sw-test/index.html",
"/sw-test/style.css",
"/sw-test/app.js",
"/sw-test/image-list.js",
"/sw-test/star-wars-logo.jpg",
"/sw-test/gallery/",
"/sw-test/gallery/bountyHunters.jpg",
"/sw-test/gallery/myLittleVader.jpg",
"/sw-test/gallery/snowTroopers.jpg"
]);
})
);
});
除了 install之外，還有 activate，message，fetch，sync，push等事件。
打開chrome瀏覽器的application->service workers，會看到
可以看到status為 actived and is running，表明service-worker已經(jīng)安裝成功了。
在service-worker中通過監(jiān)聽事件，然后編寫對應(yīng)的邏輯并不是一件容易的事，尤其對于文件緩存，可能npm run build后，名稱隨時會變。
所以chrome官方推出了wokbox框架
wokbox 是用于向web應(yīng)用程序添加離線支持的JavaScript庫。
要使用wokbox，只需在service-worker.js文件中引入workbox-sw.js即可，然后會自動的在service-worker.js中創(chuàng)建workbox對象，
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
if (workbox) {
console.log(`Yay! Workbox is loaded
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109806.html
摘要：實際上是指的為簡化開發(fā)而開源的第三方庫。首先安裝依賴然后再配置文件中啟用就完成了使用采坑官網(wǎng)上線后發(fā)現(xiàn)，啟用后不能播放視頻了。把當(dāng)成了失敗請求，導(dǎo)致請求視頻文件失敗。 PWA（Progressive Web App）是前端的大趨勢，它能極大的加快前端頁面的加載速度，得到近乎原生 app 的展示效果（其實難說）。PWA 其實是多種前端技術(shù)的組合，其中最重要的一個技術(shù)就是 service ...
摘要：最后用把緩存的路徑憑證信息存在中。緩存策略現(xiàn)在來看看提供的緩存策略，主要有這幾種。自定義緩存配置回到在緩存策略里提到的，講講和緩存策略的參數(shù)。 作者：陳達孚 香港中文大學(xué)研究生,《移動Web前端高效開發(fā)實戰(zhàn)》作者之一，《前端開發(fā)者指南2017》譯者之一，在中國前端開發(fā)者大會,中生代技術(shù)大會等技術(shù)會議發(fā)表過主題演講, 專注于新技術(shù)的調(diào)研和使用. 本文為原創(chuàng)文章，轉(zhuǎn)載請注明作者及出處 ...
摘要：文章首次發(fā)表在博客支持了前言使用插件使博客支持功能，目前我所知道的有兩種插件均可實現(xiàn)該功能前提全站支持目前本人使用的是騰訊云的免費證書網(wǎng)站配置已經(jīng)有很多文章寫了配置過程本篇文章不在贅述使用安裝修改配置文件的配置文件采用語言想要 文章首次發(fā)表在: 博客支持PWA了~ 前言 使用hexo插件使博客支持pwa功能，目前我所知道的有兩種插件均可實現(xiàn)該功能 hexo-pwa hexo-off...
摘要：是一個注冊在指定源和路徑下的事件驅(qū)動?？梢蕴峁┯行в行У碾x線體驗，攔截網(wǎng)絡(luò)請求。出于安全原因，要求必須在下才能運行。返回一個對象，的結(jié)果是對象值對象組成的數(shù)組。當(dāng)事件的處理程序執(zhí)行完畢后，可以認為安裝完成了。 在前端越來越重的這個時代，頁面加載速度成為了一個重要的指標。對于這個問題，業(yè)界也有一些解決方案。 瀏覽器緩存、協(xié)議緩存、強緩存 懶加載（首屏） CDN 多域名突破下載并發(fā)限制。...
閱讀 2322·2021-09-02 15:11
閱讀 1594·2019-08-30 15:43
閱讀 2145·2019-08-29 13:48
閱讀 2857·2019-08-26 13:55
閱讀 2160·2019-08-23 15:09
閱讀 2958·2019-08-23 14:40
閱讀 3515·2019-08-23 14:23
閱讀 2702·2019-08-23 14:20
