前言

在傳統(tǒng)的 Web 應(yīng)用中，通常只能通過在瀏覽器的地址欄里輸入相應(yīng)的網(wǎng)址才能進(jìn)行訪問，或者把網(wǎng)頁地址創(chuàng)建到桌面上通過點(diǎn)擊，然后在瀏覽器里打開。

傳統(tǒng)模式下，圖標(biāo)、啟動畫面、主題色、視圖模式、屏幕方向等等都無法去自定義和控制。

而目前可以通過 PWA 標(biāo)準(zhǔn)中的特性來完成上面這些功能，使得訪問 Web 應(yīng)用的路徑更短、曝光性更大，下面說一下這一塊。

---

安裝

安裝 Web 應(yīng)用需要一些前期準(zhǔn)備。

安裝條件

首先需要在網(wǎng)站下建立 manifest.json 文件，并在頁面中引入：

<link rel="manifest" href="./manifest.json" />

且 manifest.json 文件中必須配置如下字段：

{"short_name": "短應(yīng)用名","name": "長應(yīng)用名","icons": [{"src": "icons/192.png","sizes": "144x144","type": "image/png"}],"start_url": ".","display": "standalone", }

要求：

• 運(yùn)行在 https 環(huán)境。
• 必須注冊并運(yùn)行 serviceworker。
• manifest 中必須有 icons，且至少為 144x144 的 PNG 圖像。
• manifest 中 display 設(shè)置為 standalone 或者 fullscreen。
• manifest 中必須有 name 或者 short_name。
• manifest 中必須有 start_url。
• manifest 中 prefer_related_applications 未設(shè)置或設(shè)置為 false。

manifest 的詳細(xì)設(shè)置信息，可以參考前面寫的 manifest 專題文章。

顯示安裝提示

按要求配置好后，在瀏覽器端打開網(wǎng)站。

Android Chrome 端

從 Chrome 68 以后，當(dāng)滿足安裝應(yīng)用的條件時(shí)，會立即在瀏覽器底部彈出 “Mini信息條”，用戶單擊信息條時(shí)，彈出“添加到主屏幕”的對話框，點(diǎn)擊“添加”后，完成安裝，此時(shí)頁面上就出現(xiàn)在應(yīng)用圖標(biāo)。

注意：Chrome 68 - 75 的Mini 信息條是無法通過代碼來控制是否展示的，Chrome 76 之后版本支持通過代碼控制顯示。
當(dāng)用戶點(diǎn)擊 Mini 信息條上的 “X” 時(shí)，至少三個(gè)月瀏覽器不會再出現(xiàn) Mini 條的提示，但事件層不受影響，可以通過代碼實(shí)現(xiàn)。

PC Chrome 端

Chrome 73 開始支持 PC 端安裝 Web 到桌面

自定義安裝時(shí)機(jī)

當(dāng) Web 應(yīng)用符合安裝時(shí)，會觸發(fā) beforeinstallprompt 事件，并彈出安裝到屏幕的提示，我們可以基于這個(gè)事件來控制是否展示安裝提示及何時(shí)安裝。

beforeinstallprompt 事件在此應(yīng)用未安裝的情況下會每次進(jìn)入頁面都觸發(fā)，如果已安裝則不會觸發(fā)。當(dāng)用戶卸載應(yīng)用后，則會繼續(xù)觸發(fā)此事件。

安裝提示事件捕獲邏輯：

var installPromptEvent = null;window.addEventListener('beforeinstallprompt', (event) => {event.preventDefault(); // Chrome <= 67 可以阻止顯示installPromptEvent = event; // 拿到事件的引用document.querySelector('#btn-install').disabled = false; // 更新安裝 UI，通知用戶可以安裝 });

顯示 prompt 對話框

手動顯示安裝對話框，可以通過調(diào)用捕獲的 beforeinstallprompt 事件引用中的prompt() 方法來觸發(fā)。

通過事件 userChoice 屬性的 Promise 結(jié)果中的 outcome 來獲取。

用戶點(diǎn)擊安裝邏輯：

document.querySelector('#btn-install').addEventListener('click', () => {if( !installPromptEvent ) {return;}installPromptEvent.prompt();installPromptEvent.userChoice.then( choiceResult => {if (choiceResult.outcome === 'accepted') {console.log('用戶已同意添加到桌面')} else {console.log('用戶已取消添加到桌面')}}) })

已安裝事件處理

可以通過 appinstalled 來監(jiān)聽?wèi)?yīng)用是否安裝：

window.addEventListener('appinstalled', (evt) => {console.log('已安裝到桌面屏幕'); });

環(huán)境判斷

當(dāng)前應(yīng)用是通過在瀏覽器里輸入網(wǎng)址打開的，還是通過桌面圖標(biāo)打開的，可以通過 display-mode 屬性來判斷，然后根據(jù)需求設(shè)置不同的交互樣式。

假設(shè) manifest 中設(shè)置的 display 為 standalone

js 層判斷：

