pwa學習筆記--簡介

 

1. 介紹

Progressive Web App , (漸進式加強 WEB 應用) 簡稱 PWA ，是提高WebApp的體驗的一種新方法，能給用戶原生應用的體驗。

PWA 本質上是 Web App ，藉助一些新技術也具有了Native App的一些特性，兼具 Web App和Native App的優勢。

2. 優點

漸進式Web應用程序中相比於普通的Web應該存在如下一些優點。

1. 可靠 
   應用程序在加載時應該快速閃電，它應該接近瞬時，而且當沒有網絡或像2G這樣的低速網絡時也應該打開。
2. 快速
   當用戶與Web應用程序交互時，滾動和頁面過渡應該是黃油平滑的。每一個人都討厭蹩腳的卷軸。
3. 響應
   應用程序應適合全部不一樣大小的設備。完美的網絡應用程序應該像液體同樣，採用其容器的形狀。
4. 可安裝
   若是咱們想讓Web應用程序更接近本機應用程序，則必須能夠安裝它們而且應該與其餘本機應用程序一塊兒駐留在主屏幕中，以便用戶只需單擊一下便可訪問PWA。
5. 啓動屏幕
   PWA在應用程序啓動期間添加了啓動畫面。這使得PWA更像是原生應用程序
6. 高度參與
   應用程序應保持用戶參與。PWA提供諸如推送通知，主屏幕圖標，全屏和離線第一應用程序等功能，以美化用戶參與度。

3. 核心技術

PWA有一些重要的技術組件，它們協同工做併爲常規Web應用程序注入活力。開發良好的PWA須要如下組件

 

 

3.1 Service Worker

3.1.1 描述

它是一種 Web Worker 

它是一個外鏈的js文件，如 /sw.js

它是一種特殊的Web Worker,可以攔截網絡請求

它只能運行在HTTPS協議上

它還能接受推送消息和 處理後臺同步

它 一但被註冊就永遠存在，除非顯示unregister

它 是 PWA 的核心

3.1.2 做用

普通應用程序直接與網絡通訊，若是沒有網絡，就沒法打開正常的頁面。

Service Worker雖然只是JavaScript代碼組件，它能夠做爲瀏覽器和網絡之間的代理。Service Worker可使用瀏覽器的緩存API 幫助構建脫機的 Web應用程序。工做原理以下：

 

 

這不只能夠加快應用程序的性能，不管設備是鏈接仍是未鏈接到互聯網，還能夠徹底控制應用程序的行爲以及應用程序在各類狀況下的響應方式。

3.1.3 生命週期

 

 

Service Worker存在自身的生命週期，如圖所示

(1). 安裝 ( installing ) ：

這個狀態發生在 Service Worker 註冊以後，表示開始安裝，觸發 install 事件回調指定一些靜態資源進行離線緩存。

(2). 安裝後( installed ) ：

Service Worker 已經完成了安裝，而且等待其餘的 Service Worker 線程被關閉。

(3). 激活( activating ):

在這個狀態下沒有被其餘的 Service Worker 控制的客戶端，容許當前的 worker 完成安裝，而且清除了其餘的 worker 以及關聯緩存的舊緩存資源，等待新的 Service Worker 線程被激活。

(4). 激活後( activated ) ：

在這個狀態會處理 activate 事件回調 (提供了更新緩存策略的機會)。並能夠處理功能性的事件 fetch (請求)、 sync (後臺同步)、 push (推送)。

(5). 廢棄狀態( redundant ) ：

這個狀態表示一個 Service Worker 的生命週期結束。進入廢棄 (redundant) 狀態的緣由可能爲這幾種：

安裝 (install) 失敗

激活 (activating) 失敗

新版本的 Service Worker 替換了它併成爲激活狀態

3.1.4 兼容性

如圖所示，咱們能夠看到主流的瀏覽器都支持Service Worker

 

 

3.2 清單文件

清單文件是一個配置JSON文件，其中包含應用程序的信息，例如安裝時主屏幕上顯示的圖標，應用程序的簡稱，背景顏色或主題。如下是示例清單文件： {
  "short_name": "Spinner",
  "name": "Fidget spinner",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/home/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/home/",
  "theme_color": "#3367D6"
}

從manifest.json文件中，咱們能夠輕鬆獲得這個PWA的信息：

l  name ：定義此PWA的名稱。

l  icons ：定義一系列的圖標以適應不一樣型號的設備。

l  theme_color ：主題顏色（影響手機狀態欄顏色）。

l  background_color ：背景顏色。

l  start_url ：啓動地址。因爲PWA其實是一個web頁面，因此須要定義PWA 在啓動時應該訪問哪一個地址。

l  display ：「standalone」表示其以相似原生APP的全屏方式啓動。

3.3  HTTPS

安全的 HTTP，也稱爲 HTTPS，是最關鍵的安全功能之一，許多現代 API 和 Progressive Web App 都須要使用它。人們對 HTTPS 有一個廣泛的錯誤認識，認爲只有處理敏感通訊的網站才須要 HTTPS。隱私和安全性並非使用 HTTPS 保護用戶的充分理由，服務工做線程、Payment Request API 等許多新的瀏覽器功能也須要 HTTPS。