javascript - pwa - 提示添加到主屏幕不显示

Question

我使用 symfony 4.3 开发一个 Web 应用程序，然后向其中添加 pwa 功能。我在 Chrome 中使用 Lighthouse 扩展进行测试，结果如下:

现在的问题是提示添加图标到主屏幕不显示，我有这个错误:

Uncaught TypeError: Cannot read property 'prompt' of undefined

代码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;

请记住，您需要一个正在运行的服务工作线程才能触发beforeinstallprompt事件。 Service Worker 需要安全连接 (https) 或运行本地主机并通过 Web 服务器提供服务。

您可以打开 Chrome 开发工具 (F12) 并访问“应用程序”选项卡，以验证 Web list 是否已正确设置以及 Service Worker 是否已安装。

我写了一些关于service workers, caching strategies and PWAs的文章如果您有兴趣加深该主题。

<小时/> 更新
如果您想离线提供内容，则必须为 Service Worker 实现缓存策略(例如，重新验证时陈旧)。通过上面的链接，您可以了解不同的策略以及如何实现它们。

当您实现缓存策略时，所有静态资源(如 css 或 js 文件)或数据请求都将被 Service Worker 拦截，如果与给定规则匹配，它将缓存它们或从缓存。由于缓存位于客户端，因此这些资源也可以离线使用。

例如，缓存静态资源:

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
        ]
      );
    })
  );
});