Package: django-pwa-webpush
Django-PWA-WebpushThis package is a pretty simple merge ofdjango-pwa, anddjango-webpush.django-pwaThis Django app turns your project into aprogressive web app.  Navigating to your site on an Android phone will prompt you to add the app to your home screen.Launching the app from your home screen will display your appwithout browser chrome.  As such, it's critical that your application provides all navigation within the HTML (no reliance on the browser back or forward button).django-webpushDjango-PWA-Webpush is a Package made for integrating and sendingWeb Push Notificationin Django Application.Currently, it Supports Sending Push Notification toFirefox 46+ and Chrome 52+.More atCan I use...This READMEThis readme is a sloppy copy and paste job from the READMEs of the two packages I combined. So I have also included their own README files, since they are very informative..django-pwa.django-webpushRequirementsProgressive Web Apps require HTTPS unless being served from localhost.  If you're not already using HTTPS on your site, check outLet's EncryptandZeroSSL.Installation and SetupYou can install it easily from pypi by runningpip install django-pwa-webpushAfter installing the package, addpwa_webpushin in yourINSTALLED_APPSsettingsINSTALLED_APPS=(...'pwa_webpush',)You also need these settings: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'All PWA_ settings are optional, and the app will work fine with its internal defaults.  Highly recommend setting at leastPWA_APP_NAME,PWA_APP_DESCRIPTION,PWA_APP_ICONSandPWA_APP_SPLASH_SCREEN.For Webpush, you also needWEBPUSH_SETTINGS={"VAPID_PUBLIC_KEY":"Vapid Public Key","VAPID_PRIVATE_KEY":"Vapid Private Key","VAPID_ADMIN_EMAIL":"admin@example.com"}Replace"Vapid Public Key"and"Vapid Private Key"with your Vapid Keys. Also replaceadmin@example.comwith your email so that the push server of browser can reach to you if anything goes wrong.To know how to obtain Vapid Keys please see thispy_vapidandGoogle Developer Documentation. You can obtain one easily fromweb-push-codelab.glitch.me.Application Server KeysandVapid Keysboth are same.Then includepwa_webpushin theurls.pyurlpatterns=[url(r'',include('pwa_webpush.urls'))# You MUST use an empty string as the URL prefix]Add PWA Information to your template.Inject the required meta tags in your base.html (or wherever your HTML <head> is defined):{% load pwa_webpush %}<head>...
    {% progressive_web_app_meta %}
    ...</head>Add Web Push Information to your template.So in template, you need to loadwebpush_notificationscustom template tag by following:If you are using built in templating engine, add{% load webpush_notifications %}in the templateIf you are usingjinjatemplating engine, you do not need to load anything.Next, inside the<head></head>tag addwebpush_headeraccording to your templating engine:<head># For django templating engine
  {% webpush_header %}
  # For jinja templating engine
  {{ webpush_header() }}</head>Next, inside the<body></body>tag, insertwebush_buttonwhere you would like to see theSubscribe to Push MessagingButton. Like following<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 anygroupnamed is passed throughwebpushcontextIf you would like to mark the subscription as a group, like all person subscribe for push notification from the template should be marked as group and would get same notification, you should pass awebpushcontext to the template through views. Thewebpushcontext should have a dictionary like{"group": group_name}. Like followingwebpush={"group":group_name}# The group_name should be the name you would define.returnrender(request,'template.html',{"webpush":webpush})Note:If you dont passgroupthrough thewebpushcontext, only logged in users can see the button for subscription and able to get notification.TroubleshootingWhile running the Django test server:Verify that/manifest.jsonis being servedVerify that/serviceworker.jsis being servedVerify that/offlineis being servedUse the Application tab in the Chrome Developer Tools to verify the progressive web app is configured correctly.Use the "Add to homescreen" link on the Application Tab to verify you can add the app successfully.Adding Your Own Service WorkerTo add service worker functionality, you'll want to create aserviceworker.jsor similarly named template in a template directory, and then point at it using the PWA_SERVICE_WORKER_PATH variable (PWA_APP_FETCH_URL is passed through).PWA_SERVICE_WORKER_PATH=os.path.join(BASE_DIR,'my_app','serviceworker.js')The offline viewBy default, the offline view is implemented intemplates/offline.htmlYou can overwrite it in a template directory if you continue using the defaultserviceworker.js.