manifest.json conflict

[arogachev]

Site can already contain manifest.json file. For example if you use favicon generator it can be like this:

{
    "name": "Project name",
    "icons": [
        {
            "src": "\/static\/core\/images\/favicons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": 0.75
        },
        {
            "src": "\/static\/core\/images\/favicons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": 1
        },
        {
            "src": "\/static\/core\/images\/favicons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": 1.5
        },
        {
            "src": "\/static\/core\/images\/favicons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": 2
        },
        {
            "src": "\/static\/core\/images\/favicons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": 3
        },
        {
            "src": "\/static\/core\/images\/favicons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": 4
        }
    ]
}

And it's already included in head section in layout template along with other favicons related images:

<link rel="apple-touch-icon" sizes="57x57" href="{% static 'core/images/favicons/apple-touch-icon-57x57.png' %}">
<link rel="apple-touch-icon" sizes="60x60" href="{% static 'core/images/favicons/apple-touch-icon-60x60.png' %}">
<link rel="apple-touch-icon" sizes="72x72" href="{% static 'core/images/favicons/apple-touch-icon-72x72.png' %}">
<link rel="apple-touch-icon" sizes="76x76" href="{% static 'core/images/favicons/apple-touch-icon-76x76.png' %}">
<link rel="apple-touch-icon" sizes="114x114" href="{% static 'core/images/favicons/apple-touch-icon-114x114.png' %}">
<link rel="apple-touch-icon" sizes="120x120" href="{% static 'core/images/favicons/apple-touch-icon-120x120.png' %}">
<link rel="apple-touch-icon" sizes="144x144" href="{% static 'core/images/favicons/apple-touch-icon-144x144.png' %}">
<link rel="apple-touch-icon" sizes="152x152" href="{% static 'core/images/favicons/apple-touch-icon-152x152.png' %}">
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'core/images/favicons/apple-touch-icon-180x180.png' %}">
<link rel="icon" type="image/png" href="{% static 'core/images/favicons/favicon-32x32.png' %}" sizes="32x32">
<link rel="icon" type="image/png" href="{% static 'core/images/favicons/android-chrome-192x192.png' %}" sizes="192x192">
<link rel="icon" type="image/png" href="{% static 'core/images/favicons/favicon-96x96.png' %}" sizes="96x96">
<link rel="icon" type="image/png" href="{% static 'core/images/favicons/favicon-16x16.png' %}" sizes="16x16">
<!-- Manifest declaration begin -->
<link rel="manifest" href="{% static 'core/images/favicons/manifest.json' %}">
<!-- Manifest declaration end -->
<link rel="mask-icon" href="{% static 'core/images/favicons/safari-pinned-tab.svg' %}" color="#5bbad5">
<link rel="shortcut icon" href="{% static 'core/images/favicons/favicon.ico' %}">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="{% static 'core/images/favicons/mstile-144x144.png' %}">
<meta name="msapplication-config" content="{% static 'core/images/favicons/browserconfig.xml' %}">
<meta name="theme-color" content="#ffffff">

If I include {% webpush %} after favicons, it's ignored and I get the error about missing gcm_sender_id which is needed for Chrome. If I placed it above favicons section - it works, but seems like only first manifest is loaded (site / app can have only one manifest.json), further declarations are ignored so favicons will not work correctly.

Probably the order in template doesn't always matter (the order of loading by browser does), but anyways two manifest.json declarations can cause conflict.

As a current workaround, I overrided webpush.html template, removed manifest declaration from there and added gcm_sender_id to existing manifest.json.

I think we need an option to use existing manifest.json instead of creating new one.

[safwanrahman]

Thanks for the issue. I will look over into it. Seems like a improvement that should be made. It needs some documentation also!

[arogachev]

I think we should use existing manifest.json file or create new one manually (if it not exists) and add it to template:

<link rel="manifest" href="{% static 'core/js/manifest.json' %}">

Additionally adding one line to template is not a problem. gcm_sender_id needs to be added anyway (either to settings or manifest.json). By the way, it's better to not change name to GCM_ID in settings and leave it as gcm_sender_id.

[safwanrahman]

@arogachev manifest.json is no longer needed in webpush for chrome. Thanks a lot for the issue and discussion