講講PWA

時間  2019-11-06
標籤 講講 pwa 简体版
原文   原文鏈接

1、背景

文章2017 前端大事件和趨勢回顧，2018 何去何從？中提到了2017年前端值得關注的十大事件，其中就提到了PWA。css

你們都知道Native app體驗確實很好，下載到手機上以後入口也方便。它也有一些缺點:html

  • 開發成本高(ios和安卓)
  • 軟件上線須要審覈
  • 版本更新須要將新版本上傳到不一樣的應用商店
  • 想使用一個app就必須去下載才能使用，即便是偶爾須要使用一下下

而web網頁開發成本低，網站更新時上傳最新的資源到服務器便可，用手機帶的瀏覽器打開就可使用。可是除了體驗上比Native app仍是差一些，還有一些明顯的缺點前端

  • 手機桌面入口不夠便捷，想要進入一個頁面必需要記住它的url或者加入書籤
  • 沒網絡就沒響應，不具有離線能力
  • 不像APP同樣能進行消息推送

那麼什麼是PWA呢？ios

2、What's PWA?

PWA全稱Progressive Web App，即漸進式WEB應用。git

一個 PWA 應用首先是一個網頁, 能夠經過 Web 技術編寫出一個網頁應用. 隨後添加上 App Manifest 和 Service Worker 來實現 PWA 的安裝和離線等功能
解決了哪些問題？github

  • 能夠添加至主屏幕，點擊主屏幕圖標能夠實現啓動動畫以及隱藏地址欄
  • 實現離線緩存功能，即便用戶手機沒有網絡，依然可使用一些離線功能
  • 實現了消息推送

它解決了上述提到的問題，這些特性將使得 Web 應用漸進式接近原生 App。web

3、PWA的實現

3.1 Manifest實現添加至主屏幕

index.htmlchrome

<head>
  <title>Minimal PWA</title>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <link rel="manifest" href="manifest.json" />
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="icon" href="/e.png" type="image/png" />
</head>

manifest.jsonexpress

