Manifest error. Line: 1, column: 1, Syntax error in Flask

Issue

I am trying to link manifest.json file to the website I built to convert it to PWA. Have used html/css and python flask for the backend.
I am not getting whether it is the issue of the path or something else. Service worker is being detected and that is working absolutely fine.
But in the Application manifest I am getting this error Manifest is not valid JSON. Line: 1, column: 1, Unexpected token
manifest.json file


{
  "name": "Flask-PWA",
  "short_name": "Flask-PWA",
  "description": "A progressive webapp template built with Flask",
  "theme_color": "transparent",
  "background_color": "transparent",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "../templates/login_user.html",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

This is the file structure for the manifest

Solution

change content type

Check your network tab in the developer console and look for the manifest.json request. If the content type of the response is text/html, then you might need to add an additional header changing Content-Type to application/json in your flask route.

use python object

If changing the content type doesn’t work, you can write your entire manifest as a python object then jsonify it before returning it to the browser.

from flask import jsonify
@app.route('/manifest.json')
def manifest():
    return jsonify(manifest_python_object)

Answered By – Musab Abdullah

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

ErrorsFixing