一個簡單的 PWA 指南

goooooooogle發表於2019-02-15

PWA

Progressive Web App
通俗來說是能夠安裝在裝置主屏，具有離線執行能力，並且接近原生應用體驗的網頁應用。簡稱PWA。

技術背景

大家都知道H5相比原生應用，無論是載入速度和使用者體驗都會差很多,具體原因有如下幾點：

  1. 留白時間過長。移動端網路非常不穩定，經常會出現弱網環境（如：電梯，地鐵，大山裡面），這樣會導致資源載入速度非常慢，留白時間相對原生會慢很多。
  2. 無法離線訪問。因為資源都線上上伺服器,每次訪問H5的頁面強烈依賴網路，原生因為資源都在應用包裡面,就算斷網也會給一個相對友好的展示介面和使用者提醒。
  3. 無法全屏訪問。H5絕大部分都是跟瀏覽打交道，但是各大瀏覽器廠商都會有一個討厭的頭部和一個討厭的尾部，導致使用者的可視區域大大被壓縮。原生大家都知道可視區域隨意控制。
  4. 無法訊息推送。
  5. 沒有自己的啟動圖示，每次都需要輸入網址或者依靠搜尋引擎引流。

這個時候拯救H5的英雄就出現了，他就是PWA。

什麼是 PWA

PWA全稱是: Progressive Web Apps(漸進式網頁應用)。這是 2016 年，Google I/O 大會上提出一個下一代web應用的概念。這並不是描述一個技術，而是一些技術的合集,能讓你在使用 Web的時候感覺像是在使用 APP。

PWA 的優點

  • Progressive：不管使用者使用什麼瀏覽器都可用，因為使用漸進增強作為核心原則
  • Responsive：適用所有形式的裝置
  • Connectivity independent：離線/弱網使用
  • App-like：類原生App
  • Fresh：持續更新，得益於service worker的更新機制
  • Safe：安全，只能通過HTTPS訪問
  • Discoverable：得益於W3C manifest ，允許搜尋引擎早到它
  • Re-engageable：使用者粘度增強。可以接受訊息推送。
  • Installable：可以安裝到裝置桌面，並且可以不用在app store下載
  • Linkable：可連線，可以簡單通過一個URL分享應用，不需要複雜的安裝

PWA 主要能做什麼

  • 訊息推送
  • 主屏ICON，全屏訪問
  • 離線儲存

主要技術

  • Service Work
  • Web App Manifest

Service Worker

本質上還是一個Web Worker,具體點說就是一個基於事件驅動的，能夠後臺執行的，並且提供持久化能力的一個系統

Service Worker 支援的事件

一個簡單的 PWA 指南

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chorme=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Service worker demo</title>

    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
    <h1></h1>
    
    <section></section>
    
    <script src="image-list.js"></script>
    <script src="app.js"></script>
</body>
</html>
複製程式碼
self.addEventListener('install',function(event){
  event.waitUtil(
    caches.open('v1').then(function(cache){
      return cache.addAll([
        //圖片列表
      ]);
    })
  );
});

self.addEventListener('fetch',function(event){
  event.respondWidth(caches.match(event.request).then(function(response){
    if (response !== undefined){
      return response;
    } else {
      return fetch(event.request).then(function(response){
        let responseClone = response.clone();

        caches.open('v1').then(function(response){
          cache.put(event.request,responseClone)
        });
        return response;
      }).catch(function(){
        return caches.match('../../1.jpg');
      });
    }
  }));
});

複製程式碼

Web App Manifest

// manifest.webmanifest
{
    "name":"掘金",
    "short_name":"掘金",
    "start_url":"",
    "display":"standalon",
    "background_color":"#fff",
    "description":"一個幫助開發者成長的社群",
    "icons":[
        {
            "src":"",
            "size":"48x48",
            "type":"image/png"
        },
        {
            "src":"",
            "size":"48x48",
            "type":"image/png"
        }
    ],
    "related_application":[
        {
            "platform":"play",
            "url":""
        }
    ]
}
複製程式碼

詳細的文件請檢視：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chorme=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Service worker demo</title>

    <link ref="manifest" href="/manifest.webmanifest">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
    <h1></h1>
    
    <section></section>

    <script src="image-list.js"></script>
    <script src="app.js"></script>
</body>
</html>
複製程式碼

PWA 應用現狀

國內應用

  • 餓了麼
  • 新浪微博

面臨問題

  • 國內Android系統的多樣性和瀏覽器的多樣性，依然面臨相容性的問題
  • 由於國內特殊的網路環境，Android沒法用上谷歌的推送系統
  • 蘋果對Service Work支援不完善，目前功能還比較弱，不支援推送，不支援後臺執行等
  • Service Work還在草案階段

支援情況

相關文章

相關文章