PWA初探整理

jifei 發布于2019-08-23 12:56 / 1610人閱讀

摘要：站點在同一瀏覽器中被訪問至少兩次，兩次訪問間隔至少為分鐘。詢問授權發送給后端存儲服務端向發送消息，同時帶上根據再下發給對應的瀏覽器觸發的事件后續處理參考使用發送推送

關鍵特性

Web App Manifest – 在主屏幕添加app圖標，定義手機標題欄顏色之類

App Shell – 先顯示APP的主結構，再填充主數據，更快顯示更好體驗

Service Worker - 緩存，離線開發，以及地理位置信息處理等

Push Notifion - 消息推送

Service Worker

運行在瀏覽器端的代理服務器

基本特點

事件驅動型服務線程

只能基于https或者localhost

可以控制頁面所發送網絡請求的處理方式

運行在瀏覽器后臺的腳本，無法直接操作dom

生命周期

支持事件

register

在主線程代碼中注冊

可以指定scope，通常指定到網站根路徑，能夠攔截所有的fetch事件

service worker 已經被注冊過，瀏覽器會自動忽略上面的代碼

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    navigator.serviceWorker.register("/sw.js", {
      scope: "/"
    }).then(function (reg) {
      // 注冊成功
      console.log("success and scope: ", reg.scope);
    }).catch(function (err) {
      // 注冊失敗
      console.log("failed: ", err);
    });
  });
}

installing

緩存文件

installed/waiting

此狀態下，worker有效但尚未激活，它尚未納入 document的控制，確切來說是在等待著從當前 worker 接手

sw.js發生了更新，但是頁面一直掛載中，沒有關閉或強制刷新，此時上一個版本的sw還在工作中，新的sw處于等待中

// 安裝階段跳過等待，直接進入 active
self.addEventListener("install", function (event) {
  event.waitUntil(self.skipWaiting());
});

self.addEventListener("activate", function (event) {
  event.waitUntil(
    Promise.all([

      // 更新客戶端
      self.clients.claim()

    ])
  );
});

activating/activated

緩存更新

fetch

代理請求

message

sw與主線程間的雙向通信，建立MessageChannel作為紐帶

// index.html
navigator.serviceWorker.register("/service-worker.js", {
  scope: "/"
}).then(function (reg) {
  // 創建一個
  const channel = new MessageChannel();
  
  // port1供主線程使用
  channel.port1.onmessage = messageEvent => {
    console.log("來自sw的message", messageEvent.data);
  }
  
  const serviceWorker = reg.active;
  
  // port2指向sw
  if (serviceWorker) {
    serviceWorker.postMessage("index->sw", [channel.port2]);
  }
});

// sw.js
self.addEventListener("message", function (event) {
  console.log("來自index的message", event.data);
  // 通過port找到發送消息的client
  event.ports[0].postMessage("sw->index");
});

更多的應用場景

后臺數據同步

預取用戶可能需要的資源，比如相冊中的后面數張圖片

在后臺集中接收計算成本高的數據更新，比如地理位置和陀螺儀信息，多個頁面就可以利用同一組數據

Cache API

只能緩存 GET 請求；

可以緩存屬于自己域下的請求，同時也可以緩存跨域的請求，不過無法對跨域請求的Request和Response進行修改

緩存的更新需要自行實現

緩存不會過期，除非將手動刪除，大小有限制，LRU刪除

caches.open

創建一個cache

cache.add/addAll

支持傳入Requesturl

緩存資源，支持單個和數組

在cache.add內部會自動去調用fetch取回request的請求結果，然后才是把response存入cache

cache.put

相當于cache.add的第二步，即fetch到response后存入cache

無法直接緩存跨域的請求，response.status會返回0

如果跨域的資源支持CORS，那么可以把request的mod改成cors

caches.match

catch.match(request, {
  
}).then(function(response) {

})

cache.delete 一些使用點

