Javascript 如何在PWA中传递manifest.json中的动态URL
我正在使用PWA来添加到主屏幕任务，我是用php来完成这项任务的。当我单击“添加到主屏幕按钮”时，脚本运行。我根据php将manifest.json更改为manifest.php。我正在本地主机上通过ngrok更改https来测试它 我试图在清单文件中传递动态url index.html是：Javascript 如何在PWA中传递manifest.json中的动态URL,javascript,php,json,progressive-web-apps,manifest.json,Javascript,Php,Json,Progressive Web Apps,Manifest.json,我正在使用PWA来添加到主屏幕任务，我是用php来完成这项任务的。当我单击“添加到主屏幕按钮”时，脚本运行。我根据php将manifest.json更改为manifest.php。我正在本地主机上通过ngrok更改https来测试它 我试图在清单文件中传递动态url index.html是： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
<!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>
文件
嘿
添加到主屏幕
if（导航器中的“serviceWorker”）{
日志（“服务人员会注册吗？”）；
navigator.serviceWorker.register（'service-worker.js'））
.然后（功能（reg）{
log（“是的，它做到了。”）；
}).catch（函数（err）{
log（“不，没有。发生了：”，错误）
});
}
让延迟提示；
var div=document.querySelector（'.add to'）；
var button=document.querySelector（'.add to btn'）；
//div.style.display='none'；
window.addEventListener（'beforeinstallprompt'，（e）=>{
//防止Chrome 67及更早版本自动显示提示
e、 预防默认值（）；
//隐藏事件，以便稍后触发。
延迟提示=e；
div.style.display='block'；
按钮。addEventListener（'单击'，（e）=>{
//隐藏显示A2HS按钮的用户界面
//div.style.display='none'；
//显示提示
deferredPrompt.prompt（）；
//等待用户响应提示
deferredPrompt.userChoice
.然后（（choiceResult）=>{
如果（choiceResult.Output==‘已接受’）{
log（'用户接受A2HS提示'）；
}否则{
log（“用户取消了A2HS提示”）；
}
deferredPrompt=null；
});
});
});
<?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);
我找到了解决办法。我的service-worker.js文件不正确。现在我将下面的代码粘贴到service-worker.js中，它就运行了
self.addEventListener('fetch', function(event) {});
我找到了解决办法。我的service-worker.js文件不正确。现在我将下面的代码粘贴到service-worker.js中，它就运行了
self.addEventListener('fetch', function(event) {});
你确定ngrock正在工作并提供你的内容吗？是的…当我按ctrl+F5时，ngrock工作并提供你的内容吗？是的…当我按ctrl+F5时，ngrock工作并提供你的内容时，ngrock工作并提供你的内容吗？是的…当我按ctrl+F5时，ngrock工作并提供你的内容时，ngrock工作并提供你的内容吗