Djangoアプリケーションから簡単にプッシュ通知ができるdjango-webpushというパッケージを使用します。

💁‍♀️

今回はdjango-webpushのデフォルトの実装方法を説明するよ。

説明を始める前にdjango-webpushで使うPush APIは対応していないブラウザがあるので確認してください。

ブラウザ Chrome Edge Firefox IE Safari Android Chrome Android Firfox iOS safari
対応状況 × × ×

参考:push APIのブラウザ別対応状況





    Strory
  1. 前提条件
  2. プッシュ通知の実装手順
    • django-webpushのインストール
    • Vapid Keysの取得
    • settings.pyの更新
    • views.pyの更新
    • urls.pyの更新
    • テンプレート(html)の作成
    • アプリの起動と確認
  3. push通知を送る
  4. 参考サイト
  5. まとめ

前提条件

既に以下の作業が終わっている状態から説明します。

  • 仮想環境の構築
  • Djangoのアプリ作成


今回実装した環境

  • MacOSXのバージョン
$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.14.4
BuildVersion:   18E226
  • pythonのバージョン
$ python3 -V  
Python 3.7.6
  • Djangoのバージョン
$ python3 -m pip list --format=columns | grep Django  
Django                    2.1.14 

プッシュ通知の実装手順


1. django-webpushのインストール

まずはターミナルからdjango-webpushのパッケージをインストールします。

$ pip install django-webpush

django-webpushをインストールしたらrequirements.txtに追加するのを忘れずに!
$ pip freeze > requirements.txt

Vapid Keysの取得

Web Pushを実装するためにVapid keyを取得する必要があります。
wep-push-codelabにアクセスして表示されるPublic KeyとPrivate Keyをメモしてください。メモした2つのkeyは後で説明するsettings.pyに記載します。

settings.pyの更新

まずINSTALLED_APPSにweppushを追加します。

INSTALLED_APPS = [
    ....,             
'webpush', ]

次に先ほどメモしたVapid keyたちをAUTH_PASSWORD_VALIDATORSの下に追加します。

AUTH_PASSWORD_VALIDATORS = [ ..., ]

WEBPUSH_SETTINGS = { "VAPID_PUBLIC_KEY": "先ほどmemoしたPublic Key", "VAPID_PRIVATE_KEY": "先ほどmemoしたPrivate Key", "VAPID_ADMIN_EMAIL": "example@example.com(任意のメールアドレス)" }


この3つのvalueを置き換えてsettings.pyに追記してください。

views.pyの更新

今回はwebpushをカスタマイズなしの一番シンプルに実装するため、 後で作成するsubscriptionボタンページのテンプレートに渡す部分だけをviews.pyに追加します。

from django.shortcuts import render
def home(request): return render(request, 'app/home.html')

urls.pyの更新

まずプロジェクトの配下のurls.pyにwebpushのディレクトリを作成します。
appのディレクトリもまだ追加していない場合はしておいてください。

from django.contrib import admin
from django.conf.urls import url, include

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^app/', include('app.urls')), #まだの場合
    url(r'^webpush/', include('webpush.urls')), webpushのディレクトリ
]

app配下のurls.pyはsubscriptionボタンページのテンプレートを表示するためのディレクトリを記載します。

from django.conf.urls import url
from . import views
from .views import home
app_name = 'hello' urlpatterns = [ url(r'^$', views.home, name='home'), ]

テンプレート(html)の作成

最後にapp配下にhome.htmlを作成し、webpushに必要なタグをテンプレートに実装します。

app/home.html

{% load static %}
<!-- webpush_notificationsのカスタムテンプレートタグの読み込み --> 
{% load webpush_notifications %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <!-- webpush用のmetaタグとスクリプトの読み込み -->
     {% webpush_header %}
 </head>
 <body>
   <p> Hello World!  </p>
   <!-- push通知の購読ボタン -->
   {% webpush_button %}
 </body>
 </html>


これでwebpushの設定は完了です。

アプリの起動と確認

あとはターミナルから以下のコマンドを実行してアプリが正確に動くか確認しましょう。

$ python manage.py makemigrations
$ python manage.py migrate
$ python manage.py collectstatic
$ python manage.py runserver

アプリをローカル環境で起動したら http://127.0.0.1:8000/app/にアクセスして以下のようなページが表示されていればOK!

webpushを実装したテスト画面

push通知を送る

試しに特定ユーザーにpush通知を送ってみます。

😚

お疲れ様でした!では実際にpush通知をしてみよう!

push通知の確認ができるよう、push通知を購読するユーザーを作成します。

$ python manage.py createsuperuser

次にローカル環境で再度Djangoのアプリを起動し、 http://127.0.0.1:8000/adminから作成したユーザーでログインします。

ログイン後に購読ボタンのページ(http://127.0.0.1:8000/app/)に戻り、「Subscribe to Push Messaging」ボタンをクリックします。
もし購読の登録が完了すれば、下に「Successfully subscribed for Push Notification」が表示されます。

push通知の購読成功画面

購読が完了したらターミナルに戻り、シェルを操作して、push通知を送ります。

$ python manage.py shell
>>> from django.contrib.auth.models import User
>>> user = User.objects.get(id=1)
>>> from webpush import send_user_notification
>>> payload = {"head": "Welcome!", "body": "Hello World"}
>>> send_user_notification(user=user, payload=payload, ttl=1000)

これでweb push通知が来れば成功です👍
Chromeは画面の右上にこんな感じで通知がきます。

web push通知

😶

ユーザー別に内容を変えたり、ユーザーをグループに分けて特定のグループに分けることもできるよ






参考サイト


まとめ

django-webpushはDjangonアプリケーションにweb pushを実装するのに必要なものを用意してくれたパッケージです。
今回はdjango-webpushのデフォルトのスクリプトを使いましたが、もしカスタマイズしたい場合は必要に応じてスクリプトを作成する必要があります。

ここまで読んでくれてありがとうございました。
またね😚