Add notes on how to change icon

[serenamm]

Hi there,

I forked this repo (thank you btw for making it) and am currently unable to change the icon from the default one. Would you be able to add information to the Readme?

Thanks!

[bambier]

Hi @serenamm

I add every thing to documents however for customization, You should not change any source code in app(forked app); Just define PWA_CONFIG in your settings.py like mentioned in docs.

For changing Icon do like this :

# <myproject/settings.py>
PWA_CONFIG = {
        "name": "Progressive Web Application",
        "short_name": "PWA",
        "theme_color": "#7820f5",
        "background_color": "#7820f5",
        "display": "standalone",
        "orientation": "portrait",
        "scope": "/",
        "start_url": "/",
        "icons": [
                {
                        "src": "/static/pwa/icons/72x72.png",
                        "type": "image/png",
                        "sizes": "72x72"
                },
                {
                        "src": "/static/pwa/icons/96x96.png",
                        "type": "image/png",
                        "sizes": "96x96"
                },
                {
                        "src": "/static/pwa/icons/128x128.png",
                        "type": "image/png",
                        "sizes": "128x128"
                },
                {
                        "src": "/static/pwa/icons/144x144.png",
                        "type": "image/png",
                        "sizes": "144x144"
                },
                {
                        "src": "/static/pwa/icons/152x152.png",
                        "type": "image/png",
                        "sizes": "152x152"
                },
                {
                        "src": "/static/pwa/icons/192x192.png",
                        "type": "image/png",
                        "sizes": "192x192"
                },
                {
                        "src": "/static/pwa/icons/384x384.png",
                        "type": "image/png",
                        "sizes": "384x384"
                },
                {
                        "src": "/static/pwa/icons/512x512.png",
                        "type": "image/png",
                        "sizes": "512x512"
                }
                ],
        "lang": "en",
        "dir": "ltr",
        "description": "Progressive Web app powered by Django",
        "version": "1.",
        "manifest_version": "1.0",
        "permissions": [
                "notifications",
                "webRequest"
        ],
        "author": "PWA-django"
}

Also Make sure that all static files loads correctly.

For more information check documents its in Persian language but you can translate it to your local lang, In case of English, I test it & there is no any translation problem.

[serenamm]

Hi @serenamm

I add every thing to documents however for customization, You should not change any source code in app(forked app); Just define PWA_CONFIG in your settings.py like mentioned in docs.

For changing Icon do like this :

# <myproject/settings.py>
PWA_CONFIG = {
        "name": "Progressive Web Application",
        "short_name": "PWA",
        "theme_color": "#7820f5",
        "background_color": "#7820f5",
        "display": "standalone",
        "orientation": "portrait",
        "scope": "/",
        "start_url": "/",
        "icons": [
                {
                        "src": "/static/pwa/icons/72x72.png",
                        "type": "image/png",
                        "sizes": "72x72"
                },
                {
                        "src": "/static/pwa/icons/96x96.png",
                        "type": "image/png",
                        "sizes": "96x96"
                },
                {
                        "src": "/static/pwa/icons/128x128.png",
                        "type": "image/png",
                        "sizes": "128x128"
                },
                {
                        "src": "/static/pwa/icons/144x144.png",
                        "type": "image/png",
                        "sizes": "144x144"
                },
                {
                        "src": "/static/pwa/icons/152x152.png",
                        "type": "image/png",
                        "sizes": "152x152"
                },
                {
                        "src": "/static/pwa/icons/192x192.png",
                        "type": "image/png",
                        "sizes": "192x192"
                },
                {
                        "src": "/static/pwa/icons/384x384.png",
                        "type": "image/png",
                        "sizes": "384x384"
                },
                {
                        "src": "/static/pwa/icons/512x512.png",
                        "type": "image/png",
                        "sizes": "512x512"
                }
                ],
        "lang": "en",
        "dir": "ltr",
        "description": "Progressive Web app powered by Django",
        "version": "1.",
        "manifest_version": "1.0",
        "permissions": [
                "notifications",
                "webRequest"
        ],
        "author": "PWA-django"
}

Also Make sure that all static files loads correctly.

For more information check documents its in Persian language but you can translate it to your local lang, In case of English, I test it & there is no any translation problem.

hi, thanks so much for your reply!

It isn't clear to me where I should be pointing the "src": path to in my own repo. Can you please clarify that? I did see your documentation and tried but was not successful.

For example, I don't even have a file "/static/pwa/images/icons/512x512.png" within my own repo, but when I run the PWA locally (python mange.py runserver) it seems like it's pulling that image from the django-simple-pwa repo.

Thank you.

[bambier]

You can point from anywhere you want.
These Icons are loads from here but if you define PWA_CONFIG in your settings.py its not happens any more.
For example :

STATIC_URL = 'static/' <-- url is /static/
STATIC_ROOT = BASE_DIR / "static" # <-- root is /static/
PWA_CONFIG = {
    # ...
    "icons": [
        {
            "src": "/static/my/path/to/icon.png", # <--- from /static/
            "type": "image/png",
            "sizes": "any"
        },
    ],
    # ...
}

Also note that every time you change PWA_CONFIG you must clear browser cache because PWA caches data for offline uses so if you don't clear caches you cant be able to see changes