PWA 中没有添加到主屏幕弹出窗口

Question

我正在尝试为使用 HTML CSS 和 Javascript 创建的静态网站制作 PWA。它作为 PWA 工作，但在智能手机的情况下不会出现添加主屏幕弹出窗口。但是安装按钮出现在桌面设备中。代码如下：

app.js：

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("sw.js")
    .then(function (reg) {
      console.log("Successfully registered service worker", reg);
    })
    .catch(function (err) {
      console.warn("Error whilst registering service worker", err);
    });
}

sw.js：

const staticCacheName = "trippyadiveCache";
const assets = [
  "/",
  "/404.html",
  "/allLocations.html",
  "/app.js",
  "/favico.png",
  "/favicon.svg",
  "/favicon.ico",
  "/index.html",
  "/manali.html",
  "/submitBooking.js",
  "/css/bootstrap.css",
  "css/style.css",
  "css/font.css",
  "css/fontawesome-all.css",
];

self.addEventListener("install", (evt) => {
  evt.waitUntil(
    caches.open(staticCacheName).then((cache) => {
      console.log("caching cell assets");
      cache.addAll(assets);
    })
  );
});

//activate event
self.addEventListener("activate", (evt) => {
  console.log("service worker activated");
});

//fetch event
self.addEventListener("fetch", (evt) => {
  console.log("fetch Event", evt);
});

menifest.webmenifest：

{
 "short_name": "Trippyadive",
 "name": "Trippyadive",
 "lang": "en",
 "description": "No Price Hike At Peak Season",
 "start_url": "index.html",
 "background_color": "#ffffff",
 "theme_color": "#ffffff",
 "dir": "ltr",
 "display": "standalone",
 "orientation": "any",
 "prefer_related_applications": "true",
 "icons": [
  {
   "src": "images/icon/android-icon-192x192-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "192x192"
  },
  {
   "src": "/apple-icon-180x180-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "180x180"
  },
  {
   "src": "images/icon/apple-icon-152x152-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "152x152"
  },
  {
   "src": "images/icon/apple-icon-144x144-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "144x144"
  },
  {
   "src": "images/icon/apple-icon-120x120-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "120x120"
  },
  {
   "src": "images/icon/apple-icon-114x114-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "114x114"
  },
  {
   "src": "images/icon/favicon-96x96-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "96x96"
  },
  {
   "src": "images/icon/apple-icon-76x76-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "76x76"
  },
  {
   "src": "images/icon/apple-icon-72x72-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "72x72"
  },
  {
   "src": "images/icon/apple-icon-60x60-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "60x60"
  },
  {
   "src": "images/icon/apple-icon-57x57-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "57x57"
  },
  {
   "src": "images/icon/favicon-32x32-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "32x32"
  },
  {
   "src": "images/icon/favicon-16x16-dunplab-manifest-26311.png",
   "type": "image/png",
   "sizes": "16x16"
  }
 ],
 "prefer_related_applications": "false"
}

我想知道我的错在哪里，我该如何改正。

任何形式的帮助都会受到欢迎。

提前致谢。

PS：您可以访问https://www.trippyadive.web.app/观看直播。

Answer 1

你没有做错任何事。

如果您清除缓存，然后在手机（android/chrome 浏览器）上使用该应用程序，您将看到添加到主屏幕提示。

我在手机上测试过，得到了提示。