{
  "name": "Minimal PWA", // 必填 顯示的插件名稱
  "short_name": "PWA Demo", // 可選  在APP launcher和新的tab頁顯示，若是沒有設置，則使用name
  "description": "The app that helps you understand PWA", //用於描述應用
  "display": "standalone", // 定義開發人員對Web應用程序的首選顯示模式。standalone模式會有單獨的
  "start_url": "/", // 應用啓動時的url
  "theme_color": "#313131", // 桌面圖標的背景色
  "background_color": "#313131", // 爲web應用程序預約義的背景顏色。在啓動web應用程序和加載應用程序的內容之間建立了一個平滑的過渡。
  "icons": [ // 桌面圖標，是一個數組
    {
    "src": "icon/lowres.webp",
    "sizes": "48x48",  // 以空格分隔的圖片尺寸
    "type": "image/webp"  // 幫助userAgent快速排除不支持的類型
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
  ]
}
Manifest參考文檔： https://developer.mozilla.org/zh-CN/docs/Web/Manifest

能夠打開網站https://developers.google.cn/web/showcase/2015/chrome-dev-summit查看添加至主屏幕的動圖。json

若是用的是安卓手機，能夠下載chrome瀏覽器本身操做看看

3.2 service worker實現離線緩存

3.2.1 什麼是service worker

Service Worker 是 Chrome 團隊提出和力推的一個 WEB API，用於給 web 應用提供高級的可持續的後臺處理能力。

Service Workers 就像介於服務器和網頁之間的攔截器，可以攔截進出的HTTP 請求，從而徹底控制你的網站。

最主要的特色

  • 在頁面中註冊並安裝成功後，運行於瀏覽器後臺，不受頁面刷新的影響，能夠監聽和截攔做用域範圍內全部頁面的 HTTP 請求。
  • 網站必須使用 HTTPS。除了使用本地開發環境調試時(如域名使用 localhost)
  • 運行於瀏覽器後臺，能夠控制打開的做用域範圍下全部的頁面請求
  • 單獨的做用域範圍，單獨的運行環境和執行線程
  • 不能操做頁面 DOM。但能夠經過事件機制來處理
  • 事件驅動型服務線程
爲何要求網站必須是HTTPS的，大概是由於service worker權限太大能攔截全部頁面的請求吧，若是http的網站安裝service worker很容易被攻擊

瀏覽器支持狀況

瀏覽器支持狀況詳見： https://caniuse.com/#feat=serviceworkers

生命週期

當用戶首次導航至 URL 時，服務器會返回響應的網頁。

  • 第1步:當你調用 register() 函數時， Service Worker 開始下載。
  • 第2步:在註冊過程當中，瀏覽器會下載、解析並執行 Service Worker ()。若是在此步驟中出現任何錯誤，register() 返回的 promise 都會執行 reject 操做，而且 Service Worker 會被廢棄。
  • 第3步:一旦 Service Worker 成功執行了，install 事件就會激活
  • 第4步:安裝完成，Service Worker 便會激活，並控制在其範圍內的一切。若是生命週期中的全部事件都成功了，Service Worker 便已準備就緒，隨時可使用了！
chrome://serviceworker-internals 來了解當前瀏覽器中全部已安裝Service Worker的詳細狀況

3.2.2 HTTP緩存與service worker緩存

  • HTTP緩存

Web 服務器可使用 Expires 首部來通知 Web 客戶端，它可使用資源的當前副本，直到指定的「過時時間」。反過來，瀏覽器能夠緩存此資源，而且只有在有效期滿後纔會再次檢查新版本。
使用 HTTP 緩存意味着你要依賴服務器來告訴你什麼時候緩存資源和什麼時候過時。

  • service worker緩存

Service Workers 的強大在於它們攔截 HTTP 請求的能力
進入任何傳入的 HTTP 請求，並決定想要如何響應。在你的 Service Worker 中，能夠編寫邏輯來決定想要緩存的資源，以及須要知足什麼條件和資源須要緩存多久。一切盡歸你掌控！

3.2.3 實現離線緩存

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Caching World!</title>
  </head>
  <body>
    <!-- Image -->
    <img src="/images/hello.png" />                 
    <!-- JavaScript -->
    <script async src="/js/script.js"></script>     
    <script>
      // 註冊 service worker
      if ('serviceWorker' in navigator) {           
        navigator.serviceWorker.register('/service-worker.js', {scope: '/'}).then(function (registration) {
          // 註冊成功
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }).catch(function (err) {                   
          // 註冊失敗 :(
          console.log('ServiceWorker registration failed: ', err);
        });
      }
    </script>
  </body>
</html>
注：Service Worker 的註冊路徑決定了其 scope 默認做用頁面的範圍。
若是 service-worker.js 是在 /sw/ 頁面路徑下，這使得該 Service Worker 默認只會收到 頁面/sw/ 路徑下的 fetch 事件。
若是存放在網站的根路徑下，則將會收到該網站的全部 fetch 事件。
若是但願改變它的做用域，可在第二個參數設置 scope 範圍。示例中將其改成了根目錄，即對整個站點生效。

service-worker.js

var cacheName = 'helloWorld';     // 緩存的名稱  
// install 事件，它發生在瀏覽器安裝並註冊 Service Worker 時        
self.addEventListener('install', event => { 
/* event.waitUtil 用於在安裝成功以前執行一些預裝邏輯
 可是建議只作一些輕量級和很是重要資源的緩存，減小安裝失敗的機率
 安裝成功後 ServiceWorker 狀態會從 installing 變爲 installed */
  event.waitUntil(
    caches.open(cacheName)                  
    .then(cache => cache.addAll([    // 若是全部的文件都成功緩存了，便會安裝完成。若是任何文件下載失敗了，那麼安裝過程也會隨之失敗。        
      '/js/script.js',
      '/images/hello.png'
    ]))
  );
});
  
/**
爲 fetch 事件添加一個事件監聽器。接下來，使用 caches.match() 函數來檢查傳入的請求 URL 是否匹配當前緩存中存在的任何內容。若是存在的話，返回緩存的資源。
若是資源並不存在於緩存當中，經過網絡來獲取資源，並將獲取到的資源添加到緩存中。
*/
self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)                  
    .then(function (response) {
      if (response) {                            
        return response;                         
      }
      var requestToCache = event.request.clone();  //          
      return fetch(requestToCache).then(                   
        function (response) {
          if (!response || response.status !== 200) {      
            return response;
          }
          var responseToCache = response.clone();          
          caches.open(cacheName)                           
            .then(function (cache) {
              cache.put(requestToCache, responseToCache);  
            });
          return response;             
    })
  );
});
注：爲何用request.clone()和response.clone()
須要這麼作是由於request和response是一個流，它只能消耗一次。由於咱們已經經過緩存消耗了一次，而後發起 HTTP 請求還要再消耗一次，因此咱們須要在此時克隆請求
Clone the request—a request is a stream and can only be consumed once.

3.2.4 調試相關

chrome瀏覽器打開https://googlechrome.github.io/samples/service-worker/basic/index.html，這是一個實現了service worker離線緩存功能的網站，打開調試工具

介紹一個圖中的1.和2.

  1. 勾選能夠模擬網站離線狀況，勾選後network會有一個黃色警告圖標，該網站已經離線。此時刷新頁面，頁面仍然可以正常顯示
  2. 當前service worker的scope。它可以攔截https://googlechrome.github.i...，一樣也可以攔截https://googlechrome.github.i...*/*.html下的請求
調試面板具體表明的什麼參看 https://x5.tencent.com/tbs/guide/serviceworker.html的第三部分

3.3 serice worker實現消息推送

  • 步驟1、提示用戶並得到他們的訂閱詳細信息
  • 步驟2、將這些詳細信息保存在服務器上
  • 步驟3、在須要時發送任何消息
不一樣瀏覽器須要用不一樣的推送消息服務器。以 Chrome 上使用 Google Cloud Messaging<GCM> 做爲推送服務爲例，第一步是註冊 applicationServerKey(經過 GCM 註冊獲取)，並在頁面上進行訂閱或發起訂閱。每個會話會有一個獨立的端點（endpoint），訂閱對象的屬性(PushSubscription.endpoint) 即爲端點值。將端點發送給服務器後，服務器用這一值來發送消息給會話的激活的 Service Worker （經過 GCM 與瀏覽器客戶端溝通）。

