成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

PWA之 workbox 學(xué)習(xí)

zhangyucha0 / 2894人閱讀

摘要：另一部分屬于進(jìn)程，它重新在后臺(tái)起了一個(gè)進(jìn)程，它和應(yīng)用的主進(jìn)程互不影響，可以同時(shí)執(zhí)行。其中一般作為應(yīng)用程序?yàn)g覽器和網(wǎng)絡(luò)如果可用之間的代理服務(wù)。他們還將允許訪問(wèn)推送通知和后臺(tái)同步。然后開(kāi)始在進(jìn)程中通過(guò)事件，來(lái)監(jiān)聽(tīng)請(qǐng)求，并對(duì)請(qǐng)求和響應(yīng)進(jìn)行緩存。

前言:
我們的應(yīng)用可以分為兩部分，一部分是屬于主進(jìn)程的(包括js(同步,異步)，以及dom渲染等等)，在一個(gè)時(shí)刻點(diǎn)，只能執(zhí)行一個(gè)，要么先去渲染dom，完了再去執(zhí)行js；要么執(zhí)行完js，在去渲染dom，而不能同時(shí)執(zhí)行js和dom渲染。 另一部分屬于worker進(jìn)程，它重新在后臺(tái)起了一個(gè)進(jìn)程，它和應(yīng)用的主進(jìn)程互不影響，可以同時(shí)執(zhí)行。

常見(jiàn)的worker有，web worker， service worker， shared worker等等。

其中service worker一般作為web應(yīng)用程序、瀏覽器和網(wǎng)絡(luò)（如果可用）之間的代理服務(wù)。他們旨在創(chuàng)建有效的離線體驗(yàn)，攔截網(wǎng)絡(luò)請(qǐng)求，以及根據(jù)網(wǎng)絡(luò)是否可用采取合適的行動(dòng)，更新駐留在服務(wù)器上的資源。他們還將允許訪問(wèn)推送通知和后臺(tái)同步API。用來(lái)構(gòu)建PWA 應(yīng)用

使用service-worker前，我們必須要先在主進(jìn)程中注冊(cè)它，然后才能在service-worker進(jìn)程中編寫(xiě)邏輯。

主進(jìn)程

//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進(jìn)程

//service-worker.js
console.log("Hello from service-worker.js");
service-worker的語(yǔ)法簡(jiǎn)介
在service-worker.js中，self/this 表示 ServiceWorkerGlobalScope， 即全局的serviceworker工作環(huán)境，相當(dāng)于在主進(jìn)程中的window。在此文件中，js的其他api無(wú)法使用，如DOM，BOM操作等，但是大部分的js api可用，同時(shí)ES6也可以使用。


在service-worker中可以定義監(jiān)聽(tīng)事件，然后在對(duì)應(yīng)事件中進(jìn)行邏輯處理。


具體api可查看 service worker MDN

service-worker進(jìn)程的執(zhí)行流程

首先在主進(jìn)程中開(kāi)始注冊(cè)，調(diào)用register方法，進(jìn)入sw進(jìn)程，在sw進(jìn)程中判斷如果還沒(méi)有安裝service worker.js，則觸發(fā)install事件。開(kāi)始安裝

一旦sw進(jìn)程安裝完成，會(huì)通知主進(jìn)程register成功。

接著在sw進(jìn)程 觸發(fā)到activate事件。

如果已經(jīng)安裝過(guò)service-worker.js文件，則在注冊(cè)時(shí)會(huì)發(fā)現(xiàn)并跳過(guò)install事件，直接進(jìn)入注冊(cè)成功，然后觸發(fā)activate事件。

然后開(kāi)始在sw進(jìn)程中通過(guò)fetch事件，來(lái)監(jiān)聽(tīng)http請(qǐng)求，并對(duì)請(qǐng)求和響應(yīng)進(jìn)行緩存。

//在service worker中監(jiān)聽(tīng)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等事件。

打開(kāi)chrome瀏覽器的application->service workers，會(huì)看到

可以看到status為 actived and is running，表明service-worker已經(jīng)安裝成功了。

