PWA 新手，需要一些指导答案

【问题标题】：New to PWA's, need a bit of guidancePWA 新手，需要一些指导
【发布时间】：2021-01-28 11:53:53
【问题描述】：

我第一次尝试 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",
                "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 图标添加到桌面，然后再进行更深入的布局

感谢帮助

【问题讨论】：

使用 HTTPS URL 运行时，您的 PWA 是否通过 Chrome Lighthouse 工具作为有效的 PWA 传递？如果有问题，它通常会给出很好的提示。
我有一个免费的在线工具，可以搭建图标、清单和一个骨架服务工作者（我认为你不需要它提供的软件）。它将为不同的浏览器和平台提供大量图标。还要注意它包含在 index.html 中的元标记。标准不断更新。所以旧的教程今天可能不适用。

标签： html progressive-web-apps manifest

【解决方案1】：

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

查看https://web.dev/install-criteria/，了解 PWA 的典型安装标准。而且，正如 Mathias 建议的那样，在 Chrome DevTools 中使用 Lighthouse 是一种很好/简单的方法来测试您的应用并确保它符合 PWA 标准。

【讨论】：