0

我有最糟糕的一周试图弄清楚如何重置我的 Chrome 浏览器设置，因为我有一个功能齐全的网站，其中包含一个工作清单、服务工作者和 A2HS 脚本。它完美地工作，除了我个人拥有的任何带有谷歌浏览器的设备......

意思是，我有一台台式机和一部 Android 手机，两者都装有最新版本的 Google Chrome（截至 2020 年 4 月 9 日 v81.0.4044.92（官方版本）（64 位）），但我无法获取 addEventListener - > beforeinstallprompt 开火。我已经仔细检查了“应用程序”按钮，在这两种情况下我都仔细检查了我的桌面，并且我已经清除了开发人员工具 -> 应用程序下的存储空间。但是无论如何，没有什么能让我在这两个设备上调用 addEventListener -> beforeinstallprompt 。

这是真正的踢球者，它在我尝试过的其他所有人的计算机上都能完美运行！它只是拒绝在我的开发系统上工作。它必须与我自己设备上的安全设置有关，但我需要弄清楚这一点，因为它也可能发生在该网站的访问者或我客户的系统上，而且我完全没有想法，我已经已经为此工作了3天。一定有一个神奇的按钮可以在 Chrome 设置中的某个地方解决这个问题。

有什么想法吗？

非常感激。

文斯

更新

好的，我已经在一个之前甚至没有安装 Chrome 并且它也不想在那里工作的系统上对此进行了测试，所以缓存不再是问题，它一定是我的代码有问题。这就是我得到的。

显现：

{
    "short_name": "ASDF",
    "name": "ASDF Dentistry",
    "description": "At ASDF Dentistry bla bla bla.",
    "icons": [
        {
            "src": "/ccmstpl/_img/ico/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/ccmstpl/_img/ico/android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/ccmstpl/_img/ico/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "theme_color": "#006058",
    "background_color": "#006058",
    "display": "standalone",
    "scope": "/",
    "lang": "en",
    "dir": "ltr"
}

服务工作者：

if(navigator.serviceWorker){
    window.addEventListener('load',() => {
        navigator.serviceWorker
        .register('/sw.js')
        .then(console.log('[ServiceWorker] Registered Successfully'))
        .catch(err => console.log(`[ServiceWorker] Error: ${err}`));
    });
} else {
    console.log('Service Worker not supported.');
}

安装按钮：

<div id="installContainer" class="hidden">
    <button id="butInstall" type="button">
        Install
    </button>
</div>

CSS：

.hidden{display:none !important}

#installContainer{
    position:absolute;
    top:1em;
    display:flex;
    justify-content:center;
    width:100%;
    z-index:10;
}

#installContainer button{
    background-color:green;
    border:1px solid white;
    color:white;
    font-size:1em;
    padding:0.75em
}

#installContainer button:hover{background-color:lightGreen}

添加到主屏幕 (A2HS) 代码：

let deferredPrompt;
const divInstall = document.getElementById('installContainer');
const butInstall = document.getElementById('butInstall');

window.addEventListener('beforeinstallprompt',(e) => {
    console.log('beforeinstallprompt','beforeinstallprompt', e);
    // Prevent Chrome 76 and later from showing the mini-infobar
    e.preventDefault();
    // Stash the event so it can be triggered later.
    deferredPrompt = e;
    // Remove the 'hidden' class from the install button container
    divInstall.classList.toggle('hidden',false);

    butInstall.addEventListener('click',(e)=>{
        // hide our user interface that shows our A2HS button
        divInstall.classList.toggle('hidden',true);
        // 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;
        });
    });
});

在 A2HS 代码中，它从不执行这一行：

window.addEventListener('beforeinstallprompt',(e) => {

我认为当我在我妻子的计算机上检查它时它起作用的原因是因为它仍在运行几周前的旧缓存版本。有任何想法吗？

4

1 回答 1

1

知道了。

事实证明，您需要将 A2HS 代码保持在 ServiceWorker 注册代码附近。

我有在我的索引页面中注册 ServicesWorker 的代码，但我有在我的主 javascript 文件中设置 A2HS 代码的代码，该文件稍后被调用。事实证明，这种代码分离不会产生错误消息，并且会完全停止

window.addEventListener('beforeinstallprompt',(e) => {

代码。这使得故障排除变得非常困难。所以解决方案是，只需将它们堆叠在一起，如下所示：

if(navigator.serviceWorker){
    window.addEventListener('load',() => {
        navigator.serviceWorker
        .register('/sw.js')
        .then(console.log('[ServiceWorker] Registered Successfully'))
        .catch(err => console.log(`[ServiceWorker] Error: ${err}`));
    });
} else {
    console.log('Service Worker not supported.');
}

let deferredPrompt;
const divInstall = document.getElementById('installContainer');
const butInstall = document.getElementById('butInstall');

window.addEventListener('beforeinstallprompt',(e) => {
    console.log('beforeinstallprompt','beforeinstallprompt', e);
    // Prevent Chrome 76 and later from showing the mini-infobar
    e.preventDefault();
    // Stash the event so it can be triggered later.
    deferredPrompt = e;
    // Remove the 'hidden' class from the install button container
    divInstall.classList.toggle('hidden',false);

    butInstall.addEventListener('click',(e)=>{
        // hide our user interface that shows our A2HS button
        divInstall.classList.toggle('hidden',true);
        // 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;
        });
    });
});

我希望这可以帮助别人。

于 2020-04-10T07:59:49.050 回答