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

2020-05-19

(LastUpdated: 2020-05-19)

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

  1. One Signal
  2. AMP web pushの前提知識
  3. amp-web-push
  4. localhostでテストが・・・できない?
  5. ここにきて、Netrifyが火を吹く!
  6. デバッグ方法
  7. まとめ:いったん諦めて、iOS実装完了まで待ちます・・・

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系のサポートが待たれるところです。。。


タグに関連づけられた記事

AM2

JAMstacなブログにまつわる、技術的なことなどを記録しています。