pwa-提示添加到主屏幕未顯示

Question

我使用symfony 4.3開發了一個Web應用程序，然后向其中添加了pwa功能。 我測試了鉻的燈塔擴展，這是結果：

現在問題提示沒有顯示向主屏幕添加圖標，並且我遇到此錯誤：

未捕獲的TypeError：無法讀取未定義的屬性“提示”

代碼js：

var deferredPrompt ;
var btnAdd = document.getElementById('butInstall') ;

function launchPromptPwa(){
    var deferredPrompt;

    btnAdd = document.getElementById('butInstall') ;

    window.addEventListener('beforeinstallprompt',  (e) => {
        console.log('0');

        // Prevent Chrome 67 and earlier from automatically showing the prompt
        e.preventDefault();
        // Stash the event so it can be triggered later.
        deferredPrompt = e;
        btnAdd.style.display = block;
        showAddToHomeScreen();
    });

    btnAdd.addEventListener('click', (e) => {
        console.log('1');
        //btnAdd.style.display = 'none';
        //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;
            });
    });


    window.addEventListener('appinstalled', (evt) => {
        console.log('a2hs installed');
    });

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

}

我測試了chrome的顯示提示。

Answer 1

為了避免該錯誤，您可以首先測試deferredPrompt變量是否已初始化，如果未定義，則跳過代碼邏輯：

if (deferredPrompt) {

  deferredPrompt.prompt();

 // ... 
}

然后，會觸發beforeinstallprompt事件嗎？
如果是這樣，則在使用它初始化變量時，必須證明是否定義了event對象：

deferredPrompt = e;

請記住，您需要一個正在運行的service worker ，以便觸發beforeinstallprompt事件。 並且服務工作者需要安全連接（https）或運行localhost並通過Web服務器進行服務。

您可以打開Chrome開發工具（F12）並訪問“應用程序”標簽，以驗證是否正確設置了Web清單以及是否安裝了Service Worker。

如果您有興趣加深該主題，我寫了一些有關服務工作者，緩存策略和PWA的文章。

---

UPDATE
如果要脫機提供內容，則必須為服務工作者實施緩存策略（例如，重新驗證時失效）。 通過上面的鏈接，您可以了解不同的策略以及如何實施它們。

當您實施緩存策略時，所有靜態資產（如css或js文件）或數據請求都將被服務工作者攔截，並且如果與給定規則匹配，它將緩存它們或從緩存中提供它們。 由於緩存位於客戶端，因此這些資源也可以脫機使用。

例如，要緩存靜態資產：

 self.addEventListener('install', function(event) { event.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll( [ '/css/bootstrap.css', '/css/main.css', '/js/bootstrap.min.js', '/js/jquery.min.js', '/offline.html' // Add anything else you need to be cached during the SW install ] ); }) ); });