Service Worker -> addEventListener -> beforeinstallprompt 将不会运行在我的计算机上针对 chrome 中的给定网站进行 A2HS

Question

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

意思是，我有一个桌面和一个 Android 单元格 phone，两者都装有最新版本的 Google Chrome（截至 2020 年 4 月 9 日 v81. 0.4044.92（官方版本）（64 位）），我无法让 addEventListener -> beforeinstallprompt 触发。我仔细检查了 'Apps' 按钮，在这两种情况下我都仔细检查了我的桌面，并且我已经清除了开发人员工具下的存储 - >应用程序。但是没关系，我无法在这两个设备上调用 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) => {

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

Answer 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;
        });
    });
});

我希望这可以帮助其他人。

Service Worker -> addEventListener -> beforeinstallprompt 将不会运行在我的计算机上针对 chrome 中的给定网站进行 A2HS

Service Worker -> addEventListener -> beforeinstallprompt will not run A2HS on my computer for a given website in chrome

google-chrome-devtools

service-worker-events

beforeinstallprompt

更新

Service Worker -> addEventListener -> beforeinstallprompt 将不会 运行 在我的计算机上针对 chrome 中的给定网站进行 A2HS

Service Worker -> addEventListener -> beforeinstallprompt will not run A2HS on my computer for a given website in chrome

google-chrome-devtools

service-worker-events

beforeinstallprompt

更新

Service Worker -> addEventListener -> beforeinstallprompt 将不会运行在我的计算机上针对 chrome 中的给定网站进行 A2HS