if (window.matchMedia('(display-mode: standalone)').matches) {console.log('display-mode 是 standalone'); }

css 層判斷：

@media all and (display-mode: standalone) {/** 自定義樣式 **/ }

Safari 判斷：

if (window.navigator.standalone === true) {console.log('display-mode 是 standalone'); }

應(yīng)用的更新

Web 應(yīng)用安裝到桌面后，對于后面修改 manifest 后的更新問題，目前每個(gè)平臺的表現(xiàn)不一樣。

Android 端

在 Android 上，當(dāng)啟動 Web 應(yīng)用時(shí)，Chrome 會根據(jù)實(shí)時(shí) manifest 來檢查當(dāng)前安裝的 manifest。如果需要更新，則在 wifi 環(huán)境下自動進(jìn)入更新隊(duì)列。

觸發(fā)更新規(guī)則：

• 更新檢查僅在啟動 Web 應(yīng)用時(shí)發(fā)生。直接啟動 Chrome 不會觸發(fā)給定 Web 應(yīng)用的更新檢查。
• Chrome 會每隔 1 天或每 30 天檢查一次更新。每天檢查更新大多數(shù)時(shí)間都會發(fā)生。在更新服務(wù)器無法提供更新的情況下，它會切換到30天的時(shí)間間隔。
• 清除 Chrome 的數(shù)據(jù)（通過Android設(shè)置中的“清除所有數(shù)據(jù)”）會重置更新計(jì)時(shí)器。
• 如果 Web Manifest URL 未更改，Chrome 將僅更新 Web 應(yīng)用。如果你將網(wǎng)頁的 manifest 路徑修改，如從 /manifest.json 更改為 /manifest2.json，則 Web 應(yīng)用將不再更新。（非常不建議這樣做）
• 只有正式版 Chrome（Stable / Beta / Dev / Canary）創(chuàng)建的 Web 應(yīng)用才會更新。它不適用于 Chromium（org.chromium.chrome）。
• 更新檢查可能會延遲，知道連接可用 wifi。

PC 端

PC 端暫時(shí)不支持更新，后續(xù)可能會支持。

---

兼容

目前此特性在各平臺的兼容性如下：

像 IOS 下的 Safari 是支持安裝到桌面的特性，但并沒有走 manifest 的規(guī)范。

IOS 上的適配

IOS 針對桌面圖標(biāo)、啟動畫面、應(yīng)用文本及主題色需要單獨(dú)的特性 Meta 進(jìn)行設(shè)置。

apple-touch-icon：應(yīng)用圖標(biāo)

需要在網(wǎng)頁中增加：

<link rel="apple-touch-icon" href="/custom_icon.png">

不同分辨率的適配：

<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

apple-touch-startup-image：啟動畫面

需要在網(wǎng)頁中增加：

<link rel="apple-touch-startup-image" href="/launch.png">

apple-mobile-web-app-title：應(yīng)用 icon 的標(biāo)題

默認(rèn)情況下使用 <title></title> 中的值，需要修改的話需要指定 meta。

<meta name="apple-mobile-web-app-title" content="應(yīng)用標(biāo)題">

apple-mobile-web-app-status-bar-style：應(yīng)用狀態(tài)欄的外觀樣式

例如設(shè)置為黑色：

<meta name="apple-mobile-web-app-status-bar-style" content="black">

兼容適配庫

正常來說，所有的特性都要按照規(guī)范中的約束來使用，但向上面的 Safari 并沒有按照規(guī)范來，這樣會增加開發(fā)者的開發(fā)成本。

所以這里做一下適配腳本，只寫規(guī)范中 manifest 的那些定義部分，剩下的交由腳本來完成。

