Question

我用symfony 4.3开发了一个Web应用程序，然后在其中添加了pwa功能。我测试了Chrome中的灯塔扩展，结果如下：

现在问题是提示不显示将图标添加到主屏幕，并且出现此错误：

未捕获的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 workers, caching strategies and PWAs的文章。

更新
如果要脱机提供内容，则必须为服务工作者实施缓存策略（例如，重新验证时失效）。通过上面的链接，您可以了解不同的策略以及如何实施它们。

实施缓存策略时，所有静态资产（如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
        ]
      );
    })
  );
});

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

1 个答案: