What Happens if You Have Multiple Manifest Files on Your Website?

What is a Manifest file?

A manifest file is a file containing metadata, ex- GCM sender ID, GCM user visibility, etc. A manifest file is used to map subscribers to the GCM sender ID. The manifest file format should always be Application/JSON.

This article is dedicated to those HTTPS implementation cases which are having multiple manifest files in the source code of the root domain of the website.

In these cases, the script is not able to identify which manifest file to process.

For example, you have 2 manifest files as:

1. https://yourwebsite.com/skin/frontend/abcd/default/images/favicons/manifest.json

{
  "name": "ABCD",
  "icons": [
    {
      "src": "\/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image\/png",
      "density": 0.75
    },
    {
      "src": "\/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image\/png",
      "density": 1
    }
  ]
}

2. https://yourwebsite.com/manifest.json (Wingify Engage’s manifest file)

{
  "short_name": "ABCD GmbH",
  "icons": [
    {
      "src": "/logo_192_by_192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "gcm_sender_id": "1930042*****",
  "gcm_user_visible_only": true
}

Now, merge the complete content of your first manifest file with the second manifest file.

The content of the merged file should look like:

{
  "name": "ABCD",
  "icons": [
    {
      "src": "\/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image\/png",
      "density": 0.75
    },
    {
      "src": "\/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image\/png",
      "density": 1
    }
  ],
  "short_name": "ABCD GmbH",
  "icons": [
    {
      "src": "/logo_192_by_192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "gcm_sender_id": "1930042*****",
  "gcm_user_visible_only": true
}

Here, you have completed the task of creating the unique manifest file which has the content of all the other manifest files. Let’s call this file the ‘Updated manifest file’

Next, do the following:

1. Remove the following line from code: (referring to your first manifest file)

   <link rel="manifest" href="https://yourwebsite.com/skin/frontend/abcd/default/images/favicons/manifest.json">

2. Update link ‘https://yourwebsite.com/manifest.json’ with the new ‘Updated manifest file’

   Since the contents of the first manifest file are already there in the updated manifest file, it won't affect the website functionality.

Now, hard-load your webpage once you have made all the necessary changes, and you will now see the native Opt-in.