在service-worker中通過(guò)監(jiān)聽(tīng)事件，然后編寫(xiě)對(duì)應(yīng)的邏輯并不是一件容易的事，尤其對(duì)于文件緩存，可能npm run build后，名稱隨時(shí)會(huì)變。

所以chrome官方推出了wokbox框架

wokbox 是用于向web應(yīng)用程序添加離線支持的JavaScript庫(kù)。

要使用wokbox，只需在service-worker.js文件中引入workbox-sw.js即可，然后會(huì)自動(dòng)的在service-worker.js中創(chuàng)建workbox對(duì)象，

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/109806.html

相關(guān)文章

  • Service worker (@nuxtjs/workbox) 采坑記

    摘要：實(shí)際上是指的為簡(jiǎn)化開(kāi)發(fā)而開(kāi)源的第三方庫(kù)。首先安裝依賴然后再配置文件中啟用就完成了使用采坑官網(wǎng)上線后發(fā)現(xiàn)，啟用后不能播放視頻了。把當(dāng)成了失敗請(qǐng)求，導(dǎo)致請(qǐng)求視頻文件失敗。 PWA（Progressive Web App）是前端的大趨勢(shì)，它能極大的加快前端頁(yè)面的加載速度，得到近乎原生 app 的展示效果（其實(shí)難說(shuō)）。PWA 其實(shí)是多種前端技術(shù)的組合，其中最重要的一個(gè)技術(shù)就是 service ...

    ISherry 評(píng)論0 收藏0

  • PWA之Workbox緩存策略分析

    摘要：最后用把緩存的路徑憑證信息存在中。緩存策略現(xiàn)在來(lái)看看提供的緩存策略，主要有這幾種。自定義緩存配置回到在緩存策略里提到的，講講和緩存策略的參數(shù)。 作者：陳達(dá)孚 香港中文大學(xué)研究生,《移動(dòng)Web前端高效開(kāi)發(fā)實(shí)戰(zhàn)》作者之一，《前端開(kāi)發(fā)者指南2017》譯者之一，在中國(guó)前端開(kāi)發(fā)者大會(huì),中生代技術(shù)大會(huì)等技術(shù)會(huì)議發(fā)表過(guò)主題演講, 專注于新技術(shù)的調(diào)研和使用. 本文為原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明作者及出處 ...

    lewif 評(píng)論0 收藏0

  • hexo博客簡(jiǎn)單支持PWA

    摘要：文章首次發(fā)表在博客支持了前言使用插件使博客支持功能，目前我所知道的有兩種插件均可實(shí)現(xiàn)該功能前提全站支持目前本人使用的是騰訊云的免費(fèi)證書(shū)網(wǎng)站配置已經(jīng)有很多文章寫(xiě)了配置過(guò)程本篇文章不在贅述使用安裝修改配置文件的配置文件采用語(yǔ)言想要 文章首次發(fā)表在: 博客支持PWA了~ 前言 使用hexo插件使博客支持pwa功能，目前我所知道的有兩種插件均可實(shí)現(xiàn)該功能 hexo-pwa hexo-off...

    nicercode 評(píng)論0 收藏0

  • Service Workers （PWA 初體驗(yàn)）

    摘要：是一個(gè)注冊(cè)在指定源和路徑下的事件驅(qū)動(dòng)?？梢蕴峁┯行в行У碾x線體驗(yàn)，攔截網(wǎng)絡(luò)請(qǐng)求。出于安全原因，要求必須在下才能運(yùn)行。返回一個(gè)對(duì)象，的結(jié)果是對(duì)象值對(duì)象組成的數(shù)組。當(dāng)事件的處理程序執(zhí)行完畢后，可以認(rèn)為安裝完成了。 在前端越來(lái)越重的這個(gè)時(shí)代，頁(yè)面加載速度成為了一個(gè)重要的指標(biāo)。對(duì)于這個(gè)問(wèn)題，業(yè)界也有一些解決方案。 瀏覽器緩存、協(xié)議緩存、強(qiáng)緩存 懶加載（首屏） CDN 多域名突破下載并發(fā)限制。...

    twohappy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<