文章/答案/技术大牛

发布

社区首页 >问答首页 >三星互联网浏览器--使用window.history.replaceState()时从未触发过“安装前提示”事件

问三星互联网浏览器--使用window.history.replaceState()时从未触发过“安装前提示”事件
EN

Stack Overflow用户

提问于 2021-10-16 20:10:58

回答 1查看 431关注 0票数 2

下面是我的代码添加一个按钮，让用户“安装”我的网站到一个主屏幕上的移动。Chrome的每一款设备都运行得很好，但三星的互联网浏览器却没有启动“安装前提示”(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>。如果我点击这个链接，操作系统就会为我提供一些打开链接的程序。但同时，“安装前提示符”事件也会被触发，因此会出现install按钮。!!！

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

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( {}, "", "" )，将触发事件“安装前提示符”，控制台中的输出是：

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( {}, "", "" )，则永远不会触发事件“安装前提示符”，控制台中的输出是：

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

javascript

android

single-page-application

progressive-web-apps

samsung-internet

回答 1

Stack Overflow用户

发布于 2022-02-15 13:00:31

你查过这个解决方案了吗？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);
    });
  });
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69599197

复制

相似问题

问三星互联网浏览器--使用window.history.replaceState()时从未触发过“安装前提示”事件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问三星互联网浏览器--使用window.history.replaceState()时从未触发过“安装前提示”事件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问三星互联网浏览器--使用window.history.replaceState()时从未触发过“安装前提示”事件
EN