我正在尝试使用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"
}
我想知道我的错在哪里，我该如何纠正。
任何形式的帮助都会得到通知。
提前谢谢。
附言：你可以访问https://www.trippyadive.web.app/现场观看。
你没有做错什么。
如果你清除缓存，然后在手机上使用该应用程序(安卓/chrome浏览器(，你会看到"添加到主屏幕"提示。
我在手机上测试了一下，得到了提示。