Progressive Web Apps入門

本文轉載自查看原文 2017-12-21 09:23 3024 前端開發/ pwa

PC和Mobile開發技術演進

PC方向，從客戶端到富客戶端，到現在廣泛使用的Web。

移動方向，目前主要還是原生應用和Mobile Web，PWA相關技術是未來發展方向。

PWA的概念

Progressive Web App (中文翻譯為：漸進式Web應用)帶來的體驗將網絡應用的優點與原生應用的優點相結合。用戶在瀏覽器中第一次訪問時就能體會到它們的好處，因為不需要進行任何安裝。在用戶隨着時間的推移增進與應用的關系后，其功能會變得越來越強大。它即使在不可靠網絡上也能快速加載、能夠發送相關推送通知、具有桌面圖標，並且可采用頂層全屏體驗的方式加載。

PWA的特點

漸進式 - 適用於選用任何瀏覽器的所有用戶，因為它是以漸進式增強作為核心宗旨來開發的。

自適應 - 適合任何機型：桌面設備、移動設備、平板電腦或任何未來設備。

連接無關性 - 能夠借助於服務工作線程在離線或低質量網絡狀況下工作。

類似應用 - 由於是在 App Shell 模型基礎上開發，因此具有應用風格的交互和導航，給用戶以應用般的熟悉感。

持續更新 - 在服務工作線程更新進程的作用下時刻保持最新狀態。

安全 - 通過 HTTPS 提供，以防止窺探和確保內容不被篡改。

可發現 - W3C 清單和服務工作線程注冊作用域能夠讓搜索引擎找到它們，從而將其識別為“應用”。

可再互動 - 通過推送通知之類的功能簡化了再互動。

可安裝 - 用戶可免去使用應用商店的麻煩，直接將對其最有用的應用“保留”在主屏幕上。

可鏈接 - 可通過網址輕松分享，無需復雜的安裝。

PWA vs Native App

Native App：依賴運行的平台操作系統，比如Android或iOS，需要將應用提交到應用商店，比如Apple App Store或者Google Play Store，國內各大應用商店等。

PWA：不關系平台操作系統，運行在瀏覽器中，使用標准的Web開發技術，無需提交到應用商店進行審核，發布即用。

PWA vs Web App

Web App:使用標准的Web技術，但是在處理離線，推送上欠缺，不能生成桌面圖標等。

PWA：使用標准的Web開發技術，可以支持離線可用，通過service worker進行更新和緩存，采用App shell模型基礎開發，界面和交互類似應用。支持推送，未來還支持操作設備（調用攝像頭、讀取陀螺儀等）。

PWA關鍵技術

Manifest

網絡應用清單是一個 JSON 文件，您（即開發者）可以利用它控制在用戶想要看到應用的區域（例如移動設備主屏幕）中如何向用戶顯示網絡應用或網站，指示用戶可以啟動哪些功能，以及定義其在啟動時的外觀。網絡應用清單提供了將網站書簽保存到設備主屏幕的功能。一個PWA的manifest.json示例：

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]}

Service Worker

Service Worker 是一段腳本，與 Web Worker 一樣，也是在后台運行。作為一個獨立的線程，運行環境與普通腳本不同，所以不能直接參與 Web 交互行為。Native App 可以做到離線使用、消息推送、后台自動更新，Service Worker 的出現是正是為了使得 Web App 也可以具有類似的能力。頁面注入service worker代碼示例：

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('service-worker.js')
  .then(function(registration) {
    console.log('service worker 注冊成功');
  }).catch(function (err) {
    console.log('servcie worker 注冊失敗');
  });}