django pwa和django webpush的组合。

django-pwa-webpush的Python项目详细描述


Build StatusCodeFactorcodecovPyPI - DownloadsPyPI - Downloads

django pwa webpush

这个包是django-pwadjango-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...

本自述文件

这个自述文件是我合并的两个包的自述文件的一个草率的复制和粘贴工作。所以我也包括了他们自己的自述文件,因为它们是非常丰富的信息。

django-pwa 是的。django-webpush

要求

渐进式web应用程序需要https,除非从本地主机提供服务。如果您的站点上还没有使用https,请查看Let's EncryptZeroSSL


安装和设置

您可以通过运行pypi轻松安装它

pip install django-pwa-webpush

安装包后,在INSTALLED_APPS设置中添加pwa_webpushin

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_NAMEPWA_APP_DESCRIPTIONPWA_APP_ICONSPWA_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 and Vapid 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 through webpush 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 the webpush context, only logged in users can see the button for subscription and able to get notification.


故障排除

运行django测试服务器时:

  1. 确认/manifest.json正在服务
  2. 确认/serviceworker.js正在服务
  3. 确认/offline正在服务
  4. 使用chrome开发工具中的application选项卡验证progressive web应用程序的配置是否正确。
  5. 使用“应用程序”选项卡上的“添加到主屏幕”链接验证是否可以成功添加应用程序。

添加您自己的服务人员

要添加服务工作程序功能,您需要在模板目录中创建一个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:

标签:

  • django
  • 标记
  • 模板
  • app
  • 应用程序
  • group
  • head
  • pwa
  • vapid
  • webpush
  • 欢迎加入QQ群-->: 979659372 Python中文网_新手群

    推荐PyPI第三方库


    热门话题
    java SUN次要代码309含义   java避免为空元素生成XML自关闭标记,并生成自定义的<XML>开始标记   java使用json和restful将数组数据从本地sqlite数据库插入SQL Server   java Spring Boot 1.5.9字符编码问题   LInkedIn讨论中的java 401错误   位图Java:检查多个位向量/位集是否相交的最快方法?   macos如何让Java应用程序以图标出现在Mac OS X dock中   java如何删除netbeans中的@SuppressWarnings(“未使用的”)?   apachestorm中的java自定义序列化   java可以退出代码还是应该终止main?   递归如何在Java中递归地绘制简单的线条?   unicode在Java中确定特定字体是否可以呈现特定字符   打开并阅读带有Selenium/Katalon(Java)特定标题的电子邮件文本(来自Gmail)