Forums

PWA manifest.json getting unauthorized response

I am trying to create a PWA for my website.i followed this article https://medium.com/@tristan_4694/how-to-create-a-progressive-web-app-pwa-using-flask-f227d5854c49

In the local setup, the PWA is properly recognized. when i do same changes in server, i am getting unauthorized in the manifest.json file.

I tried to place it in the static folder also, but still getting same error.

in html:

<link rel="manifest" href="{{ url_for('static', filename='manifest.json' ) }}">
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register("{{ url_for('static', filename='sw.js' ) }}").then(function(registration) {
          }, function(err) {

          });
        });
      }
    </script>

in python:

@app.route('/sw.js')
def serve_sw():
    return send_from_directory('static','sw.js', mimetype='application/javascript')


@app.route('/manifest.json')
def serve_manifest():
    return send_from_directory('static','manifest.json', mimetype='application/manifest+json')

File tree

.
├── README.txt
├── dashboard
│   ├── flask_app.py
│   ├── static
│   │   ├── manifest.json
│   │   └── sw.js
│   └── templates
│       ├── index.html

I even tried app.route with '/static/manifest.json' but got same error. Can you please help how to serve the manifest.json file and sw.js file properly.

I'd suggest just using our static file mappings for that -- it'll be quicker, probably easier to set up, and it won't tie up your Python code while people are downloading the JS and the manifest.

Hi giles

Following your suggestion, i tried to create static mapping like this

<link rel="manifest" href="/static/manifest.json">
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register("/static/sw.js").then(function(registration) {
          }, function(err) {

          });
        });
      }
    </script>

enter image description here

Still, the browser get "unauthorized" response in the manifest file.

Can you check what is wrong and help me correct it.

Could you check if you're still getting this error with password protection disabled? (You'd need to reload the web app after disabling it).

Hi pafk, After disabling the password protection, it is working now. Thank you very much.

Glad you got it working