Webプッシュ通知2

カテゴリ：Code Archives, HTML/CSS/JS, Web Push 投稿日：2016年5月25日

前回の続き

実装するためにはHTTPS(SSL)サーバーが必要です
SSL環境がない･･･→
自鯖があるならLet’s EncryptなどでSSL環境を構築しましょう
レンタルサーバーなら共有SSLでもいいです
それでもないならGithub Pagesを使いましょう
実装といってもコードを書く気はありませんGoogleChrome/samples · GitHubこれをダウンロードしてルートフォルダに展開しましょう

まだプッシュ通知は送信できません｡ここでGoogle Developer ConsoleからGoogle Cloud Messagingを有効化しないといけません
プロジェクトを作成してAPIリストから認証情報>サーバーキーとGoogle Cloud Messaging APIを有効化しなければなりません

プロジェクトの作成(右上)を押して適当に名前を登録
画面右上のアイコンとベルの間にある￤を押す→プロジェクトの情報→プロジェクト番号を控える→OKで消す
画面左の認証情報を押す
認証情報を作成→APIキー→サーバーキー→IPは空欄にして作成→サーバーキーを控える

先ほどのサーバーにあるmain.jsの

var API_KEY = window.GoogleSamples.Config.gcmAPIKey;

を

var API_KEY = "<先ほど控えたサーバーキー>";

に書き換えます
また､manifest.sample.jsonをmanifest.jsonに改名して
<Your Project Number from https://console.developers.google.com>をプロジェクト番号に置き換えます

そしてChromeでindex.htmlにアクセスするとPush Messaging & Notificationsというページが出てきます､そして下のEnable Push Messagesが押せる状態なら環境構築は完了です

次は送信してみましょう