Я использую PWA для добавления на главный экран задачи И я делаю это в php. Когда я нажимаю «Добавить на главный экран» , скрипт запускается. Я внес изменения в манифест. json согласно php как манифест. php. Я тестирую его на localhost, меняя https на ngrok.
Я пытаюсь передать динамический c url в файле манифеста.
index. html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="manifest" href="manifest.php">
<link rel="icon" href="favicon.ico" type="image/gif" sizes="16x16">
</head>
<body>
<h1>Hey!!</h1>
<div class="add-to">
<button class="add-to-btn">Add to home screen</button>
</div>
<script>
if ('serviceWorker' in navigator) {
console.log("Will the service worker register?");
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log("Yes, it did.");
}).catch(function(err) {
console.log("No it didn't. This happened:", err)
});
}
let deferredPrompt;
var div = document.querySelector('.add-to');
var button = document.querySelector('.add-to-btn');
//div.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
div.style.display = 'block';
button.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
//div.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>
</body>
</html>
manifest. php is:
<?php
$starturl = 'https://621b16b2b7c5.ngrok.io/add_to_home_screen4/images/icon192.PNG';
$manifest =
[
"short_name"=> "BetaPage",
"name"=> "BetaPage",
"theme_color"=> "#4A90E2",
"background_color"=> "#F7F8F9",
"display"=> "standalone",
"icons"=>
[
[
"src"=> "images/launcher-icon-1x.png",
"type"=> "image/png",
"sizes"=> "48x48"
],
[
"src"=> "images/launcher-icon-2x.png",
"type"=> "image/png",
"sizes"=> "96x96"
],
[
"src"=> "images/chat1.png",
"type"=> "image/png",
"sizes"=> "144x144"
],
[
"src"=> "images/icon192.png",
"type"=> "image/png",
"sizes"=> "192x192"
]
],
"start_url"=> $starturl
];
header('Content-Type: application/json');
echo json_encode($manifest);
Когда я перезагружаю веб-страницу, возникает следующая ошибка: введите описание изображения здесь
Мне нужно каждый раз нажимать ctrl + F5, чтобы запустить код. Почему?