Django、OneSignalでブラウザ通知

2019-07-27 / PythonDjango

概要

Djangoで、Webサイトの更新情報を通知するシリーズの一つです。OneSignalを利用してブラウザのプッシュ通知を行い、Webサイトの更新を伝えます。注意として、この方法は、ドメインの取得とHTTPSの対応が必要です。

One Signal

Webプッシュ自体は自力でも実装できますが、結構複雑です。なので、One Signal というサービスを使うことにします。まず、公式サイトへアクセスし、Sign Upしましょう。

登録が終わると次の画面になるので、ADD APP を押します。

APP NAMEは、適当に入力しておきましょう。

Web Pushを選択します。

すると、プッシュ通知の設定画面に移ります。 Typical Siteを選択していることを確認し、サイト名、サイトURLを入力します。

ADD A PROMPT を押して、購読プロンプトを作成します。

どういう見た目にするかはお任せします。今回は購読用のボタンを配置することにしました。

設定画面に戻って、購読後の最初のメッセージなんかも設定できます。

その下にWebhookの設定欄がありますが、今回は利用しなくて大丈夫です。一番下のSaveボタンを押しましょう。そして、次の画面に移動します。

まず、必要なファイル一式をダウンロードしましょう。

ダウンロードしたら、それをサーバーに転送します。Webサーバーのドキュメントルート直下にでも置きましょう。Nginxの場合は/usr/share/nginx/html内です。そこに置いて解凍します。私の場合は次のようになりました。

sudo ls /usr/share/nginx/html

404.html  50x.html  index.html  manifest.json nginx-logo.png  OneSignalSDKUpdaterWorker.js  OneSignalSDKWorker.js  one.zip  poweredby.png

manifest.jsonOneSignalSDKUpdaterWorker.jsOneSignalSDKWorker.jsが目当てのファイルです。念のため、ファイルの権限も大丈夫か確認しておきましょう。そして、Nginxの設定ファイルを編集し、これらを配信できるようにしておきます。

    location /manifest.json {
        alias /usr/share/nginx/html/manifest.json;
    }

    location /OneSignalSDKUpdaterWorker.js {
        alias /usr/share/nginx/html/OneSignalSDKUpdaterWorker.js;
    }

    location /OneSignalSDKWorker.js {
        alias /usr/share/nginx/html/OneSignalSDKWorker.js;
    }

OneSignalのページに戻って、次の部分をコピーしましょう。

base.htmlを、次のように変更しまして...

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>購読サンプル</title>
    {% block extrahead %}{% endblock %}
</head>

subscribe.htmlを、次のように変更します。

{% extends 'blog/base.html' %}
{% load static %}

{% block extrahead %}
<link rel="manifest" href="/manifest.json" />
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
  var OneSignal = window.OneSignal || [];
  OneSignal.push(function() {
    OneSignal.init({
      appId: "72a56de1-4b7b-4443-b9f9-7117fa460142",
    });
  });
</script>
{% endblock %}

{% block content %}
    <h2>メールで新着記事を受け取る</h2>
    <form action="" method="POST">
        {{ form.as_p }}
        <button type="submit">送信</button>
        {% csrf_token %}
    </form>

    <h2>Lineで新着記事を受け取る</h2>
    <p><img src="{% static 'blog/lineqr.png' %}"></p>

    <h2>プッシュ通知で新着記事を受け取る</h2>
    <div class='onesignal-customlink-container'></div>

    <h2>ブログ記事 フィード</h2>
{% endblock %}

またOneSignalのページに戻り、最下部にあるFINISHボタンを押しましょう。すると次の画面になるので、Keys & IDs を押しましょう。

OneSignal App IDと、REST API Keyを控えておきましょう。App IDは、上のJavaScriptコード内にもありますね。

ブラウザ通知を実装する

まず、必要なライブラリをインストールします。

pip install requests

Postモデルのメソッドを実装します。

from django.shortcuts import resolve_url
import requests
...
...
    def browser_push(self, request):
        """記事をブラウザ通知"""
        data = {
            'app_id': '72a56de1-4b7b-4443-b9f9-7117fa460142',
            'included_segments': ['All'],
            'contents': {'en': self.title},
            'headings': {'en': 'Naritoブログ'},
            'url': resolve_url('blog:detail', pk=self.pk),
        }
        requests.post(
            "https://onesignal.com/api/v1/notifications",
            headers={'Authorization': 'Basic あなたのREST API Key'},  # 先頭にBasic という文字列がつく
            json=data,
        )

この記事の関連記事

Djangoで、Webサイトの更新情報を通知するシリーズ

2019-07-27 / Djangoシリーズ・まとめ

- Webサイトでは、更新をお知らせする機能がよくあります。例えばメールで最新情報を知らせたり、最近ではLineやブラウザのプッシュ通知で更新情報をお知らせする例もよく使われています。

Django、メールで更新を通知

2019-07-27 / PythonDjango

- Djangoで、Webサイトの更新情報を通知するシリーズの一つです。メールで、Webサイトの更新情報を通知していきます。

Django、Lineで更新を通知

2019-07-27 / PythonDjangoLine

- Djangoで、Webサイトの更新情報を通知するシリーズの一つです。Lineで、Webサイトの更新を伝えていきます。

コメント欄

記事にコメントする

まだコメントはありません。