PWA之 workbox 學習

zhangyucha0 發布于2019-08-26 13:55 / 2789人閱讀

摘要：另一部分屬于進程，它重新在后臺起了一個進程，它和應用的主進程互不影響，可以同時執行。其中一般作為應用程序瀏覽器和網絡如果可用之間的代理服務。他們還將允許訪問推送通知和后臺同步。然后開始在進程中通過事件，來監聽請求，并對請求和響應進行緩存。

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

常見的worker有，web worker， service worker， shared worker等等。

其中service worker一般作為web應用程序、瀏覽器和網絡（如果可用）之間的代理服務。他們旨在創建有效的離線體驗，攔截網絡請求，以及根據網絡是否可用采取合適的行動，更新駐留在服務器上的資源。他們還將允許訪問推送通知和后臺同步API。用來構建PWA 應用

使用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工作環境，相當于在主進程中的window。在此文件中，js的其他api無法使用，如DOM，BOM操作等，但是大部分的js api可用，同時ES6也可以使用。

在service-worker中可以定義監聽事件，然后在對應事件中進行邏輯處理。

具體api可查看 service worker MDN

service-worker進程的執行流程

首先在主進程中開始注冊，調用register方法，進入sw進程，在sw進程中判斷如果還沒有安裝service worker.js，則觸發install事件。開始安裝

一旦sw進程安裝完成，會通知主進程register成功。

接著在sw進程觸發到activate事件。

如果已經安裝過service-worker.js文件，則在注冊時會發現并跳過install事件，直接進入注冊成功，然后觸發activate事件。

然后開始在sw進程中通過fetch事件，來監聽http請求，并對請求和響應進行緩存。

//在service worker中監聽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已經安裝成功了。

在service-worker中通過監聽事件，然后編寫對應的邏輯并不是一件容易的事，尤其對于文件緩存，可能npm run build后，名稱隨時會變。

所以chrome官方推出了wokbox框架

wokbox 是用于向web應用程序添加離線支持的JavaScript庫。

要使用wokbox，只需在service-worker.js文件中引入workbox-sw.js即可，然后會自動的在service-worker.js中創建workbox對象，

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

if (workbox) {
  console.log(`Yay! Workbox is loaded

GPU云服務器云服務器 workbox PWA 機器學習入門之深度學習入門之pytorch

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

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

Service worker (@nuxtjs/workbox) 采坑記

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

ISherry 2019-08-23 12:04 評論0 收藏0
PWA之Workbox緩存策略分析

摘要：最后用把緩存的路徑憑證信息存在中。緩存策略現在來看看提供的緩存策略，主要有這幾種。自定義緩存配置回到在緩存策略里提到的，講講和緩存策略的參數。作者：陳達孚香港中文大學研究生,《移動Web前端高效開發實戰》作者之一，《前端開發者指南2017》譯者之一，在中國前端開發者大會,中生代技術大會等技術會議發表過主題演講, 專注于新技術的調研和使用. 本文為原創文章，轉載請注明作者及出處 ...

lewif 2019-08-21 17:57 評論0 收藏0
hexo博客簡單支持PWA

摘要：文章首次發表在博客支持了前言使用插件使博客支持功能，目前我所知道的有兩種插件均可實現該功能前提全站支持目前本人使用的是騰訊云的免費證書網站配置已經有很多文章寫了配置過程本篇文章不在贅述使用安裝修改配置文件的配置文件采用語言想要文章首次發表在: 博客支持PWA了~ 前言使用hexo插件使博客支持pwa功能，目前我所知道的有兩種插件均可實現該功能 hexo-pwa hexo-off...

nicercode 2019-08-23 11:46 評論0 收藏0
Service Workers （PWA 初體驗）

摘要：是一個注冊在指定源和路徑下的事件驅動。可以提供有效有效的離線體驗，攔截網絡請求。出于安全原因，要求必須在下才能運行。返回一個對象，的結果是對象值對象組成的數組。當事件的處理程序執行完畢后，可以認為安裝完成了。在前端越來越重的這個時代，頁面加載速度成為了一個重要的指標。對于這個問題，業界也有一些解決方案。瀏覽器緩存、協議緩存、強緩存懶加載（首屏） CDN 多域名突破下載并發限制。...

twohappy 2019-08-02 15:23 評論0 收藏0