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

Question:

  • 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
    enter image description here
  • 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

enter image description here

Asked By: Lav Sharma

||
Source

Answers:

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

The selected answer is no longer working as of today. I assume the OP was using ngrok same as me based on the files from the repo he has cloned (which is same as me). Dependent on the caching strategy of the service worker, someone might actually not have this issue at all.

If it is not caching, there is not going to be any problem because my theory is that caching is causing the problem. What happens is Ngrok has this default page when you first browse a URL. And our PWA is caching everything. or the site is loading the manifest only once or something like that.

These are images but my SO Rep is not allowing me to embed them.

Image: The page that is cached into manifest

Image: The error on manifest

Image: Clicking on the manifest file is showing the error page instead of the original manifest linked

Based on this my theory is that the manifest is getting cached at the time Ngrok shows this default page. (Or I’m wrong and something entirely different is going on but this solution still solves the issue, so read on)

If we actually follow Ngrok’s solution to skip that page by passing ngrok-skip-browser-warning header with our initial request. The page works, and the PWA is installable. I used This chrome extension to do this non programmatically.

Image: The extension I used to add that header

Also note that I skipped the use of Ngrok as a flask extension, but instead used it directly after running flask server via:

./ngrok http http://127.0.0.1:5000/

Also, this issue was on a lot of other stackoverflow questions with the use of Ngrok and this solution is obviously applicable because the solution has nothing to do with Flask / Python.

Here are the images of it working when the headers are passed.

Image: PWA is active

Image: No errors in the manifest

Image: This actually is the original manifest file linked in html

Answered By: Fauzaan Gasim