progressive-web-apps 相关问题

您好，我正在尝试安装自定义 PWA“添加到主屏幕”。 ServiceWorker注册成功。但是 beforeinstallpromp 函数在注册后没有调用。 您好，我正在尝试安装自定义 PWA“添加到主屏幕”。 ServiceWorker注册成功。 但是注册后并没有调用 beforeinstallpromp 函数。 <pre><code><script type="text/javascript"> function request_debug(paramdata){ document.getElementById('output').innerHTML += ' '+ paramdata; } window.addEventListener('load', function() { document.getElementById('output').style.display = "block"; if('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js').then(function(registration) { console.log('Service worker registrado com sucesso:', registration); request_debug(registration); }).catch(function(error) { console.log('Falha ao Registrar o Service Worker:', error); request_debug(error); }); var isTooSoon = true; window.addEventListener('beforeinstallprompt', function(e) { //e.preventDefault(); //e.prompt(); //promptEvent = e; request_debug(' window.addEventListener beforeinstallprompt fired!') if (isTooSoon) { //e.preventDefault(); // Prevents prompt display // Prompt later instead: setTimeout(function() { isTooSoon = false; e.prompt(); // Throws if called more than once or default not prevented }, 4000); } }); }else{ console.log('serviceWorker not in navigator'); request_debug('serviceWorker not in navigator'); } }); </script> </code></pre> 还有我的根目录中的 Service Worker... HTTPS 是安全的！ 我的清单： <pre><code>{ "background_color": "purple", "description": "lojaportaldotricot TESTE", "display": "standalone", "icons": [ { "src": "/componentes/serviceWorker/fox-icon.png", "sizes": "192x192", "type": "image/png" } ], "name": "lojaportaldotricot", "short_name": "lojaportaldotricot", "start_url": "/dashboard" } </code></pre> 仅当我设置“启用”chrome://flags/#bypass-app-banner-engagement-checks 时才有效 <hr/> 编辑：看起来我已经发现了问题。 Chrome 开发工具 (F12) 的审核选项卡提供调试信息。 <a href="https://i.stack.imgur.com/oCbZE.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL29DYlpFLnBuZw==" alt=""/></a> </question> <answer tick="true" vote="43"> 试试这个： <pre><code><script> let deferredPrompt; window.addEventListener('beforeinstallprompt', function(event) { // Prevent Chrome 67 and earlier from automatically showing the prompt e.preventDefault(); // Stash the event so it can be triggered later. deferredPrompt = e; }); // Installation must be done by a user gesture! Here, the button click btnAdd.addEventListener('click', (e) => { // hide our user interface that shows our A2HS button 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; }); }); </script> </code></pre> beforeinstallprompt 仅当某些条件成立时才会被触发: <ul> <li>PWA 必须尚未安装</li> <li>满足用户参与启发式（以前，用户必须与域交互至少 30 秒，这不再是要求）。</li> <li>您的网络应用程序必须包含有效的网络应用程序清单。</li> <li>您的 Web 应用程序必须通过安全的 HTTPS 连接提供服务。</li> <li>已使用 fetch 事件处理程序注册了 Service Worker。</li> </ul> </answer> <answer tick="false" vote="22"> 除了上述所有步骤外，还要检查应用程序是否已在此处卸载： <pre><code>chrome://apps</code></pre> 仅从 Mac 上的 Chrome Apps 文件夹中删除该应用程序似乎并不能将其从 Chrome 中删除 如果之前安装过该应用程序，则不会触发<pre><code>beforeinstallprompt</code></pre>，也不会抛出任何错误:( </answer> <answer tick="false" vote="6"> 对于需要阅读本文的人：我在尝试找出提示时在使用 Vue3 应用程序时遇到的一个小旁注： beforeInstallPrompt将在页面加载后不久触发。 因此请确保在页面加载附近设置事件侦听器。我花了几个小时才发现这一点。我试图在用户注册的某个地方添加事件监听器。页面加载后的方式。并且不明白为什么提示没有显示。 </answer> <answer tick="false" vote="5"> 是的，清单中的“start_url”不正确。 如果清单的任何部分被破坏，“beforeinstallprompt”不会被触发。 该事件未触发，因为...清单 start_url 不正确。 我最喜欢解决这个问题的方法是查看 DevTools 的 > NETWORK 选项卡中的 404。 查看清单损坏原因的另一种方法是在 DevTools 中运行 > AUDIT 并查看错误是什么。就像@sealabr 发现的那样： “失败：Service Worker 未成功提供清单的 start_url，等待获取的 start_url 超时。”这意味着“start_url” 该线程对解决生产故障有很大帮助。谢谢。 </answer> <answer tick="false" vote="3"> 您是否在页面标题中包含清单文件？ <pre><code><link rel="manifest" href="/manifest.json"> </code></pre> </answer> <answer tick="false" vote="1"> 这是 <pre><code>beforeinstallprompt</code></pre> 在移动设备上未触发的另一个原因（在装有 Chrome 的 Android 设备上观察到）： 在Web服务器上找不到<pre><code>manifest.webmanifest</code></pre>中定义的符号文件（移动浏览器报告404）。这就是我的情况下未触发 <pre><code>beforeinstallprompt</code></pre> 的原因。 @示例 <pre><code> // your manifest { /* ... */ "icons": [ { "src": "maskable_icon_x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" }, /*...*/ ] } </code></pre> 确保所有图标文件（例如 maskable_icon_x192.png）都存在于您的网络服务器上。 祝一切顺利，汤姆 </answer> </body></html>

progressive-web-apps

回答 0 投票 0

带有半透明标题的 Ionic iOS PWA 状态栏

我正在使用 ionic 框架开发一个 PWA。它看起来就像一个 iOS 应用程序，除了我不明白的一件事，那就是状态栏。在离子组件文档中

ios typescript ionic-framework progressive-web-apps

回答 1 投票 0

从 Google Chrome 打开时，Android PWA 使用端口 3000 打开

我们正在开发一个 PWA 应用程序，使用 Bubblewrap 构建，目前已在 Google Play 中提供。问题是，对于使用 Google Chrome 作为默认浏览器的测试人员来说，该 URL ......

android reactjs port progressive-web-apps bubblewrap

回答 1 投票 0

在 Safari iOS 上处理通知点击事件

我终于让网络推送通知可以在所有平台上运行。但苹果总是需要让事情变得比应有的更复杂，并且不支持通知上的点击事件（请参阅链接