【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をよろしくお願いします。
- この記事を共有する