PWA初探整理

jifei 發(fā)布于2019-08-23 12:56 / 1675人閱讀

摘要：站點(diǎn)在同一瀏覽器中被訪問(wèn)至少兩次，兩次訪問(wèn)間隔至少為分鐘。詢問(wèn)授權(quán)發(fā)送給后端存儲(chǔ)服務(wù)端向發(fā)送消息，同時(shí)帶上根據(jù)再下發(fā)給對(duì)應(yīng)的瀏覽器觸發(fā)的事件后續(xù)處理參考使用發(fā)送推送

關(guān)鍵特性

Web App Manifest – 在主屏幕添加app圖標(biāo)，定義手機(jī)標(biāo)題欄顏色之類

App Shell – 先顯示APP的主結(jié)構(gòu)，再填充主數(shù)據(jù)，更快顯示更好體驗(yàn)

Service Worker - 緩存，離線開(kāi)發(fā)，以及地理位置信息處理等

Push Notifion - 消息推送

Service Worker

運(yùn)行在瀏覽器端的代理服務(wù)器

基本特點(diǎn)

事件驅(qū)動(dòng)型服務(wù)線程

只能基于https或者localhost

可以控制頁(yè)面所發(fā)送網(wǎng)絡(luò)請(qǐng)求的處理方式

運(yùn)行在瀏覽器后臺(tái)的腳本，無(wú)法直接操作dom

生命周期

支持事件

register

在主線程代碼中注冊(cè)

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

service worker 已經(jīng)被注冊(cè)過(guò)，瀏覽器會(huì)自動(dòng)忽略上面的代碼

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

installing

緩存文件

installed/waiting

此狀態(tài)下，worker有效但尚未激活，它尚未納入 document的控制，確切來(lái)說(shuō)是在等待著從當(dāng)前 worker 接手

sw.js發(fā)生了更新，但是頁(yè)面一直掛載中，沒(méi)有關(guān)閉或強(qiáng)制刷新，此時(shí)上一個(gè)版本的sw還在工作中，新的sw處于等待中

// 安裝階段跳過(guò)等待，直接進(jìn)入 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

代理請(qǐng)求

message

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

// index.html
navigator.serviceWorker.register("/service-worker.js", {
  scope: "/"
}).then(function (reg) {
  // 創(chuàng)建一個(gè)
  const channel = new MessageChannel();
  
  // port1供主線程使用
  channel.port1.onmessage = messageEvent => {
    console.log("來(lái)自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("來(lái)自index的message", event.data);
  // 通過(guò)port找到發(fā)送消息的client
  event.ports[0].postMessage("sw->index");
});

更多的應(yīng)用場(chǎng)景

后臺(tái)數(shù)據(jù)同步

預(yù)取用戶可能需要的資源，比如相冊(cè)中的后面數(shù)張圖片

在后臺(tái)集中接收計(jì)算成本高的數(shù)據(jù)更新，比如地理位置和陀螺儀信息，多個(gè)頁(yè)面就可以利用同一組數(shù)據(jù)

Cache API

只能緩存 GET 請(qǐng)求；

可以緩存屬于自己域下的請(qǐng)求，同時(shí)也可以緩存跨域的請(qǐng)求，不過(guò)無(wú)法對(duì)跨域請(qǐng)求的Request和Response進(jìn)行修改

緩存的更新需要自行實(shí)現(xiàn)

緩存不會(huì)過(guò)期，除非將手動(dòng)刪除，大小有限制，LRU刪除

caches.open

創(chuàng)建一個(gè)cache

cache.add/addAll

支持傳入Requesturl

緩存資源，支持單個(gè)和數(shù)組

在cache.add內(nèi)部會(huì)自動(dòng)去調(diào)用fetch取回request的請(qǐng)求結(jié)果，然后才是把response存入cache

cache.put

相當(dāng)于cache.add的第二步，即fetch到response后存入cache

無(wú)法直接緩存跨域的請(qǐng)求，response.status會(huì)返回0

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

caches.match

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

})

cache.delete 一些使用點(diǎn)

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

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

