【iOSも通知受取可能】trogからのお知らせをプッシュ通知で受け取ろう！

trog、4度目のリニューアルのご報告です。
今回の目玉はPWA(Progressive web apps)によるWeb Push通知への対応です。

Web Push通知とは、許可した端末に対してブラウザを通じてメッセージを送信する仕組みです。
ユーザーがサイトにアクセスしていないときでも、新着情報や重要な通知を送信できます。
ユーザーからの許可していない場合には、通知は送信しません。

今回のバージョンアップにより、皆様のお手持ちのiPhone、Androidスマホ、PC等の端末に向けて、trogの更新通知をお届けできるようになりました。

App StoreやGoogleストアからインストールするアプリと同じようなプッシュ通知が、trogから配信されるイメージです。

通知受取手順

PC、Androidも同様の手順になります。iPhoneを中心に通知受け取りに必要な手順を説明していきます。

ブラウザで当サイト https://microayatron.com/ にアクセスしてください。

iPhoneの場合は必ずSafariから追加してください。(ChromeブラウザからではPWA化しません。)

共有ボタンからホーム画面に、PWA版trogを追加してください。





ホーム画面に追加にしたPWA版trogのTOP画面右上の「通知設定」から通知設定画面へお進みいただき、「通知を許可する」ボタンを押してください。



通知設定画面の「通知を許可する」ボタンを押すことで、OSの通知確認ダイアログが表示されます。




通知を許可していただくと、以下のような表示になります。



これで設定は完了です。


Windows PCとiPhoneは手元にある端末で通知受け取りできたので、たぶん大丈夫です。

Androidだけは、わたしが端末を持ち合わせていないので、テストできていないです。
Androidユーザーの皆さんごめんなさい…。

通知OFF手順

あとから通知を切りたくなった場合は、端末の設定アプリから、アプリケーションの「通知」→trogへ進み、



「通知を許可」をOFFにしてください。



PWA版 trogを端末から削除していただくことでも通知をOFFにできます。

旧PWA版trogを端末に追加された読者様

旧版PWAは画面が真っ白になるかと思います。
フレームワークをGatsbyからNext.jsに変更したことによる影響だと思います
お手数ですが端末から削除をお願いします。

リニューアル経緯

先述のとおり、今回はフレームワークをGatsbyからNext.jsに変更しました。

GatsbyからFirebase Cloud Messageを使用してWeb Push通知が実装できないか、試行錯誤していたのですがエラーが頻発して心が折れました技術力が足りなかったみたいです。

Gatsbyから無理に移行したのでソースコードが汚いままです…
これからNext.jsを勉強しつつ、リファクタリングしていきます。


* * *


読者の皆様、今後ともtrogをよろしくお願いします。