分段緩存，提高安裝成功率

先安裝非重要資源，再安裝重要資源

漸進式緩存

對于在install時沒有緩存的資源，可以在用戶交互之后再緩存

優先原則

對于靜態頁面，緩存優先，減少請求

對于天氣類型應用，先去fetch，服務器故障或者網絡不良時，折回本地緩存

Manifest

一個基本的manifest.json

{
    "short_name": "短名稱",
    "name": "這是一個完整名稱",
    "icon": [
        {
            "src": "icon.png",
            "type": "image/png",
            "sizes": "48x48"
        }
    ],
    "start_url": "index.html"
}

可以實現的功能

基本功能

自定義名稱

自定義圖標

設置啟動網址

設置作用域

添加啟動畫面

設置顯示類型

指定顯示方向

設置主題色

應用安裝橫幅

站點部署 manifest.json，該文件需配置如下屬性：

short_name （用于主屏幕顯示）

name （用于安裝橫幅顯示）

icons （其中必須包含一個 mime 類型為 image/png 的圖標聲明）

start_url （應用啟動地址）

display （必須為 standalone 或 fullscreen）

站點注冊 Service Worker。

站點支持 HTTPS 訪問。

站點在同一瀏覽器中被訪問至少兩次，兩次訪問間隔至少為 5 分鐘。

Web Push Notification PushManager

詢問授權

發送subscription給后端存儲

服務端向FCM/GCM發送消息，同時帶上subscription

FCM根據subscription再下發給對應的瀏覽器

觸發Service Worker的push事件

后續處理

參考

https://segmentfault.com/a/11...

https://x5.tencent.com/tbs/gu...

https://lavas.baidu.com/pwa/o...

http://www.zhangxinxu.com/wor...

https://zhuanlan.zhihu.com/p/...

https://github.com/delapuente...

https://github.com/SangKa/PWA...

使用Service Worker發送Push推送

https://fed.renren.com/2017/1...

https://pwa.rocks/

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

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

Service Workers （PWA 初體驗）

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

twohappy 2019-08-02 15:23 評論0 收藏0
Service Workers （PWA 初體驗）

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

劉厚水 2019-08-23 18:18 評論0 收藏0
初探IndexedDB

背景隨著前端技術日新月異地快速發展，web應用功能和體驗也逐漸發展到可以和原生應用媲美的程度，前端緩存技術的應用對這起到了不可磨滅的貢獻，因此想一探前端的緩存技術，這篇文章主要會介紹在日常開發中比較少接觸的IndexedDB IndexedDB 什么是IndexedDB IndexedDB簡單理解就是前端數據庫，提供了一種在用戶瀏覽器中持久存儲數據的方法，但是和前端關系型數據不同的是，Index...

jsyzchen 2019-08-23 17:10 評論0 收藏0
pwa 實戰總結

摘要：現在表示公開支持。一旦安裝完成，如果注冊的沒有變化，則顯示為已激活的生命周期結束。一旦安裝這步完成，便會激活，并控制在其范圍內的一切。目前還在草案狀態，僅火狐和谷歌瀏覽器支持此特性。 PWA初探什么是PWA PWA（Progressive Web Apps）：漸進式 Web app PWA 旨在增強 Web 體驗，能讓用戶在訪問一個web的時候感覺在使用app一樣。 PWA可以看作是...

xioqua 2019-08-22 18:08 評論0 收藏0
初探vue-cli 3.0

摘要：當你將一系列的特性選擇完畢后最后回提示你是否將已選項保存成一個快速將來可復用的當你選擇保存時，被保存的將會存在用戶的目錄下一個名為的文件里。準備工作 npm install -g @vue/cli or yarn global add @vue/cli 安裝需要Node.js8.9以上版本，安裝完成后可以通過vue --version來驗證是否安裝成功項目創建 vue create...

superPershing 2019-08-23 12:23 評論0 收藏0