我已经制作了 PWA、清单和服务工作人员等等，并且 PWA 安装（至少在 Chrome 上）没有出现。我已阅读所有要求并已满足它们，但仍然没有显示安装提示。
manifest.json{
"name": "Surplus Learning",
"start_url": "/",
"display": "browser",
"icons": [
{
"src": "assets/images/icon.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "assets/images/icon.png",
"type": "image/png",
"sizes": "any",
"purpose": "any"
},
{
"src": "assets/images/icon.png",
"type": "image/png",
"sizes": "any",
"purpose": "maskable"
}
],
"theme_color": "#333333",
"background_color": "#333333",
"short_name": "S L",
"description": "The best place for students.",
"dir": "rtl",
"orientation": "landscape",
"display_override": [
"browser"
],
"categories": [
"education",
"productivity"
],
"prefer_related_applications": false,
"lang": "en"
}
服务人员
// This is the service worker with the combined offline experience (Offline page + Offline copy of pages)
const CACHE = "pwabuilder-offline-page";
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
const offlineFallbackPage = "offline.html";
self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});
self.addEventListener('install', async (event) => {
event.waitUntil(
caches.open(CACHE)
.then((cache) => cache.add(offlineFallbackPage))
);
});
if (workbox.navigationPreload.isSupported()) {
workbox.navigationPreload.enable();
}
workbox.routing.registerRoute(
new RegExp('/*'),
new workbox.strategies.StaleWhileRevalidate({
cacheName: CACHE
})
);
self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
event.respondWith((async () => {
try {
const preloadResp = await event.preloadResponse;
if (preloadResp) {
return preloadResp;
}
const networkResp = await fetch(event.request);
return networkResp;
} catch (error) {
const cache = await caches.open(CACHE);
const cachedResp = await cache.match(offlineFallbackPage);
return cachedResp;
}
})());
}
});
该网站可以运行并提供缓存页面，但不显示安装提示。请帮忙！
Chrome 开发工具有一个名为“应用程序”的选项卡。此选项卡显示有关您当前网站的 PWA 信息，还显示导致应用程序无法安装的原因。请看一下这些信息。
我最好的猜测是设置为浏览器的显示属性是问题所在。 尝试将其设置为
"display": "standalone"
只是为了确认这不是问题。
确保您确实像这样链接了清单
<link rel="manifest" href="manifest.json" />
在主页的
<head>最好的解决方案是在构建文件夹中的本地构建之后检查您的index.html 文件 如果是这样的话
然后只需将 href 修改为 href ="/manifest.json 或清单的链接
并手动部署构建文件夹，这在 netlify 中对我有用