プログレッシブウェブアプリ（PWA）

プログレッシブウェブアプリ（PWA）は、モバイルウェブとモバイルアプリの利点を融合させた新しいテクノロジーで、優れたモバイルウェブ体験を実現します。通常のアプリ（ウェブアプリ）と同様にスマートフォンにインストールされ、ホーム画面からアクセスできます。

ユーザーはホーム画面からアプリを起動することで、アプリのようなインターフェースを通してウェブサイトを操作できます。リピーターはほぼ瞬時の読み込み速度を体験し、PWAの優れたパフォーマンスを享受できます。

対応モバイルデバイスでウェブサイトを閲覧しているユーザーには、画面下部に「ホーム画面に追加」の通知が表示され、ウェブサイトをデバイスのホーム画面に「インストール」できます。アクセスしたすべてのページはデバイスにローカルに保存されるため、オフラインでも閲覧可能です。

• ウェブサイトをホーム画面に追加するには、「ホーム画面に追加」のプロンプト（Android版Chrome）またはブラウザのメニューから追加してください。
• ホーム画面からアプリを開くと、スプラッシュ画面が表示されます。
• データ通信とWi-Fiをオフにしてオフラインにし、アプリを開いてください。オフライン状態でもアプリは表示され、既に閲覧したページも閲覧できます。

プログレッシブウェブアプリ（PWA）は、モバイルウェブとモバイルアプリの利点を融合させた新しいテクノロジーで、優れたモバイルウェブ体験を実現します。通常のアプリ（ウェブアプリ）と同様にスマートフォンにインストールされ、ホーム画面からアクセスできます。

ユーザーはホーム画面からアプリを起動することでウェブサイトに戻り、アプリのようなインターフェースを通してウェブサイトを操作できます。リピーターはほぼ瞬時の読み込み速度を体験し、PWAの優れたパフォーマンスを享受できます。

対応モバイルデバイスでウェブサイトを閲覧しているユーザーには、画面下部に「ホーム画面に追加」の通知が表示され、デバイスのホーム画面にウェブサイトを「インストール」できます。アクセスしたすべてのページはデバイスにローカルに保存され、オフラインでも閲覧可能です。

ウェブサイトをホーム画面に追加するには、「ホーム画面に追加」のプロンプト（Android版Chrome）またはブラウザのメニューから追加できます。ホーム画面からアプリを開くと、スプラッシュ画面が表示されます。

データ通信とWi-Fiをオフにしてオフラインにし、アプリを開いてください。オフライン状態でもアプリは表示され、既に閲覧したページも閲覧できます。

iOSデバイスでのPWAのインストールとテスト手順

iOSデバイスでは、PWAは現在Safariブラウザでのみ動作します。Chrome for iOS、Firefox Focus for iOS、Dolphin Ghostery、Opera Mini、Adblock Browserなどのブラウザは、現時点ではPWAをサポートしていません。 私はこのプラグインについて専門家ではありません。今日使い始めたばかりですが、私の経験では、iOSでは動作せず、Androidでのみ動作します。iOSでは、オプションで「ホーム画面に追加」することはできますが、Androidのように通知は表示されません。

それでは、以下の動画をご覧になり、iOSとiPhoneでPWAをインストールする手順に従ってください。

iOSとiPhoneでのプログレッシブウェブアプリの仕組み

1. 閲覧データがすべて削除されていることを確認してください。
2. ZENにアクセスしてください（注：現在、Android版Chromeやその他のAndroidブラウザと同様に、iOSデバイスではホーム画面に追加するプロンプトが内蔵されていません。そのため、PWAをホーム画面に手動で追加する必要があります）。
3. ブラウザのオプションにある共有ボタンをタップします。
4. オプションから「ホーム画面に追加」をタップすると、ウェブサイトのアイコンまたはスクリーンショットがデバイスのホーム画面に即座に追加されます。
5. ホーム画面のアイコンをタップすると、ウェブサイトのプログレッシブウェブアプリ（PWA）が読み込まれます。
6. マニフェストで設定したアイコンと背景色を含むスプラッシュスクリーンは、iOSではサポートされていないため、現時点では表示されません。
7. PWAで気に入ったウェブページをいくつか閲覧した後、iOSデバイスのインターネット接続を切断し、ウェブアプリを閉じます。
8. その後、ウェブアプリのアイコンを再度タップすると、オンライン中に閲覧したすべてのページが表示され、まだ閲覧していないページは、サービスワーカーで設定したオフラインページに表示されます。別の手順：iPhone iOSのSafariに「ホーム画面に追加」を追加する方法（AMP対応ソリューション）

別のインストラクション：How to add “Add to Homescreen” in Safari of iPhone iOS (AMP Compatible Solution)