问题描述
我是第一次尝试 PWA 并做了一个简单的教程，但是，它似乎不想让我选择将应用程序“安装”到桌面
可能错过了什么... 这是简单的 PWA 代码
************************************
/**sw.js**/
////////////////////////////////////////////////////////////////
// on install - the application shell cached
self.addEventListener('install',function(event) {
event.waitUntil(
caches.open('sw-cache').then(function(cache) {
//static files that make up the application shell are cached
return cache.add('index.html');//if you have css file and app.js files
//please add here as well to be cached! we havent added as we have a simple app
//but your website uses them
})
);
});
//with request network
self.addEventListener('fetch',function(event) {
event.respondWith(
//try the cache
caches.match(event.request).then(function(response) {
//return it if there is a response,or else fetch again
return response || fetch(event.request);
})
);
});
////////////////////////////////////////////////////////////////
/**manifest.json**/
////////////////////////////////////////////////////////////////
{
"short_name": "WD1","name": "Testing PWA","icons": [
{
"src": "/images/default-150X131.png","type": "image/png","sizes": "150x150"
},{
"src": "/images/default-400X200.png","sizes": "150x 150"
}
],"start_url": "/index.html","background_color": "#000000","display": "standalone","theme_color": "#616161"
}
////////////////////////////////////////////////////////////////
/**index.html**/
////////////////////////////////////////////////////////////////
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Holistic PWA test</title>
<Meta name="description" content="Software is Feeding the world" />
<Meta name="theme-color" content="#213e20" />
<link rel="manifest" href="manifest.json">
<script>
//if browser support sevice worker
if ('seviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js');
};
</script>
</head>
<h1>Welcome to MELP</h1>
<p>this is some text to fill out the demo page</p>
<p>this is some text to fill out the demo page,this is some text to fill out the demo page,this is some text to fill out the demo page</p>
我只是希望它使用此演示将 pwa 图标添加到桌面，然后再进行更深入的布局
感谢帮助
解决方法
在 Chrome（和大多数其他浏览器）中，您的图标必须包含一个 192 像素的图标和一个 512 像素的图标。您提供的图标不符合要求。
查看 https://web.dev/install-criteria/ 以了解 PWA 的典型安装条件。而且，正如 Mathias 所建议的，在 Chrome DevTools 中使用 Lighthouse 是测试您的应用并确保其符合 PWA 标准的好/简单方法。