Service Workerを利用してPush通知を実装したい

###前提・実現したいこと
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

html
1<!DOCTYPE html>
2<html>
3<head>
4  <link rel="manifest" href="manifest.json">
5  <title>Push Notification codelab</title>
6</head>
7<body>
8  <h1>Push Notification codelab</h1>
9  <p>This page must be accessed using HTTPS or via localhost.</p>
10  <script src="js/main.js"></script>
11</body>
12</html>

sw.js

javascript
1//sw.js
2console.log('Started', self);
3self.addEventListener('install', function(event) {
4  self.skipWaiting();
5  console.log('Installed', event);
6});
7self.addEventListener('activate', function(event) {
8  console.log('Activated', event);
9});
10self.addEventListener('push', function(event) {
11  console.log('Push message received', event);
12  // TODO
13});

main.js

javascript
1if ('serviceWorker' in navigator) {
2    console.log('Service Worker is supported');
3    navigator.serviceWorker.register('sw.js').then(function(reg) {
4        console.log(':^)', reg);
5        reg.pushManager.subscribe({
6            userVisibleOnly: true
7        }).then(function(sub) {
8            console.log('endpoint:', sub.endpoint);
9        });
10    }).catch(function(error) {
11        console.log(':^(', error);
12    });
13}

manifest.json

json
1{
2  "name": "Push Notifications codelab",
3  "gcm_sender_id": "GCMのプロジェクト番号（123456789012のような数字）"
4}

###補足情報(言語/FW/ツール等のバージョンなど)
1.APIキーとGCMのプロジェクト番号は取得してコードに入れてあります。
2.chromeは最新版を使っています。
3.一番最初にリンクを貼り付けたチュートリアルの6章まではエラーなしで進みました。

宜しくお願い致します。

行動規範の内容に同意します

回答1件

Subscription IDをどの様に取得しましたか？

Subscribe to Push Notificationsの通りに実施すると、おそらく失敗します。
(私は失敗しました。)

console.logの出力の長さの上限なのか、"..."となって省略されてます。
50文字ずつ区切って出すなどするか、DOM操作して結果をHTMLに表示するかが必要でした。

console.logの上限を変えられれば良いのですが、できるかどうか分かりませんでした。

私の場合の原因と対処なので違ったらすみません。

投稿2016/05/20 14:51

編集2016/05/20 14:53

eripong

総合スコア1546

eripong

2016/05/20 14:56

デバッガで止めて値を見ても良いですね。

MH00214

2016/05/21 06:09

コメントいただきましてありがとうございます！私の場合、上記の赤枠で囲っていただいている部分の文字列については ①endpointのURLをクリック ②出てきたURLからAPA...（以下略）の部分をコピペして、ターミナルに打ち込むコマンド文にペーストしました！なのでその部分（console.logで食略されてしまっている部分）については問題なく取得できていると思っています。エラー内容から察するに、gcm_sender_idの設定を間違えているか、ご指摘の文字列が、上記の方法でうまくとれていないか、なのかな〜、と思っています。最近の技術なので、あまり情報が出回っておらず。。。苦戦中です。

eripong

2016/05/21 07:23

そうですか。。。 APIキーとmanifest.jsonのプロジェクトが不一致なのかも知れません。それから、ブラウザでmanifest.jsonに直接アクセスはできますか？

行動規範の内容に同意します