漸進(jìn)式緩存

對(duì)于在install時(shí)沒(méi)有緩存的資源，可以在用戶交互之后再緩存

優(yōu)先原則

對(duì)于靜態(tài)頁(yè)面，緩存優(yōu)先，減少請(qǐng)求

對(duì)于天氣類型應(yīng)用，先去fetch，服務(wù)器故障或者網(wǎng)絡(luò)不良時(shí)，折回本地緩存

Manifest

一個(gè)基本的manifest.json

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

可以實(shí)現(xiàn)的功能

基本功能

自定義名稱

自定義圖標(biāo)

設(shè)置啟動(dòng)網(wǎng)址

設(shè)置作用域

添加啟動(dòng)畫面

設(shè)置顯示類型

指定顯示方向

設(shè)置主題色

應(yīng)用安裝橫幅

站點(diǎn)部署 manifest.json，該文件需配置如下屬性：

short_name （用于主屏幕顯示）

name （用于安裝橫幅顯示）

icons （其中必須包含一個(gè) mime 類型為 image/png 的圖標(biāo)聲明）

start_url （應(yīng)用啟動(dòng)地址）

display （必須為 standalone 或 fullscreen）

站點(diǎn)注冊(cè) Service Worker。

站點(diǎn)支持 HTTPS 訪問(wèn)。

站點(diǎn)在同一瀏覽器中被訪問(wèn)至少兩次，兩次訪問(wèn)間隔至少為 5 分鐘。

Web Push Notification PushManager

詢問(wèn)授權(quán)

發(fā)送subscription給后端存儲(chǔ)

服務(wù)端向FCM/GCM發(fā)送消息，同時(shí)帶上subscription

FCM根據(jù)subscription再下發(fā)給對(duì)應(yīng)的瀏覽器

觸發(fā)Service Worker的push事件

后續(xù)處理

參考

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發(fā)送Push推送

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

https://pwa.rocks/

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99108.html

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

登陸后可評(píng)論

0條評(píng)論

jifei

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

SSL加密為什么能保證安全

閱讀 3285·2021-11-25 09:43
ASEMI肖特基二極管SBT40100VDC正向壓降溫度系數(shù)

閱讀 3543·2021-11-11 16:54
#11.11#RackNerd：美國(guó)VPS年付$12起，洛杉磯/紐約等6機(jī)房可選

閱讀 959·2021-11-02 14:42
半月灣vps：美國(guó)CN2 GIA方案(DC5)機(jī)房,1Gbps帶寬,三網(wǎng)CN2 GIA線路,$109

閱讀 3876·2021-09-30 09:58
PuTTY – 老牌免費(fèi)開(kāi)源Windows SSH遠(yuǎn)程客戶端軟件

閱讀 3792·2021-09-29 09:44
那些很熟卻又不是很熟的知識(shí)

閱讀 1405·2019-08-30 15:56
初級(jí)前端開(kāi)發(fā)面試總結(jié)

閱讀 2208·2019-08-30 15:54
Vue源碼之目錄結(jié)構(gòu)

閱讀 3065·2019-08-30 15:43

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

PWA初探整理

相關(guān)文章

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

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

初探IndexedDB

pwa 實(shí)戰(zhàn)總結(jié)

初探vue-cli 3.0

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

0條評(píng)論

jifei

男|高級(jí)講師

TA的文章

SSL加密為什么能保證安全

ASEMI肖特基二極管SBT40100VDC正向壓降溫度系數(shù)

#11.11#RackNerd：美國(guó)VPS年付$12起，洛杉磯/紐約等6機(jī)房可選

半月灣vps：美國(guó)CN2 GIA方案(DC5)機(jī)房,1Gbps帶寬,三網(wǎng)CN2 GIA線路,$109

PuTTY – 老牌免費(fèi)開(kāi)源Windows SSH遠(yuǎn)程客戶端軟件

那些很熟卻又不是很熟的知識(shí)

初級(jí)前端開(kāi)發(fā)面試總結(jié)

Vue源碼之目錄結(jié)構(gòu)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

PWA初探整理

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！