PWA 清单图标无法获取

Posted 2023-02-22

【中文标题】PWA 清单图标无法获取

【英文标题】：PWA Manifest Icons failing to fetch

【发布时间】：2020-11-21 00:49:20

【问题描述】：

我想知道 Lighthouse Audit 的这个错误的路径和问题是什么：

Web 应用清单不符合可安装性要求 失败：未能获取清单图标。

我的所有图像图标都从 72x72 到 512x512，所以我想知道问题出在哪里？

在公共文件夹中，我有一个文件夹：assets/icons/（所有图标）

这是 manifest.json

  "name": "Chronowell",
  "short_name": "Chronowell",
  "theme_color": "#000099",
  "background_color": "#000099",
  "display": "fullscreen",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    ,
    
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    ,
    
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    ,
    
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    ,
    
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    ,
    
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    ,
    
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    ,
    
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    
  ],
  "splash_pages": null

【问题讨论】：

您是否在 Chrome 中运行过 Lighthouse 来检查错误？

是的，那是我从 Lighthouse 复制粘贴的错误。

哦，你知道我现在看到的是什么，看起来数组键名在单词搜索和替换过程中被替换了！

更新问题，因为它仍然无法获取

@MichaelPaccione 我面临同样的问题。你能解决它吗？

【参考方案1】：

确保图标可访问。您可以在“清单”下的“应用程序”选项卡下找到 chrome 尝试访问的 URL，如果有问题，它们将在那里显示。

我遇到的一个问题是请求图标和清单时没有发送 cookie。在这种情况下，我的服务器会返回“未授权”。

可以调整清单以像这样发送 cookie：

<link rel="manifest" href="/app/manifest.json" crossorigin="use-credentials">

对于图标，我不确定是否可以选择将它们与凭据一起发送。我通过将它们放在可公开访问的文件夹中并更新清单以包含绝对 URL 来解决此问题。