在 Django 中使用 chrome 实现推送通知答案

【问题标题】：Implementing push notification using chrome in Django在 Django 中使用 chrome 实现推送通知
【发布时间】：2016-03-27 03:53:01
【问题描述】：

我已经学会了使用 chrome https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web?hl=en 为 Web 应用程序实现推送通知，并成功运行了博客中提到的示例代码。

不幸的是，我无法复制 Django 的成功。它永远不会进入 service worker 的 ready 方法，(navigator.serviceWorker.ready.then) 即，service worker 永远不会准备好。

根据http://www.html5rocks.com/en/tutorials/service-worker/introduction/

注册方法的一个微妙之处是服务的位置工人档案。在这种情况下，您会注意到 service worker 文件位于域的根目录。这意味着服务工作者的范围将是整个起源。换句话说，这个服务工作者将接收此域上所有内容的 fetch 事件。要是我们在 /example/sw.js 中注册 service worker 文件，然后注册服务 worker 只会看到 URL 以开头的页面的 fetch 事件 /example/（即 /example/page1/、/example/page2/）。

在 Django 中，如何将一个 JS 文件放在应用程序的根目录下？目前，service worker 的作用域是：http://127.0.0.1:8000/static/（当我使用 chrome://serviceworker-internals/ 时）

【问题讨论】：

标签： javascript django google-chrome push-notification service-worker

【解决方案1】：

按照这个方法...

将sw.js文件放入template文件夹中

将视图配置为静态文件

#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")

【讨论】：

我已经按照你说的做了，但它给了我以下错误。 Uncaught (in promise) DOMException: Failed to register a ServiceWorker: 脚本资源在重定向后面，这是不允许的。
谢谢 :) 你拯救了我的一天 :)
嘿，你有关于使用 sw.js 设置 Django 的完整教程
@KostadinSlavov 你是说博客之类的教程吗？
@RajaSimon 是的，但是对于 django，我只是不明白它是如何工作的......第 2 天仍然无法得到它

【解决方案2】：

类似于接受的答案，但更短：

将service_worker.js 放在template 文件夹的根目录中。

添加到您的路线：

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'))
    ]

更新：我最终需要将身份验证凭据传递给service_worker.js 文件，所以这是我的最终路线：

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

这允许像这样传递参数：domainbase.com/service_worker.js?foo=bar...

然后访问参数的javascript是：

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

【讨论】：