【PWA】webプッシュを使って、更新通知を行えるようにする

Onesignalというサービスを使ってweb pushを実装してみます。

One Signal

無料で使える通知サービスのone signalにアカウントを作ります OneSignal: High Volume Mobile and Web Push Notifications

AMP web pushの前提知識

ANDROIDデバイスのみのサポートとのこと。

AMP Web PushはANDROIDデバイスでのみサポートされています。iOS**デバイスではサポートされていません**。iOSデバイスはAMPページをサポートしていますが、 WebプッシュはiOSではサポートされていません 。

OneSignal Push Notification Service Documentation

なんやて・・・ ということは、Appleのデバイスの環境じゃあ動かないってことか・・・

• Safari (MacOS)
• Chrome(MacOS)
• Safari (iOS )
• Chrome (iOS)

やばい、テストできないwww まぁ、いいや、続けましょう。

amp-web-push

AMPモジュールを使います。

<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

localhostでテストが・・・できない？

Httpsドメインが必須です。 OneSignalではLocalhostで試す用の設定も用意されています。 が、AMPのコンポーネントはlocalhostはダメです。ぐわっ

おそらく、AMPじゃなければ、localで試すことが可能なんだと思います。

ここにきて、Netrifyが火を吹く！

Httpsのテスト環境ということで、大好きなNetrifyを活用することにしました。

特定のブランチへのプッシュをフックに、ビルド＆デプロイしてくれます。 静的サイトを吐き出してくれるので、とても便利。

netlify hostingで動いていることを確認

おおーサービスワーカー動いてる！ しかし、errorが。 うまく動いていないようなので、chromeのコンソールを見てみると・・・こんなエラーが。

A bad HTTP response code (404) was received when fetching the script.
Failed to load resource: net::ERR_INVALID_RESPONSE

Networkのタブを見てみると、OneSignalSDKWorker.js 読み込めていないようです。

単に.ignoreに書き込んであって、プッシュされてないだけでした😅

デバッグ方法

Androidのスマホかタブレットが必要です・・・ って持ってないし・・・

PCでAndroid端末のブラウザチェックをして、検証までやってしまおう！ | ジーニアスブログ というわけで、エミュレーターを導入して試してみました。

まとめ：いったん諦めて、iOS実装完了まで待ちます・・・

なんか、一応、動いてるっぽいが、狙ってる通りにはならない・・・ うーん、これはどういうことだろう。

ちょっとonesignalも理解し切れていない部分があって、心折れてきました。 Firebaseにもプッシュ通知があるらしいので、そちらも試してみるのも良いかもしれません。

何はともあれ、iOS系のサポートが待たれるところです。。。