PWA 的新手，需要一些指导

Question

我是第一次尝试 PWA，并做了一个简单的教程，但是，它似乎不想让我选择 'install' 应用程序到桌面

可能漏掉了什么... 这是简单的 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",
                "type": "image/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 图标添加到桌面，然后再进行更深入的布局

感谢帮助

Answer 1

在 Chrome（以及大多数其他浏览器）中，您的图标必须包含一个 192px 图标和一个 512px 图标。您提供的图标不符合要求。

查看 https://web.dev/install-criteria/ 以了解 PWA 的典型安装标准。而且，正如 Mathias 所建议的，在 Chrome DevTools 中使用 Lighthouse 是一种 good/easy 测试您的应用并确保其符合 PWA 标准的方法。

PWA 的新手，需要一些指导

New to PWA's, need a bit of guidance

html

manifest

progressive-web-apps