django pwa和django webpush的组合。
django-pwa-webpush的Python项目详细描述
django pwa webpush
这个包是django-pwa和django-webpush的简单合并。
django pwa
这个django应用程序将您的项目变成一个progressive web app。在android手机上导航到您的站点将提示您将应用程序添加到主屏幕。
从主屏幕启动应用程序将显示应用程序without browser chrome。因此,应用程序在HTML中提供所有导航(不依赖浏览器的后退或前进按钮)是非常重要的。
django webpush
django pwa webpush是一个用于在django应用程序中集成和发送Web Push Notification的包。
目前,它支持向firefox 46+和chrome 52+发送推送通知。
更多信息请访问Can I use...
本自述文件
这个自述文件是我合并的两个包的自述文件的一个草率的复制和粘贴工作。所以我也包括了他们自己的自述文件,因为它们是非常丰富的信息。
要求
渐进式web应用程序需要https,除非从本地主机提供服务。如果您的站点上还没有使用https,请查看Let's Encrypt和ZeroSSL。
安装和设置
您可以通过运行pypi轻松安装它
pip install django-pwa-webpush
安装包后,在INSTALLED_APPS
设置中添加pwa_webpush
in
INSTALLED_APPS=(...'pwa_webpush',)
您还需要这些设置:
PWA_APP_NAME='My App'PWA_APP_DESCRIPTION="My app description"PWA_APP_THEME_COLOR='#0A0302'PWA_APP_BACKGROUND_COLOR='#ffffff'PWA_APP_DISPLAY='standalone'PWA_APP_SCOPE='/',PWA_APP_ORIENTATION='any'PWA_APP_START_URL='/'PWA_APP_ICONS=[{'src':'/static/images/my_app_icon.png','sizes':'160x160'}]PWA_APP_SPLASH_SCREEN=[{'src':'/static/images/icons/splash-640x1136.png','media':'(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'}]PWA_APP_DIR='ltr'PWA_APP_LANG='en-US'
所有的pwa_u设置都是可选的,并且应用程序可以在其内部默认设置下正常工作。强烈建议至少设置PWA_APP_NAME
、PWA_APP_DESCRIPTION
、PWA_APP_ICONS
和PWA_APP_SPLASH_SCREEN
。
对于webpush,您还需要
WEBPUSH_SETTINGS={"VAPID_PUBLIC_KEY":"Vapid Public Key","VAPID_PRIVATE_KEY":"Vapid Private Key","VAPID_ADMIN_EMAIL":"admin@example.com"}
用乏味的键替换"Vapid Public Key"
和"Vapid Private Key"
。也可以用电子邮件替换admin@example.com
,以便浏览器的推送服务器可以在出现任何问题时与您联系。
To know how to obtain Vapid Keys please see this
py_vapid
and Google Developer Documentation. You can obtain one easily from web-push-codelab.glitch.me.Application Server Keys
andVapid Keys
both are same.
然后将pwa_webpush
包含在urls.py
urlpatterns=[url(r'',include('pwa_webpush.urls'))# You MUST use an empty string as the URL prefix]
将PWA信息添加到模板中。
在base.html(或定义html<;head>;的任何位置)中插入所需的元标记:
{% load pwa_webpush %} <head> ... {% progressive_web_app_meta %} ... </head>
将网络推送信息添加到模板中。
因此,在模板中,您需要通过以下方式加载webpush_notifications
自定义模板标记:
- 如果使用内置模板引擎,请在模板中添加
{% load webpush_notifications %}
- 如果使用的是jinja模板引擎,则无需加载任何内容。
接下来,在<head></head>
标记内,根据模板引擎添加webpush_header
:
<head> # For django templating engine {% webpush_header %} # For jinja templating engine {{ webpush_header() }} </head>
接下来,在<body></body>
标记中,插入webush_button
您希望看到subscribe to push messaging按钮的位置。如下所示
<body><p> Hello World! </p> # For django templating engine {% webpush_button %} # For jinja templating engine {{ webpush_button() }} </body>
Note: The Push Notification Button will show only if the user is logged in or any
group
named is passed throughwebpush
context
如果要将订阅标记为组,就像所有订阅来自模板的推送通知的人都应标记为组并将获得相同的通知一样,应通过视图向模板传递webpush
上下文。webpush
上下文应该有一个类似于{"group": group_name}
的字典。如下所示
webpush={"group":group_name}# The group_name should be the name you would define.returnrender(request,'template.html',{"webpush":webpush})
Note: If you dont pass
group
through thewebpush
context, only logged in users can see the button for subscription and able to get notification.
故障排除
运行django测试服务器时:
- 确认
/manifest.json
正在服务 - 确认
/serviceworker.js
正在服务 - 确认
/offline
正在服务 - 使用chrome开发工具中的application选项卡验证progressive web应用程序的配置是否正确。
- 使用“应用程序”选项卡上的“添加到主屏幕”链接验证是否可以成功添加应用程序。
添加您自己的服务人员
要添加服务工作程序功能,您需要在模板目录中创建一个serviceworker.js
或类似名称的模板,然后使用pwa_service_worker_path变量(pwa_app_fetch_url被传递)指向它。
PWA_SERVICE_WORKER_PATH=os.path.join(BASE_DIR,'my_app','serviceworker.js')
脱机视图
默认情况下,脱机视图在templates/offline.html
中实现。
如果继续使用d,则可以在模板目录中覆盖它。Efault:推荐PyPI第三方库