Where to put service worker and manifest in a django project?

Question

I am planning to convert a django project to Progressive Web App. I am not being able to figure out where to put the service_worker.js and manifest.json files in my django project. I've tried the following:

myproject/

|__app1

|__app2

|__manage.py

|__manifest.json

|__service_worker.js

and then tried to register the service worker from html file using relative path ../../../service_worker.js. That didn't work. It showed this error: "A bad HTTP response code (404) was received when fetching the script."

Another approach I tried is to put the service_worker.js and manifest.json in the static folders:

myproject/

|__app1/
    |__static/
        |__app1/
            |__service_worker.js
            |__manifest.json

|__app2

|__manage.py

and access those using {% static 'app1/service_worker.js' %}. The problem with this approach is that the scope of the registered service_worker.js becomes limited to that static folder. I've seen in one stackoverflow answer that I can explicitly set the scope of the service worker as {scope: '/'}. But, I think there might be a better approach which I am missing. Please let me know if anyone has a solution to this.

These are just normal static files, you put them wherever the rest of your static files are. — Daniel Roseman, Apr 04 '18 at 06:49
@DanielRoseman I've tried that but then the scope of the service worker gets limited to only the files under that folder. I want the service worker's scope to encompass all apps in the project. — Outsider, Apr 04 '18 at 06:56
@HemanthSP I have dropped this idea and started building my site as an Angular app. However, take a look at this answer https://stackoverflow.com/a/40087795/5157204 — Outsider, Mar 31 '19 at 08:08

score 0 · Answer 1 · answered Apr 04 '18 at 16:19

0

Looks like you want to have a common SW for all your app(1, 2). You can have both SW and manifest.json at the project root, link the manifest to your project's home page. If you want to cache the whole path, setting scope is not a bad idea, as the same has been officially documented here. Look for "Registering your worker" part in the linked page.

answered Apr 04 '18 at 16:19

Anand

9,672
4
55
75

I have the SW in a static folder and when I try to set the scope: '/', it shows this error "The path of the provided scope ('/') is not under the max scope allowed ('/static/app 1/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope." Any idea how to fix that? – Outsider Apr 04 '18 at 16:30
i wouldn't put it in static folder and set the scope to "/". If that's your scope, I would put it in the root folder. Do you see any issue/getting any error by putting the SW in the project root? If not, I would recommend do that. – Anand Apr 04 '18 at 16:47
If you still want to fix the scope way by seeing the http header, that's some thing you have to do at web server level and config depends on the server you are using. Here is a solution for IIS. You would need something like this. https://stackoverflow.com/a/48068714/1057093 – Anand Apr 04 '18 at 16:48
I've tried putting the SW and manifest at the root folder, but then they have to be served as templates via django urls.py. I did that and in chrome Application tab it was showing (index) instead of the name of the service worker file. I've seen the answer that you have linked above, is there a way to do it locally? – Outsider Apr 04 '18 at 17:30

score 0 · Answer 2 · answered Jun 18 '21 at 08:06

Service Worker needs to be served from the same path it will handle so if you put after static,.it will handle only static/ so to put under '/' you have to create a view that returns the Service worker js.

def sw(request):
   return HttpResponse(settings.SERVICE_WORKER)

Note: you can use django template to generate the final js

For Manifest, it is a usual static file.

Where to put service worker and manifest in a django project?

2 Answers2