can't load icons from manifest.json file

Question

so i am trying to make a Progressive web app using Flask but i have run into a problem. I can't load the icons from the manifest.json file.

Screenshoot of the PWA console

Manifest 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 (just the head part)

<!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>

Folder structure

This solution worked for me https://stackoverflow.com/a/70706510/7669642 — BruceJo, Jan 09 '23 at 16:34

score 0 · Answer 1 · answered Apr 02 '21 at 09:53

I know this is an old question, and I'm sure OP must have already found a solution, but for anyone else looking for a quick and easy fix to this problem, you can create an endpoint/route in your flask app to serve the icons.

I did it like this:

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

and then in your manifest.json you can reference the icons using this route:

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

Directory structure:

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

score 0 · Answer 2 · answered Sep 15 '22 at 12:48

This solution worked for me.

in your manifest.json, just add the file location relative to the static folder. without the leading forward slash.

like this:

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

can't load icons from manifest.json file

2 Answers2