Implementing push notification using chrome in Dja

Question

I have learned to implement push notifications for a Web Application using chrome https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web?hl=en and successfully ran the sample code mentioned in the blog.

Unfortunately, I couldn't replicate the success with Django. It never goes into the ready method of the service worker,(navigator.serviceWorker.ready.then) ie, the service worker is never ready.

As per http://www.html5rocks.com/en/tutorials/service-worker/introduction/

One subtlety with the register method is the location of the service worker file. You'll notice in this case that the service worker file is at the root of the domain. This means that the service worker's scope will be the entire origin. In other words, this service worker will receive fetch events for everything on this domain. If we register the service worker file at /example/sw.js, then the service worker would only see fetch events for pages whose URL starts with /example/ (i.e. /example/page1/, /example/page2/).

In Django, how to put a JS a file under root of the application? Currently,scope of the service worker is: http://127.0.0.1:8000/static/ (When I use chrome://serviceworker-internals/)

Answer 1

Follow this method...

• put the sw.js file in template folder

• configure view to serve as static file

  #urls
  url(r'^sw(.*.js)$', views.sw_js, name='sw_js'),
  
  #views
  from django.views.decorators.cache import never_cache
  from django.template.loader import get_template
  @never_cache
  def sw_js(request, js):
      template = get_template('sw.js')
      html = template.render()
      return HttpResponse(html, content_type="application/x-javascript")
  

Answer 2

Similar to the accepted answer, but shorter:

• Place service_worker.js in root of the template folder.

• Add to your routings:

  from django.conf.urls import url
  from django.views.generic import TemplateView
  
  urlpatterns = [
      # Other urls
      url(r'^service_worker(.*.js)$',
          TemplateView.as_view(template_name='service_worker.js', 
              content_type='application/x-javascript'))
      ]
  

---

Update: I ended up needing to pass authentication credentials to the service_worker.js file, so this was my final route:

url(r'^service_worker(.*.js)(?:/(?P<params>[a-zA-Z]+)/)?', 
        TemplateView.as_view(template_name='service_worker.js', content_type='application/x-javascript'))

This allows passing parameters like so: domainbase.com/service_worker.js?foo=bar...

The javascript to then access the params is:

var url_params = location.search.substring(1);
console.log(url_params);
 => "foo=bar..."