У меня самая плохая неделя, когда я пытаюсь выяснить, как сбросить настройки браузера Chrome, потому что у меня есть полностью работающий веб-сайт, который содержит рабочий манифест, сервисного работника и скрипт A2HS. Он отлично работает, за исключением любого устройства, которым я лично владею, с Google Chrome на нем ...
То есть у меня есть рабочий стол и сотовый телефон Android с последней версией Google Chrome на обоих (по состоянию на 9 апреля 2020 года v81.0.4044.92 (Официальная сборка) (64-разрядная версия)), и я не могу получить addEventListener -> beforeinstallprompt для запуска либо. Я дважды проверил кнопку «Приложения», в обоих случаях я дважды проверил свой рабочий стол и очистил хранилище в разделе «Инструменты разработчика» -> «Приложение». Но не важно, ничто не позволяет мне вызывать addEventListener -> beforeinstallprompt на этих двух устройствах.
Вот настоящий кикер, он отлично работает на всех остальных компьютерах, которые я пробую! Это только отказывается работать на моих системах разработки. Это должно быть как-то связано с настройками безопасности на моих собственных устройствах, но я должен это выяснить, потому что это может произойти с посетителем этого сайта или системами моего клиента, и у меня совершенно нет идей, я работал над этим в течение 3 дней. Должна быть волшебная кнопка c, которая исправит это где-то в настройках 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"
}
ServiceWorker:
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) => {
Я думаю, что причина этого сработало, когда я проверил его на своем компьютере с женой, потому что на нем все еще работала старая кэшированная версия из пары недель go. Есть идеи?