(function(){function h(){var a=document.head.querySelector('link[rel="manifest"]'),b=a?a.href:"",d=A([b,window.location]);Promise.resolve().then(function(){if(!b)throw'can\'t find <link rel="manifest" href=".." />\'';var a={};"use-credentials"===b.crossOrigin&&(a.credentials="include");return window.fetch(b,a)}).then(function(a){return a.json()}).then(function(a){return B(a,d)}).catch(function(a){return console.warn("pwacompat.js error",a)})}function A(a){for(var b={},d=0;d<a.length;b={c:b.c},++d){b.c=a[d];try{return new URL("",b.c),function(a){return function(b){return(new URL(b,a.c)).toString()}}(b)}catch(n){}}return function(a){return a}}function t(a,b){a=document.createElement(a);for(var d in b)a.setAttribute(d,b[d]);document.head.appendChild(a);return a}function c(a,b){b&&(!0===b&&(b="yes"),t("meta",{name:a,content:b}))}function B(a,b){function d(b,d,f){var k=b.width,c=b.height,e=window.devicePixelRatio;b=u({width:k*e,height:c*e});b.scale(e,e);b.fillStyle=a.background_color||"#f8f9fa";b.fillRect(0,0,k,c);b.translate(k/2,(c-32)/2);b.font="24px HelveticaNeue-CondensedBold";b.fillStyle=r?"white":"black";k=b.measureText(v).width;f&&(c=f.width/e,e=f.height/e,128<e&&(c/=e/128,e=128),48<=c&&48<=e&&(b.drawImage(f,c/-2,e/-2,c,e),b.translate(0,e/2+32)));b.fillText(v,k/-2,0);f=document.createElement("link");f.setAttribute("rel","apple-touch-startup-image");f.setAttribute("media","(orientation: "+d+")");f.setAttribute("href",b.canvas.toDataURL());return f}function n(a){var b=d(window.screen,"portrait",a);a=d({width:window.screen.height,height:window.screen.width},"landscape",a);w.forEach(function(a){return a.remove()});document.head.appendChild(b);document.head.appendChild(a);w.add(b);w.add(a)}var g=a.icons||[];g.sort(function(a,b){return parseInt(b.sizes,10)-parseInt(a.sizes,10)});var x=g.map(function(a){a={rel:"icon",href:b(a.src),sizes:a.sizes};t("link",a);if(p)return a.rel="apple-touch-icon",t("link",a)}),q=a.display;g=-1!==C.indexOf(q);c("mobile-web-app-capable",g);D(a.theme_color||"black");E&&(c("msapplication-starturl",a.start_url||"/"),c("msapplication-TileColor",a.theme_color));document.head.querySelector('[name="theme-color"]')||c("theme-color",a.theme_color);var h=F(a.orientation);c("x5-orientation",h);c("screen-orientation",h);"fullscreen"===q?(c("x5-fullscreen","true"),c("full-screen","yes")):g&&(c("x5-page-mode","app"),c("browsermode","application"));if(p){var r=y(a.background_color||"#f8f9fa"),v=a.name||a.short_name||document.title;(q=G(a.related_applications))&&c("apple-itunes-app","app-id="+q);c("apple-mobile-web-app-capable",g);c("apple-mobile-web-app-title",v);var w=new Set;n(null);if(x.length){var m=x[0],l=new Image;l.crossOrigin="anonymous";l.onload=function(){n(l);if(a.background_color){var b=z(l,a.background_color);null!==b&&(m.href=b,x.slice(1).forEach(function(b){var d=new Image;d.crossOrigin="anonymous";d.onload=function(){var c=z(d,a.background_color,!0);b.href=c};d.src=b.href}))}};l.src=m.href}}}function G(a){var b;(a||[]).filter(function(a){return"itunes"===a.platform}).forEach(function(a){a.id?b=a.id:(a=a.url.match(/id(\d+)/))&&(b=a[1])});return b}function F(a){a=String(a||"");a=a.substr(0,3);return"por"===a?"portrait":"lan"===a?"landscape":""}function D(a){if(p||H){var b=y(a);if(p)c("apple-mobile-web-app-status-bar-style",b?"black":"default");else{try{var d=Windows.UI.ViewManagement.ApplicationView.getForCurrentView().titleBar}catch(n){d=null}null===d?console.debug("UWP no titleBar"):(d.foregroundColor=r(b?"black":"white"),d.backgroundColor=r(a))}}}function r(a){a=m(a);return{r:a[0],g:a[1],b:a[2],a:a[3]}}function m(a){var b=u();b.fillStyle=a;b.fillRect(0,0,1,1);return b.getImageData(0,0,1,1).data}function y(a){a=m(a).map(function(a){a/=255;return.03928>a?a/12.92:Math.pow((a+.055)/1.055,2.4)});return 3<Math.abs(1.05/(.2126*a[0]+.7152*a[1]+.0722*a[2]+.05))}function z(a,b,d){d=void 0===d?!1:d;var c=u(a);c.drawImage(a,0,0);if(!d&&255==c.getImageData(0,0,1,1).data[3])return null;c.globalCompositeOperation="destination-over";c.fillStyle=b;c.fillRect(0,0,a.width,a.height);return c.canvas.toDataURL()}function u(a){a=void 0===a?{width:1,height:1}:a;var b=a.height,c=document.createElement("canvas");c.width=a.width;c.height=b;return c.getContext("2d")}if("fetch"in window){var C=["standalone","fullscreen","minimal-ui"],p=navigator.vendor&&-1!==navigator.vendor.indexOf("Apple"),E=navigator.userAgent&&-1!==navigator.userAgent.indexOf("Edge"),H="undefined"!==typeof Windows;"complete"===document.readyState?h():window.addEventListener("load",h)}})();

調(diào)用地址：http://unpkg.alipay.com/pwacompat@2.0.9/pwacompat.min.js。

使用：

<link rel="manifest" href="./manifest.json" /> <script src="http://unpkg.alipay.com/pwacompat@2.0.9/pwacompat.min.js" crossorigin="anonymous"></script>

---

博客名稱：王樂平博客

CSDN博客地址：http://blog.csdn.net/lecepin

總結(jié)

以上是生活随笔為你收集整理的PWA(Progressive Web App)入门系列：安装 Web 应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。