PWA：如何在安裝提示之前重新觸發？

Question

我們的網站使用 PWA，以便訪問者可以選擇添加到主屏幕 (A2HS)。 但是，從 Google Analytics 數據來看，與接受率相比，拒絕率太高了。

我們計划讓用戶體驗更直觀、更清晰，以提高接受率。 但是，我們也希望恢復那些已經被 A2HS 駁回的訪問者的對話。

怎么做？ 據我所知，我們只能添加beforeinstallprompt偵聽器，但沒有openinstallprompt方法。

Answer 1

出於安全原因，正如其他人所寫的那樣，瀏覽器不允許您手動觸發安裝事件。

但是，有一種方法可以讓您自己測試。 轉到 chrome://flags 並啟用“繞過用戶參與度檢查”

這將啟動提示，以便您進行測試。

干杯

Answer 2

不，您不能觸發安裝橫幅及其由瀏覽器驅動。 如果您的站點滿足所有 PWA 標准並且用戶訪問的頻率足夠高（瀏覽器供應商沒有明確說明足夠頻繁），瀏覽器將再次顯示提示。 我們不能用我們的代碼觸發同樣的事情。 請參閱此答案，了解它為什么會這樣做以及替代解決方案是什么。

Answer 3

阿南德的回答目前是正確的。 但是從 Chrome 68 開始，Chrome 不會自動顯示 A2HS 提示。 您需要明確告訴 Chrome 觸發提示。

根據谷歌的文檔，這里是處理提示的代碼片段；

聽beforeinstallprompt

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

在將觸發提示的偵聽器中插入以下代碼

// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
  if (choiceResult.outcome === 'accepted') {
    console.log('User accepted the A2HS prompt');
  } else {
    console.log('User dismissed the A2HS prompt');
  }
  deferredPrompt = null;
});

請參閱此鏈接以獲取更多信息。

Answer 4

在開發模式下，

在 devtools（在 chrome 中試過）控制台中試試這個來觸發事件：

event = new Event('beforeinstallprompt')
window.dispatchEvent(event)

注意：我們將無法通過在事件上調用prompt來打開瀏覽器內模式。