PJCHENder 未整理筆記

[PWA] 將網頁加到主畫面(Add to Home Screen)

2018-03-12

[PWA] 將網頁加到主畫面(Add to Home Screen)

@(JavaScript)[WebAPIs, PWA, Progressive Web Apps - The Complete Guide]

keywords: Add to Homescreen, A2HS, Web App Install Banners

目錄

[TOC]

將 APP 加到手機主畫面

只要符合條件時,Chrome 會自動跳出安裝 APP 的詢問視窗(prompt)

相關事件

keywords: beforeinstallprompt

檢測使用者是否有安裝 App:當 Web 頁面符合條件時,Chrome 會自動跳出安裝 APP 的詢問視窗(prompt),接著我們可以透過監聽 beforeinstallprompt 這個事件來看使用者對此 prompt 做了什麼反應

延遲 Prompt 出現的時機:預設是在符合 Add to Home Screen 條件的情況下,Chrome 會自動跳出詢問是否要安裝 App 的視窗(prompt),但有些時候它跳出的時機並不是我們想要的,這時候我們可以把 prompt 跳出的事件存起來,在稍後(我們預期的時候)透過 prompt() 在跳出來詢問使用者。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// deferredPromt 用來儲存 beforeinstallprompt 事件
var deferredPrompt;

window.addEventListener('beforeinstallprompt', function(e) {
console.log('beforeinstallprompt Event fired');
e.preventDefault();

// Stash the event so it can be triggered later.
deferredPrompt = e;

return false;
});

btnSave.addEventListener('click', function() {
if(deferredPrompt !== undefined) {
// The user has had a positive interaction with our app and Chrome
// has tried to prompt previously, so let's show the prompt.
deferredPrompt.prompt();

// 看看使用者針對這個 prompt 做了什麼回應
deferredPrompt.userChoice.then(function(choiceResult) {

console.log(choiceResult.outcome);

if(choiceResult.outcome == 'dismissed') {
console.log('User cancelled home screen install');
}
else {
console.log('User added to home screen');
}

// We no longer need the prompt. Clear it up.
deferredPrompt = null;
});
}
});

測試方式

使用 Chrome Dev Tool

設定完成後可以點選 Application > Manifest > Add to home screen,如果點選後 console 沒有噴錯誤訊息,表示可將此網頁新增到手機主畫面。

Imgur

使用 LightHouse

另一種測試方式是使用 Google 提供的 Lighthouse 檢測。

參考資料

掃描二維條碼,分享此文章