PWA詳解

前端小兵發表於2019-03-13

PWA關鍵技術

  • service worker (服務工作者)
  • Manifest (網路應用清單)
  • Push Notification (推送通知)

manifest.json (網路應用清單)

自定義名稱

  • name: {string} 應用名稱，用於安裝橫幅、啟動畫面顯示
  • short_name: {string} 應用短名稱，用於主螢幕顯示
{
    "name": "這是一個完整名稱",
    "short_name": "短名稱",
}
複製程式碼

自定義圖示

  • icons: {Array.<ImageObject>} 應用圖示列表
  • 其中 ImageObject 的屬性值包括：
    • src: {string} 圖示 url
    • type {string=} 圖示的 mime 型別，非必填項，該欄位可讓瀏覽器快速忽略掉不支援的圖示型別
    • sizes {string} 圖示尺寸，格式為widthxheight，寬高數值以 css 的 px 為單位。如果需要填寫多個尺寸，則使用空格進行間隔，如"48x48 96x96 128x128"
    • 當PWA新增到主螢幕時，瀏覽器會根據有效圖示的 sizes 欄位進行選擇。首先尋找與顯示密度相匹配並且尺寸調整到 48dp(128x128) 螢幕密度的圖示；如果未找到任何圖示，則會查詢與裝置特性匹配度最高的圖示；如果匹配到的圖示路徑錯誤，將會顯示瀏覽器預設 icon。
"icons": [{
    "src": "images/icons/icon-128x128.png",
    "sizes": "128x128",
    "type": "image/png"
  }, {
    "src": "images/icons/icon-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/icons/icon-152x152.png",
    "sizes": "152x152",
    "type": "image/png"
  }, {
    "src": "images/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }, {
    "src": "images/icons/icon-256x256.png",
    "sizes": "256x256",
    "type": "image/png"
  }],
複製程式碼

設定啟動網址

  • 當PWA新增到主螢幕後，需要通過 start_url 去指定應用開啟的網址
    • start_url: {string=} 應用啟動地址
//假設 PWA 檔案結構為
https://test.baidu.com
    |
    |----manifest.json
    |
    |----index.html
    |
    |----detail.html
    
//manifest.json 對應的 start_url 如果採用絕對地址的形式，其配置如下：
{
    "start_url": "/index.html",
}

//等價於如下相對地址：
{
    "start_url": "/index.html",
}
複製程式碼

設定作用域

  • 對於一些大型網站而言，有時僅僅對站點的某些模組進行 PWA 改造，其餘部分仍為普通的網頁。因此需要通過 scope 屬性去限定作用域，超出範圍的部分會以瀏覽器的方式顯示。
    • scope: {string} 作用域
  • scope 應遵循如下規則：
    • 如果沒有在 manifest 中設定 scope，則預設的作用域為 manifest.json 所在資料夾；
    • scope 可以設定為 ../ 或者更高層級的路徑來擴大PWA的作用域；
    • start_url 必須在作用域範圍內；
    • 如果 start_url 為相對地址，其根路徑受 scope 所影響；
    • 如果 start_url 為絕對地址（以 / 開頭），則該地址將永遠以 / 作為根地址；

新增啟動畫面

  • 設定影像和標題: -瀏覽器會從icons中選擇最接近128dp(512x512)的圖片作為啟動畫面影像。標題則直接取自name。
  • 設定啟動背景顏色:
    • background_color: {Color} css色值
  • 設定啟動顯示型別:
    • display: {string}顯示型別,僅當顯示型別display設定為standalone或fullscreen 時，PWA啟動的時候才會顯示啟動畫面;
    • fullscreen 應用的顯示介面將佔滿整個螢幕
    • standalone 瀏覽器相關UI（如導航欄、工具欄等）將會被隱藏
    • minimal-ui 顯示形式與standalone類似，瀏覽器相關UI會最小化為一個按鈕，不同瀏覽器在實現上略有不同
    • browser 瀏覽器模式，與普通網頁在瀏覽器中開啟的顯示一致
  • 設定主題顏色
    • 通過設定 theme_color 屬性可以指定 PWA 的主題顏色。可以通過該屬性來控制瀏覽器 UI 的顏色。比如 PWA 啟動畫面上狀態列、內容頁中狀態列、位址列的顏色，會被 theme_color 所影響
    • theme_color: {Color}css色值
    • 需要在頁面裡設定 name 為 theme-color 的 meta 標籤
    <meta name="theme-color" content="#23fafa">
複製程式碼

相關文章