iPhone/iPadでtrogからプッシュ通知を受け取る方法

テクノロジー
2023/08/02
post-hero-image

trogをご覧いただきありがとうございます。

このページでは、iPhoneもしくはiPadを対象として、trogからプッシュ通知を受け取るための設定について説明します。
説明の都合上、対象端末はすべて"iPhone"と記載します。
iPadも同様ですのでご了承ください。

この記事を書いている2024年2月時点で、iPhoneでWebサイトからプッシュ通知を受け取る方法は一つだけです。

  1. SafariもしくはChrome経由でWebサイトを「ホーム画面に追加
  2. アプリがiPhoneのホーム画面に追加される
  3. そのアプリを起動して、アプリからの通知を許可する

これによりiPhoneでもWebサイトからプッシュ通知を受け取ることが可能になります。
(※iPhone向けプッシュ通知機能を実装したWebサイトのみ可能です。)


trogではプッシュ通知配信に対応したProgressive Web App(PWA)をご提供しています。ホーム画面に追加していただくことで、ワンクリックでtrogにアクセスできるアプリです。
ブラウザから開くよりもアクセスが簡単でおすすめです。

具体的にはApp Storeからインストールしたアプリと同じようなプッシュ通知が、trogから配信されます。



アプリを手動で更新する必要はありません。インターネットに接続された環境でtrogアプリを起動するだけで、最新のアップデートやコンテンツが自動的に反映されます。

(※通常PWAはオフラインでの閲覧が可能ですが、現在対応できておりません。アップデートまでしばらくお待ちください。)


* * *


iOSの制約上、以下の方法ではプッシュ通知をサポートしておりません。

  • Chromeブラウザ
  • Safariブラウザ

PC版ブラウザとは挙動が異なります。あらかじめご容赦いただきますようお願いいたします。

対応バージョン

  • iOS 16.4以上
  • iPadOS 16.4 以上
  • Google Chrome アプリバージョン115以上


(参考)iPhoneのSafariでWebサイトをブックマークに登録する - Apple サポート (日本) https://support.apple.com/ja-jp/guide/iphone/iph42ab2f3a7/17.0/ios/17.0#iph4f9a47bbc
iPhoneの通知の設定を変更する - Apple サポート (日本) https://support.apple.com/ja-jp/guide/iphone/iph7c3d96bab/16.0/ios/16.0
プログレッシブ ウェブアプリを利用する - Google Chrome ヘルプ https://support.google.com/chrome/answer/9658361?hl=ja&co=GENIE.Platform%3DDesktop&oco=0#zippy=%2Cwindowsmaclinux-%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E3%81%8B%E3%82%89%E3%82%A2%E3%83%B3%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B

アプリのインストール(追加)

本記事ではSafariを例に進めますが、Chromeからのアプリインストールも同様の手順となります。

Safari、またはChromeアプリから(https://microayatron.com/)にアクセスしていただき、ブラウザの共有ボタンから、「ホーム画面に追加」を押してください。




ブックマークをホーム画面に追加するような入力画面が表示されます。お好きな名前で登録してください。
ここで決めた名前がそのままアプリ名になります。

iPhoneの設定アプリからインストールしたPWAの管理が可能になることから、とくにこだわりがなければ「trog」のままにされるのをおすすめします。



通知を受け取る

ホーム画面に追加にしたtrogアプリを起動してください。
TOP画面右上の「通知設定」から通知設定ページへお進みください。



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




通知を許可していただくと、「trogからのお知らせを通知する設定になっています」と表示されます。


これでプッシュ通知の受け取りが可能な状態となります。


trogでは記事の更新や、お知らせがある場合に通知します。
個人ブログのため不定期となりますので、ご了承ください。

通知を拒否する

iPhoneの「設定」アプリから、trogアプリの設定詳細ページに進んでください。
設定アプリの検索バーに「trog」と入力していただくことで候補に表示されます。また設定アプリをひたすらスクロールしていただき「trog」を見つけていただく方法でもOKです。



「通知を許可」のトグルスイッチをオフにしてください。



これでtrogからのお知らせが通知されない設定になります。

trogアプリをiPhoneからアンインストール(削除)していただくことでも通知をオフにできます。

アプリのアンインストール(削除)

こちらはApp Storeからインストールしたアプリや、ホーム画面に追加したブックマークを削除する操作と同様です。

ホーム画面でtrogアプリを長押しして、表示されたメニューから「ブックマークを削除する」を押して削除してください。

(参考)アプリをiPhoneから削除する - Apple サポート (日本) https://support.apple.com/ja-jp/guide/iphone/iph248b543ca/ios

通知が届かない

trogでは記事の更新や、お知らせがある場合に通知しております。
個人ブログのため、記事の更新は不定期となります。数か月更新がない期間もあります。
あらかじめご了承ください。

また、より操作しやすいアプリを目指して、PWA・プッシュ通知機能アップデートのためにお勉強しております🦭📖
trogのアップデートまでしばらくお待ちください。

通知が複数届く

App Store経由でインストールしたアプリとは異なり、ブックマークのような感覚でアプリを追加いただけることから、PWAは複数個をホーム画面に追加することが可能です。
Safari、Chormeから一回ずつインストールした場合も、それぞれが独立したアプリとして振る舞います。
お手数ですが不要なtrogアプリは削除いただくようお願いいたします。

iPhoneの設定アプリからも、インストールしたPWAの管理が可能です。
trogアプリの通知設定をご確認いただくようお願いいたします。


また、端末によっては不具合が発生している場合も考えられます。
可能であれば、iOSを最新バージョンに更新していただくようお願いいたします。

併せて、以下のページをご覧いただきながら、システム設定のSafariの設定からキャッシュとCookieの削除をお試しください。
"iPhone、iPad、iPod touch で Safari から閲覧履歴、キャッシュ、Cookie を消去する - Apple サポート (日本)" https://support.apple.com/ja-jp/105082


再度trogアプリを起動した際に、自動で最新情報を取得します。


* * *


ここまでお読みいただきありがとうございました。
今後も読者の皆さまに楽しんでいただける記事をご提供できるように継続して活動していきます。
応援していただけますと幸いです🙏

    この記事を共有する
とろ(microayatron)
profile-icon

Webアプリケーションのプログラマ(フロントエンドエンジニア) Angular(TypeScript) / Next.js / Cypress を主に使用。
前職はピアノ技術者(調律師)。2017年からブログ「trog」を運営。
あざらしと音楽が好き。

trogではプッシュ通知機能を提供しています。

新しい記事が投稿されたタイミングで、お使いの端末にお知らせが届きます。

よければ通知設定ページから通知の許可をお願いします。