步驟一和步驟二
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Progressive Times</title>
    <link rel="manifest" href="/manifest.json">                                      
  </head>
  <body>
    <script>
      var endpoint;
      var key;
      var authSecret;
      var vapidPublicKey = 'BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY';
      // 方法很複雜，可是能夠不用具體看，知識用來轉化vapidPublicKey用
      function urlBase64ToUint8Array(base64String) {                                  
        const padding = '='.repeat((4 - base64String.length % 4) % 4);
        const base64 = (base64String + padding)
          .replace(/\-/g, '+')
          .replace(/_/g, '/');
        const rawData = window.atob(base64);
        const outputArray = new Uint8Array(rawData.length);
        for (let i = 0; i < rawData.length; ++i) {
          outputArray[i] = rawData.charCodeAt(i);
        }
        return outputArray;
      }
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js').then(function (registration) {
          return registration.pushManager.getSubscription()                            
            .then(function (subscription) {
              if (subscription) {                                                      
                return;
              }
              return registration.pushManager.subscribe({                              
                  userVisibleOnly: true,
                  applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
                })
                .then(function (subscription) {
                  var rawKey = subscription.getKey ? subscription.getKey('p256dh') : '';
                  key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : '';
                  var rawAuthSecret = subscription.getKey ? subscription.getKey('auth') : '';
                  authSecret = rawAuthSecret ?
                    btoa(String.fromCharCode.apply(null, new Uint8Array(rawAuthSecret))) : '';
                  endpoint = subscription.endpoint;
                  return fetch('./register', {                                         
                    method: 'post',
                    headers: new Headers({
                      'content-type': 'application/json'
                    }),
                    body: JSON.stringify({
                      endpoint: subscription.endpoint,
                      key: key,
                      authSecret: authSecret,
                    }),
                  });
                });
            });
        }).catch(function (err) {
          // 註冊失敗 :(
          console.log('ServiceWorker registration failed: ', err);
        });
      }
    </script>
  </body>
</html>

步驟三 服務器發送消息給service worker

app.js

const webpush = require('web-push');                 
const express = require('express');
var bodyParser = require('body-parser');
const app = express();
webpush.setVapidDetails(                             
  'mailto:contact@deanhume.com',
  'BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY',
  'p6YVD7t8HkABoez1CvVJ5bl7BnEdKUu5bSyVjyxMBh0'
);
app.post('/register', function (req, res) {           
  var endpoint = req.body.endpoint;
  saveRegistrationDetails(endpoint, key, authSecret); 
  const pushSubscription = {                          
    endpoint: req.body.endpoint,
    keys: {
      auth: req.body.authSecret,
      p256dh: req.body.key
    }
  };
  var body = 'Thank you for registering';
  var iconUrl = 'https://example.com/images/homescreen.png';
  // 發送 Web 推送消息
  webpush.sendNotification(pushSubscription,          
      JSON.stringify({
        msg: body,
        url: 'http://localhost:3111/',
        icon: iconUrl
      }))
    .then(result => res.sendStatus(201))
    .catch(err => {
      console.log(err);
    });
});
app.listen(3111, function () {
  console.log('Web push app listening on port 3111!')
});

service worker監聽push事件，將通知詳情推送給用戶

service-worker.js

self.addEventListener('push', function (event) {
 // 檢查服務端是否發來了任何有效載荷數據
  var payload = event.data ? JSON.parse(event.data.text()) : 'no payload';
  var title = 'Progressive Times';
  event.waitUntil(
    // 使用提供的信息來顯示 Web 推送通知
    self.registration.showNotification(title, {                           
      body: payload.msg,
      url: payload.url,
      icon: payload.icon
    })
  );
});
擴展知識： service worker的更新

總結

PWA的優點

  • 能夠將app的快捷方式放置到桌面上，全屏運行，與原生app無異
  • 可以在各類網絡環境下使用，包括網絡差和斷網條件下，不會顯示undefind
  • 推送消息的能力
  • 其本質是一個網頁，沒有原生app的各類啓動條件，快速響應用戶指令

PWA存在的問題

  • 支持率不高:如今ios手機端不支持pwa，IE也暫時不支持
  • Chrome在中國桌面版佔有率仍是不錯的，安卓移動端上的佔有率卻很低
  • 各大廠商還未明確支持pwa
  • 依賴的GCM服務在國內沒法使用
  • 微信小程序的競爭

儘管有上述的一些缺點，PWA技術仍然有不少可使用的點。

  • service worker技術實現離線緩存，能夠將一些不常常更改的靜態文件放到緩存中，提高用戶體驗。
  • service worker實現消息推送，使用瀏覽器推送功能，吸引用戶
  • 漸進式開發，儘管一些瀏覽器暫時不支持，能夠利用上述技術給使用支持瀏覽器的用戶帶來更好的體驗。

參考文檔

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程