pwa應用動態新增到主螢幕
PWA介紹
PWA(Progressive Web App)，漸進式網頁應用，2014年W3C公佈Service Worker的相關草案，其生產環境在2015年被Chrome支援。如果將Servicce Worker出現的時間作為PWA應用的誕生時間，則是2015年。
具體的介紹可參考這篇文章或者是Google文件：
核心技術
PWA不是特指某一項技術，而是應用了多項技術的Web App，其核心包括：App Manifest、Service Worker、Web Push等等。
基本配置
pwa技術是可以非常快的結合到當前的應用專案當中的。其核心配置檔案包括：Manifest.json
ServiceWorker.js。
-
Manifest.json中主要對web應用的一些配置進行宣告，主要有以下配置：
-
Service Worker主要做一些代理配置工作，主要註冊了幾個事件，在我的應用過程中，沒有對其進行額外的編寫。使用的是 react 預設生成的，確實有一些囫圇吐棗了，專案中用不太到。主要事件有：
瀏覽器支援情況
做了一些調研，大體的瀏覽器支援情況如下：
詳細統計情況如下：
PWA動態更換圖示
動態更換icon，一定要能夠動態的獲取icon。本文主要介紹在動態獲得icon之後，如何處理Android瀏覽器及Safari瀏覽器的問題。
獲取icon： 可以通過在 index.html 中新增一段 JavaScript 獲取icon，之後再做處理。
iOS
在前端 index.html中，一般情況下是在 head 中配置icon的路徑，比如：
<link rel="apple-touch-icon" sizes="180x180" href="favicon-apple.png">
我們需要做的就是把 href 中的圖片給替換就可以了，更改為外部連結圖片地址，是可行的。通過Safari瀏覽器新增到桌面主螢幕時，會使用連結中的img。
Android
在Android中，相關配置都是來自於manifest.json中，所以需要做的就是更改相應的manifest來實現動態更換圖示等。
正常的配置是這樣的：
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
這裡如果直接像在Safari中的處理方法一樣的話，是無法實現動態更換相應的配置資訊的。所以參考其他文章，使用了一種trick方法來實現目的。動態替換圖示
主要使用blob物件來解決這個問題，去掉原來manifest的引用方式，去掉將原來的href屬性及其內容。
<!--<link rel="manifest" href="%PUBLIC_URL%/manifest.json">-->
<link rel="manifest" id="my-manifest-placeholder">
將其新增 id 屬性，便於之後獲取並新增其他屬性。
let manifestUrl = "https://xxx:port/manifest.json";
$.ajax({
url: manifestUrl,
success: function (data) {
let resultObj = JSON.parse(data);
var myDynamicManifest = {
"name": resultObj.name,
"short_name": resultObj.short_name,
"description": "description",
"start_url": resultObj.start_url,
"display": "standalone",
"theme_color": "#2696f3",
"background_color": "#2696f3",
"icons": resultObj.icon
};
const stringManifest = JSON.stringify(myDynamicManifest);
const blob = new Blob([stringManifest], {type: 'application/json'});
const manifestURL = URL.createObjectURL(blob);
// 新增 href 屬性
document.querySelector('#my-manifest-placeholder').setAttribute('href', manifestURL);
}
})
關於JavaScript中blob的介紹：JavaScript中的物件
小結
pwa應用在國內的應用環境還不是很好。很麻煩的一件事情是彈出prompt事件，現在無法通過程式碼控制，顯示及隱藏事件是瀏覽器判斷及使用者行為所致。
這邊文章主要介紹，更改圖示的用法，其實這也並不是pwa應用的爆發點。