読者です 読者をやめる 読者になる 読者になる

LCL エンジニアブログ

夜行バス比較なび・格安移動を運営する 株式会社LCLのエンジニアブログ

Webブラウザへのプッシュ通知はpushnateを使うと簡単

フロントエンドエンジニアの岡田です。先月のHTML5 Conferenceに参加してから、プッシュ通知を試したくてしかたがなかったのですが、ようやくまとまった時間が取れたので試してみました。

最初は、Webサイトからプッシュ通知を送ろう! JavaScriptでのプッシュ通知の実装方法 - ICS MEDIAを参考に進めていましたが、今はGoogleの設定画面も微妙に違うようで、なかなかうまくいきません。 そこで記事の最後に5分ほどで導入できるとあったpushnateを試してみました。 しかし初心者にはそこまでスムーズには設定できなかったので、スクリーンショット付きで解説します。 なお、以下はすべて無料で使えました。(2016/09/30時点の情報です)

Webブラウザへのプッシュ通知とは

事前に許可したユーザー宛に、サイト運営者の任意のタイミングで通知を送ることができます。ユーザーがページを開いている必要はないので、運営サイトへの訪問を促す仕組みとして使えます。対応ブラウザが限られていて、デスクトップのChromeやFirefoxでは使えますが、スマホのiOSでは動作しないので注意が必要です。

対応ブラウザでは、以下のような通知が届きます。(Mac Google Chromeの場合)
f:id:lcl-engineer:20161006235433p:plain
今回は、弊社で使っている勤怠システムのプッシュ通知を作ってみました。

前提

プッシュ通知を送るためには、サーバーがSSLに対応している必要があります。 pushnateを使う場合は、「共有ドメイン型」を選択すればSSL非対応のサーバーでも設置できます。ただ、プッシュ通知内に表示されるドメインがpushnate.comになります

設定方法

  1. pushnateの会員登録をする
  2. pushnateの「設置方法」ページからSDKをダウンロード f:id:lcl-engineer:20161002235335p:plain
  3. 別タブでGoogle Firebase Consoleを開き、アプリを登録
  4. Google Firebase Consoleで新規プロジェクトを作成f:id:lcl-engineer:20161001093548p:plain
  5. 「ウェブアプリに Firebase を追加」を選択してf:id:lcl-engineer:20161001093913p:plain スニペットを表示しておく(「apiKey」と「messagingSenderId」を使います) f:id:lcl-engineer:20161007004028p:plain
  6. pushnateに戻り、「サイト設定」ページで、情報を入力 f:id:lcl-engineer:20161007004056p:plain Google API KEYには、5で表示したスニペット中の「apiKey」を使います
  7. 2でダウンロードしたSDKファイルの中のmanifest.jsonを編集 f:id:lcl-engineer:20161002222314p:plain gcm_sender_id部分に5で表示したスニペット中の「messagingSenderId」を貼り付け
  8. pushnateの「設置方法」ページ下のサンプルコードを参考に「プッシュ通知設定用ページ」を作成
    ※ サンプルコードそのままで動きます。必要であれば文言等を変えます。 f:id:lcl-engineer:20161001102231p:plain

  9. SDKファイル2つと、8で作成した「プッシュ通知設定用ページ」をルート直下に設置
    /manifest.json
    /pushnateSDK.js
    /index.html (設定画面)

  10. 9でサーバーにアップした「プッシュ通知設定用ページ」をブラウザで開いて「設定する」ボタンを押す f:id:lcl-engineer:20161001133443p:plain すると以下のようなボックスが表示されます(Google Chromeの場合) f:id:lcl-engineer:20161001143331p:plain

  11. pushnateで新規プッシュ通知登録 f:id:lcl-engineer:20161002235642p:plain ※いろいろな種類のプッシュ通知を設定できますが、有効にできるのは1つのようです

以上です。
やっぱり5分では難しそうですが… でも確実に楽です。

あと、この設定が終わると、Webサイトからプッシュ通知を送ろう! JavaScriptでのプッシュ通知の実装方法 - ICS MEDIAの方も動くようになっていました。Google Firebase Consoleを登録すると動くようです。