2

下面是我的代码，用于添加一个按钮，让用户将我的网站“安装”到移动设备的主屏幕上。在每台使用 Chrome 的设备上一切都运行良好，但在三星互联网浏览器上却没有，因为三星互联网浏览器根本没有触发“beforeinstallprompt”（v.15.0.4.9）。

let deferredPrompt;
const addPwaButton = document.querySelector('.add-pwa-button');

console.log("workerLoad.js");

window.addEventListener('beforeinstallprompt', function(e) {
  console.log("beforeinstallprompt");
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to notify the user they can add to home screen

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

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

我在页面的标题中放置了另一个侦听器，以确保我不会错过该事件，但不是运气，该事件不会被触发：

window.addEventListener('beforeinstallprompt', function(e) {
  console.log("beforeinstallprompt!");
})

当事件被触发时。在我的页面中，我有一个这样的联系链接：<a href="mailto:contact@example.com">Contact</a>。如果我单击链接，那么操作系统会为我提供许多用于打开链接的程序。但同时，'beforeinstallprompt' 事件被触发，所以安装按钮出现。！！！

在按下链接之前，这是控制台中的输出：

workerLoad.js
ServiceWorker registration successful with scope:  https://example.com/

按下链接后：

beforeinstallprompt
Banner not shown: beforeinstallpromptevent.preventDefault() called. The page must call beforeinstallpromptevent.prompt() to show the banner.

请记住，在每台装有 Chrome 的设备上一切正常。我可以用三星互联网浏览器做什么？

更新 - 我删除代码，直到我设法隔离三星互联网浏览器的问题：

<!doctype html> 
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="manifest" href="/manifest.json">
      <script>
         if ('serviceWorker' in navigator) {
           window.addEventListener('load', function() {
             navigator.serviceWorker.register('/sw.js').then(function(registration) {
               // Registration was successful
               console.log('ServiceWorker registration successful with scope: ', registration.scope);
             }, function(err) {
               // registration failed :(
               console.log('ServiceWorker registration failed: ', err);
             });
           });
         }

         let deferredPrompt;
         window.addEventListener('beforeinstallprompt', function(e) {
           // Prevent Chrome 67 and earlier from automatically showing the prompt
           e.preventDefault();
           // Stash the event so it can be triggered later.
           deferredPrompt = e;
           // Update UI to notify the user they can add to home screen
           console.log("beforeinstallprompt!");
         });

         // this is the line that create the problem, no matter what are the parameters
         window.history.replaceState( {}, "", "" );
         
      </script>
   </head>
   <body>
      test
   </body>
</html>

如果我删除此行window.history.replaceState( {}, "", "" )，则会触发事件 'beforeinstallprompt' 并且控制台中的输出为：

ServiceWorker registration successful with scope:  https://example.com/
beforeinstallprompt!
Banner not shown: beforeinstallpromptevent.preventDefault() called. The page must call beforeinstallpromptevent.prompt() to show the banner.

如果我不删除该行window.history.replaceState( {}, "", "" )，则永远不会触发事件“beforeinstallprompt”，并且控制台中的输出为：

ServiceWorker registration successful with scope:  https://example.com/
4

1 回答 1

0

你检查过这个解决方案吗？https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent/prompt

let deferredPrompt;
let isTooSoon = true; // <-- add this

const addPwaButton = document.querySelector('.add-pwa-button');

console.log("workerLoad.js");

window.addEventListener('beforeinstallprompt', function(e) {
  if (isTooSoon) {  // <-- add this
    console.log("beforeinstallprompt");
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    e.preventDefault();
    // Stash the event so it can be triggered later.
    deferredPrompt = e;
    // Update UI to notify the user they can add to home screen

    addPwaButton.addEventListener('click', function(e) {
      isTooSoon = false;  // <-- add this

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

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
于 2022-02-15T13:00:31.423 回答