成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

PWA初探整理

jifei / 1612人閱讀

摘要：站點(diǎn)在同一瀏覽器中被訪問至少兩次，兩次訪問間隔至少為分鐘。詢問授權(quán)發(fā)送給后端存儲服務(wù)端向發(fā)送消息，同時帶上根據(jù)再下發(fā)給對應(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 - 緩存，離線開發(fā)，以及地理位置信息處理等

Push Notifion - 消息推送

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

基本特點(diǎn)

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

只能基于https或者localhost

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

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

生命周期

支持事件

register

在主線程代碼中注冊

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

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

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

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

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

// 安裝階段跳過等待，直接進(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 
代理請求
message

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

// index.html
navigator.serviceWorker.register("/service-worker.js", {
  scope: "/"
}).then(function (reg) {
  // 創(chuàng)建一個
  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找到發(fā)送消息的client
  event.ports[0].postMessage("sw->index");
});
更多的應(yīng)用場景

后臺數(shù)據(jù)同步

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

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

Cache API

只能緩存 GET 請求；

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

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

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

caches.open

創(chuàng)建一個cache

cache.add/addAll

支持傳入Requesturl

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

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

cache.put

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

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

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

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

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

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

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

漸進(jìn)式緩存

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

優(yōu)先原則

對于靜態(tài)頁面，緩存優(yōu)先，減少請求

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

Manifest

一個基本的manifest.json

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

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

基本功能

自定義名稱

自定義圖標(biāo)

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

設(shè)置作用域

添加啟動畫面

設(shè)置顯示類型

指定顯示方向

設(shè)置主題色

應(yīng)用安裝橫幅

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

short_name （用于主屏幕顯示）

name （用于安裝橫幅顯示）

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

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

display （必須為 standalone 或 fullscreen）

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

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

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

Web Push Notification PushManager

詢問授權(quán)

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

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

FCM根據(jù)subscription再下發(fā)給對應(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99108.html

相關(guān)文章

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

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

    twohappy 評論0 收藏0

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

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

    劉厚水 評論0 收藏0

  • 初探IndexedDB

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

    jsyzchen 評論0 收藏0

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

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

    xioqua 評論0 收藏0

  • 初探vue-cli 3.0

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

    superPershing 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<