Progressive Web Application (PWA):Install App

2021-01-25

前言

Progressive Web Application (PWA) 可以讓使用者連到該網站後，進行安裝。
要有什麼條件才可以讓你的 PWA 程式是可以被安裝的呢?

實作

html head 設定

在 html 的 head 中要設定 manifest、apple-touch-icon 等資訊，如下，

<link rel="manifest" href="manifest.json">
<link rel="preload" href="manifest.json" as="manifest">
<link rel="apple-touch-icon" href="assets/apple-icon-180.jpg">
<link rel="preload" href="assets/apple-icon-180.jpg" as="image">
<meta name="apple-mobile-web-app-capable" content="yes">
<script async src="https://cdn.jsdelivr.net/npm/pwacompat" crossorigin="anonymous"></script>

serviceWorker

serviceWorker js file 中要監聽 fetch event，

self.addEventListener('fetch', () => {
 // …

});

manifest.json

簡單的 manifest.json 設定如下

{
	"name": "GSS PWA Sample",
	"short_name": "GSSPwaSample",
	"description": "GSS Progressive Web Apps - Sample",
	"start_url": "/",
	"display": "standalone",
	"orientation": "portrait",
	"theme_color": "#417505",
	"background_color": "#7ed321",
	"icons": [
	  {
		"src": "assets/manifest-icon-192.png",
		"sizes": "192x192",
		"type": "image/png",
		"purpose": "maskable any"
	  },
	  {
		"src": "assets/manifest-icon-512.png",
		"sizes": "512x512",
		"type": "image/png",
		"purpose": "maskable any"
	  }
	]
}

當然，icons 所在的圖檔也是必需存在的哦。

開啟 Chrome 的開發者工具，點選 Application ，再點左上方的 Manifest 。
如果看到沒有任何錯誤會警告，就表示這個 Web App 可以被安裝，如下圖，

透過 Browser 安裝的方式

而透過 Browser 的安裝方式有 4 種。
1.在 Browser 網址列上按上 +圈，如上面的圖。
2.手機透過 Browser 會顯示安裝的畫面

3.在 Browser 右上方按下點點點後，選擇安裝「你的AP」…

4.畫面上的 Button ，按下後，顯示安裝「你的AP」…

要如何讓使用者按下Button後，出現安裝 App 呢?
1.在畫面上建立 Button

1	<button id="btnInstall" class="btn btn-success">Install App</button>

2.監聽 beforeinstallprompt ，並將 event 物件存下來

let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
    // we prevent a banner or infobar to appear
    event.preventDefault();
    // we save the event for later usage
    installPromptEvent = event
});

3.Button click 事件時，呼叫 beforeinstallprompt event 的 prompt method

const installAppButton = document.getElementById("btnInstall");
installAppButton.addEventListener('click', event => {
    if (installPromptEvent) {
        installPromptEvent.prompt();
    } else {
        // Prompt not available: Display fallback instructions
    }
})

註:beforeinstallprompt event 只在 Chromium-based browser 有效

參考資源

Web App Manifest Generator

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true