无法从 manifest.json 文件加载图标答案

【问题标题】：can't load icons from manifest.json file无法从 manifest.json 文件加载图标
【发布时间】：2020-07-23 10:47:42
【问题描述】：

所以我尝试使用Flask 制作Progressive web app，但我遇到了问题。我无法从manifest.json file 加载图标。

PWA 控制台的屏幕截图

清单 Json

{
    "name": "PWA using Flask",
    "short_name": "Flask PWA",
    "theme_color": "#042ad3",
    "background_color": "#ffffff",
    "icons": [
        {
                "src": "/app/static/images/icon-64.png",
                "type": "image/png",
                "sizes": "64x64"
            },
            {
                "src": "/app/static/images/icon-96.png",
                "type": "image/png",
                "sizes": "96x96"
            },
            {
                "src": "/app/static/images/icon-192.png",
                "type": "image/png",
                "sizes": "192x192"
            },
            {
                "src": "/app/static/images/icon-512.png",
                "type": "image/png",
                "sizes": "512x512"
            }
    ],
    "start_url": "/",
    "display": "standalone",
    "orientation": "portrait"
}

PWA HTML（只是头部）

<!DOCTYPE html>
<html lang="en">

<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">
    <link rel="stylesheet" href="{{ url_for('static',  filename='bulma/css/bulma.min.css') }}">
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
    <meta name="description" content="My First PWA">
    <title>{{title}}</title>
</head>
</html>

文件夹结构

【问题讨论】：

标签： flask progressive-web-apps manifest.json

【解决方案1】：

我知道这是一个老问题，而且我确信 OP 一定已经找到了解决方案，但是对于寻求快速轻松解决此问题的任何其他人，您可以在您的烧瓶应用程序中创建一个端点/路由提供图标。

我是这样做的：

@app.route('/files/<path:filename>')
def files(filename):
    return send_from_directory('./static/img/icons/', filename)

然后在您的manifest.json 中，您可以使用此路线引用图标：

"icons": [
{
  "src": "/files/icon-72.png",
  "type": "image/png",
  "sizes": "72x72"
}, 
... ]

目录结构：

project/
---static/
------manifest.json
------img/
---------icons
---templates/
app.py

【讨论】：