Service Workerを利用してPush通知を実装したい
- 評価
- クリップ 1
- VIEW 519
前提・実現したいこと
Service Workerを利用して、Push通知のサンプルプログラムを書いています。
こちら（Googleの提供しているチュートリアル）
を参考にしながらプログラムをコピペし、動作を確認しようとチュートリアルを進めていたところ
の
- Make a request to GCM
From your terminal, run the cURL command below — but make sure to use your own API key and subscription ID, which you created earlier:（←ターミナルで、APIキーとsubscription IDを使って、cURL commandを叩いてね、という意味だと解釈しています）
curl --header "Authorization: key=APIキー" --header "Content-Type: application/json" https://android.googleapis.com/gcm/send -d "{\"registration_ids\":[\"APA.....(中略)z1wSZD\"]}"
というコマンドをターミナルで打ったところ
{"multicast_id":53......787,"success":0,"failure":1,"canonical_ids":0,"results":[{"error":"MismatchSenderId"}]}
というエラーが返ってきてしまいました。
エラーの原因を調べてみると、どうやらsubscriptionIDが間違っているか、manifest.jsonが認証されていない可能性がある。という2つの可能性がありそうです。
※後者はこちらの記事にて書かれていました。
ターミナルのエラーを解決し先に進みたいのですが、原因がわかる方いらっしゃいますでしょうか？
ファイルの構成は
index.html
manifest.json
sw.js
jsフォルダ
が同一のディレクトリにあり、jsフォルダの中にmain.jsがあるという状態です。
※先ほどのチュートリアルにおいて、6章まではエラーなしでこれたので、その時点まではエラーがないかと思います。
なお、下記に全ファイルのコードを記載させていただきます。
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="manifest" href="manifest.json">
<title>Push Notification codelab</title>
</head>
<body>
<h1>Push Notification codelab</h1>
<p>This page must be accessed using HTTPS or via localhost.</p>
<script src="js/main.js"></script>
</body>
</html>sw.js
//sw.js
console.log('Started', self);
self.addEventListener('install', function(event) {
self.skipWaiting();
console.log('Installed', event);
});
self.addEventListener('activate', function(event) {
console.log('Activated', event);
});
self.addEventListener('push', function(event) {
console.log('Push message received', event);
// TODO
});main.js
if ('serviceWorker' in navigator) {
console.log('Service Worker is supported');
navigator.serviceWorker.register('sw.js').then(function(reg) {
console.log(':^)', reg);
reg.pushManager.subscribe({
userVisibleOnly: true
}).then(function(sub) {
console.log('endpoint:', sub.endpoint);
});
}).catch(function(error) {
console.log(':^(', error);
});
}manifest.json
{
"name": "Push Notifications codelab",
"gcm_sender_id": "GCMのプロジェクト番号（123456789012のような数字）"
}補足情報(言語/FW/ツール等のバージョンなど)
1.APIキーとGCMのプロジェクト番号は取得してコードに入れてあります。
2.chromeは最新版を使っています。
3.一番最初にリンクを貼り付けたチュートリアルの6章まではエラーなしで進みました。
宜しくお願い致します。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
Subscription IDをどの様に取得しましたか？
Subscribe to Push Notificationsの通りに実施すると、おそらく失敗します。
(私は失敗しました。)
console.logの出力の長さの上限なのか、"..."となって省略されてます。
50文字ずつ区切って出すなどするか、DOM操作して結果をHTMLに表示するかが必要でした。
console.logの上限を変えられれば良いのですが、できるかどうか分かりませんでした。
私の場合の原因と対処なので違ったらすみません。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
2016/05/20 23:56
2016/05/21 15:09
私の場合、上記の赤枠で囲っていただいている部分の文字列については
①endpointのURLをクリック
②出てきたURLからAPA...（以下略）の部分をコピペして、ターミナルに打ち込むコマンド文にペーストしました！
なのでその部分（console.logで食略されてしまっている部分）については問題なく取得できていると思っています。
エラー内容から察するに、gcm_sender_idの設定を間違えているか、ご指摘の文字列が、上記の方法でうまくとれていないか、なのかな〜、と思っています。
最近の技術なので、あまり情報が出回っておらず。。。苦戦中です。
2016/05/21 16:23
APIキーとmanifest.jsonのプロジェクトが不一致なのかも知れません。
それから、ブラウザでmanifest.jsonに直接アクセスはできますか？