Dellows News

Webアプリを「ホーム画面に追加」してもらい、iPhoneにも通知を届ける。アプリストアに出さずに配れる無料の案内部品「Jag PWA installer」を公開

ジャグプロジェクトがJag PWA installerをOSSとして無料公開

CATEGORY: テクノロジー

ジャグプロジェクト合同会社は2026年10月20日、Webアプリをスマートフォンのホーム画面に追加する手順を案内する部品「Jag PWA installer」をオープンソース(MITライセンス)として無料公開しました。

iOS 16.4以降のiPhoneでは、Webアプリをホーム画面に追加することで通知を受け取れるようになります。同社は、アプリストアを経由せずに通知機能を持つWebアプリを提供する手段として本部品を開発しました。

開発の背景と課題

iPhoneでWebアプリからの通知(Webプッシュ通知)を受信するには、ホーム画面への追加が必要です。しかし、アプリ側から自動で追加することはできず、利用者が手動で「共有」から「ホーム画面に追加」を選択する操作が求められます。

操作時に共有メニューが画面の下部を覆うことで案内が見えなくなる問題に対し、同社はある町内会のアプリにおいて実機検証と改善を10回以上重ね、操作を妨げない案内設計を構築しました。

Jag PWA installerの機能

Jag PWA installerは、WebページやWebアプリをホーム画面に追加させ、通知を届けられる状態へ導くためのウィザード形式の案内部品です。利用者は写真と画面を見比べながら進行でき、案内表示が時間経過で自動進行することはありません。

端末やブラウザに応じた表示制御に対応しており、共有ボタンの位置が異なるiPhoneのSafari(画面上部に案内)とChrome(画面下部に案内)で案内位置を切り替えます。AndroidのChromeでは1回で追加できるボタンまたは文字手順で案内し、LINEなどのアプリ内ブラウザで開かれた場合はSafariやChromeでの開き直しを促します。ホーム画面からアプリが起動されたことを認識した後は、通知許可の案内に遷移します。

導入における留意事項

Jag PWA installer単体では通知配信を行わないため、Webプッシュなどの通知基盤は開発者側で用意する必要があります。また、本部品はReactとTypeScriptで記述されており、改修可能なWebアプリと開発環境を要します。

Safariとホーム画面追加後のアプリではデータ保存場所が異なるため、ブラウザ側のみでは追加済みかを判別できません。パソコン環境ではスマートフォン向けの案内は非表示となり、すべての端末やブラウザでの動作は保証対象外とされています。

入手方法と提供形式

部品のコードはGitHubから登録不要で取得可能です。メールアドレスを登録することで、質問への回答を通じて組み込み用依頼文を生成できる手引き(ウィザード)も提供されています。

  • 会社名:ジャグプロジェクト合同会社(Jag Project, LLC)
  • 所在地:東京都江東区
  • 代表者:Jag Yamamoto
  • 関連URL:https://www.jagproject.com/lp/pwa-installer-20261015/
  • GitHub:https://github.com/jagyamamoto/pwa-install-guide

本記事はジャグプロジェクト合同会社の発表をもとに作成しました。

アクセスランキング

今日

1週間