Chrome Push NotificationのサンプルはDropboxでホストした環境では動かない

アプリを使わなくてもPush通知が来る！
http://tech.vasily.jp/android_chrome_push/

この記事を読んで、早速やってみた。記事では github.io を紹介しているが、API キーとか入れたソースを公開するのにためらったので、Dropbox の Public 機能を使うことにした。

で、アクセスしてみたが、

index.htmlにアクセスすると、問題なければ「Enable Push Messages」ボタンが有効になっており

ここのところが有効にならない。Chrome (Mac)のバージョンは 42.0.2311.50 beta (64-bit) で対応しているはず。オカシイ。

Developer toolを開いてみると、

DOMException: Failed to register a ServiceWorker: A bad HTTP response code (403) was received when fetching the script.

何やらどこかの処理で 403 が返ってきてるらしい。

chrome://serviceworker-internals/ を開くと ServiceWorker のデバッガを開けるので Open DevTools.. にチェックを入れてみる。

再度 index.html にアクセスしてみると、

GET https://dl.dropboxusercontent.com/u/xxxxxx/push-messaging-and-notifications/service-worker.js net::ERR_INVALID_RESPONSE

とあり、どうやら service-worker.js を取得できていないらしい。

ところが、これを直接 https で取得してみると、問題なく取得できる。なぜだろう。

といったところで、こんな投稿を見つけた。

When Chrome downloads the ServiceWorker script, it sets "Service-Worker: script" header in the HTTP request.
dl.dropboxusercontent.com returns 403 Forbidden when this header is set.

Dropbox は ServiceWorker を取得する際の HTTP リクエストヘッダを通してくれないらしい。

ということで、結局元記事どおり github.io で試したら、うまくいった、というお話。元記事書いてくれた人に感謝。
(よく考えたら、APIKey 公開が不安だったら無効化すればいいだけの話。)