Javascript 如何在php中添加主屏幕功能

Javascript 如何在php中添加主屏幕功能,javascript,homescreen,manifest.json,Javascript,Homescreen,Manifest.json,我正在使用PHP。我想要功能性“添加到主屏幕”。我读了一些博客,编写了一些代码,但仍然不起作用 我的文件结构如下: 我的index.html是: <!DOCTYPE html> <html> <head> <title>Template One</title> <link rel="manifest" href="/manifest.json"> </head> <body>

我正在使用PHP。我想要功能性“添加到主屏幕”。我读了一些博客,编写了一些代码,但仍然不起作用

我的文件结构如下:

我的index.html是:

<!DOCTYPE html>
<html>
<head>
    <title>Template One</title>
    <link rel="manifest" href="/manifest.json">
</head>
<body>
    <div class="mainContainer template1">
        hello
    </div>
 </body>
 <!-- Latest compiled and minified JavaScript -->
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

 <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)
});
}
</script>
</html>
service-worker.js为空。

当我在chrome上重新加载时。它不起作用

我走对了吗。请给出解决方案

{
"short_name": "digbiz_screen",
"name": "Larage name Digbiz",
"theme_color": "#4A90E2",
"background_color": "#F7F8F9",
"display": "standalone",
"icons": [
{
  "src": "chat1.png",
  "type": "image/png",
  "sizes": "48x48"
},
{
  "src": "chat1.png",
  "type": "image/png",
  "sizes": "96x96"
},
{
  "src": "chat1.png",
  "type": "image/png",
  "sizes": "144x144"
},
{
  "src": "chat1.png",
  "type": "image/png",
  "sizes": "192x192"
}
],
"start_url": "/?utm_source=launcher"
}