PWA 中沒有添加到主屏幕彈出窗口

Question

我正在嘗試制作使用 HTML CSS 和 Z9E13B69D1D2DA9237Z102AC 創建的 static 網站的 PWA。 它作為 PWA 工作，但在智能手機的情況下不會出現添加主屏幕彈出窗口。 但是安裝按鈕出現在桌面設備中。 代碼如下：

應用程序.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);
});

清單.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 瀏覽器），您將看到添加到主屏幕提示。

我在手機上測試，我得到了提示。