10 の素晴らしいプログレッシブ Web アプリ (PWA) の例
この記事では、Web テクノロジーを巧みに利用してネイティブ アプリケーションに匹敵するユーザー エクスペリエンスを提供する、10 種類のプログレッシブ Web アプリケーション (PWA) の事例を紹介します。
Redmenta は、教師と生徒が既存のコースからパーソナライズされた学習パスを作成できるようにする AI ベースのプラットフォームです。このソフトウェアは生徒向けの学習アクティビティを生成し、教師が生徒の進捗状況を追跡できるようにします。プログレッシブ Web アプリ (PWA) として、Redmenta は、App Store アプリをダウンロードすることなく、任意のデバイスのブラウザから直接インストールできます。
Redmenta は最新アプリの完璧な例です。React で構築され、AI を活用し、美しくデザインされ、モバイルに対応し、オープン Web 上で配布されます。
フォドマペディアは、過敏性腸症候群の人向けに特別に設計されており、低FODMAP食を通じて症状を管理できるよう支援します。 Bubble で開発された PWA のコードなしの例は、ユーザーが自分の食事のニーズに適した食品を特定するのに役立ちます。日常的に使用するツールなので、ホームページから直接アプリケーションとしてインストールできます。
「インストール」をクリックすると、PWA をホーム画面に追加するための手順が表示されます。手順は特定のデバイスにインテリジェントに適応します。最新の Web テクノロジーのおかげで、PWA はほぼどこからでもインストールできるようになりました。
最初のプロンプトを見逃した可能性があるユーザーのために、Fodmapedia はヘッダーに便利なインストール リンクを提供します。このリンクをクリックすると、アプリのスクリーンショット、詳細、レビューが記載された専用のインストール ページに移動します。
Fodmapedia は、コードを必要とせずに、ユーザーにとって明確で具体的な問題を解決し、それをアプリ ストアの外に配布する方法を示す PWA の優れた例です。
Bingo em Casa はブラジルのスポーツブックおよびカジノ アプリで、ネイティブ アプリの代わりに PWA を使用することを選択しました。そのアプリが Google Play と App Store で禁止されているカテゴリに該当することを考慮すると、これは明らかな選択です。
実際、PWA は、ギャンブル、アダルト コンテンツ、暗号通貨、大麻、健康などの機密性の高い業界のアプリケーションにとって理想的なソリューションです。 PWA を使用すると、配布を完全に制御しながら、ユーザーが不審な実行可能ファイルをダウンロードする必要なく、アプリをユーザーのホーム画面に便利に配置できるようになります。
Bingo em Casa は、ユーザーにログイン ページから PWA を直接インストールすることを推奨しています。インストールは即座に行われ、アプリがホーム画面から起動すると、プッシュ通知を有効にするように求められます。このフローは特にうまく機能します。iOS (バージョン 16.4 以降) では、プッシュ通知はインストールされている PWA でのみ利用可能です。
起動するとすぐに通知プロンプトを表示する煩わしい Web サイトとは異なり、Bingo em Casa は、ユーザーがアプリとの有意義な関与を示すまで賢明に待機してから、通知へのオプトインを適切に促します。よくやった！
Nekodex は暗号通貨ウォレット アプリケーションです。前の PWA の例と同様に、Web フォーマットを活用してアプリ ストアの制限を回避しながら、シームレスなユーザー エクスペリエンスを提供します。
美しいアニメーションと洗練されたインターフェイスを備えたこの Web アプリは、一度インストールするとネイティブの対応するアプリとほとんど区別がつきません。一部の開発者は、PWA はネイティブ アプリほど見た目も機能的にも魅力的ではないと感じています。ネコデックスはそうではないことを証明し、PWA が非常にスタイリッシュに見えて感じられることを示しています。
クロスデバイスのインストール方法も巧妙です。 Web サイトの右上隅にある「Launch App」をクリックしてコードを表示します。携帯電話でコードをスキャンすると、アプリをインストールするように指示されます。とても賢いですね！
Run247 は、トレイルとウルトラ ランニングの愛好家のためのグローバル コミュニティで、ニュース、イベント、専門家のアドバイスを提供します。姉妹アプリの Tri247 と同様に、配布には PWA 形式を選択しています。
主にモバイル デバイスを対象とした前述の PWA とは異なり、Run247 はデスクトップ ユーザーとモバイル ユーザーで同様に機能します。特に素晴らしいのは、サイトの左上隅にある「アプリを追加」ボタンです。ワンクリックするだけで、アプリがコンピューターまたは携帯電話に即座にインストールされ、デバイス間で簡単にアクセスできるようになります。
PWA のインストールはモバイル デバイスに限定されません。macOS (Safari、Chrome、Brave、または Edge 経由)、Windows (Chrome、Brave、または Edge を使用)、さらには ChromeOS でも機能します。
この PWA サンプルは、インストール ロジックを非常に徹底的に処理します。たとえば、PWA インストールと互換性のないいくつかのブラウザ (実際には主にデスクトップ用 Firefox) を使用すると何が起こるかを次に示します。
Fou d’la Bouffe は、ケベック州とオンタリオ州で運営されているフードデリバリー サービスで、フランス語と英語が毎日話されています。このバイリンガルの視聴者に応えるために、アプリはフランス語と英語の両方で利用できます。ページが読み込まれると、アプリはユーザーの言語を検出し、それに応じて PWA をインストールするようユーザーに求めます。
食品配達サービスの場合、顧客のホーム画面に存在感を示すことが重要です。位置情報やプッシュ通知などの高度な機能を備えたこの PWA の例は、Web で何ができるかを完璧に示しています。
ミュージック リーグは、クロスプラットフォームの音楽発見ゲームです。多くのネイティブ アプリと同様に、ランディング ページにはアプリの簡単な概要とインストール オプションが表示されます。ただし、ほとんどのネイティブ アプリとは異なり、Music League は優れた柔軟性を備えています。
強制的なインストールはありません - ゲームをブラウザで直接プレイすることも、必要に応じて携帯電話にインストールすることもできます。これは、PWA 形式を効果的に使用する良い例です。従来のアプリ ストアを閲覧する際の煩わしさを取り除くことで、Music League の開発者はアプリの採用を増やしました。
Sky Freebies は、さまざまな小売店から無料の商品やサンプルを見つけるのに役立つ、お買い得なプラットフォームです。
しかし、ご想像のとおり、景品は永久に続くわけではありません。このため、ユーザーは定期的に Web サイトをチェックして最新のオファーを入手する必要があります。これをさらに簡単にするために、サイトの閲覧中にいつでも利用できる便利なインストーラー ウィジェットが追加されました:
アプリをインストールして起動すると、コンテンツ自体が表示されます。 Sky Freebies は表示モードを検出し、それに応じてユーザー エクスペリエンスを調整します。ホーム ページへのアクセスからホーム画面から直接アプリを起動するまで、エクスペリエンス全体がスムーズでシームレスです。
Sky Freebies はプッシュ通知をうまく活用し、新しいオファーがアプリに追加されるとすぐに通知します。もちろん、これらの通知は完全に自主的なものです。
興味深いことに、このアプリはウェブ上で完全に入手可能ですが、Google Play や Windows ストアからもダウンロードできます。 Apple は PWA を制限していますが、Google と Microsoft は Web アプリに対してよりオープンです。したがって、PWA 形式を選択することは、従来のアプリ ストアの使用に慣れているユーザーを放棄することを意味するものではありません。
PWA はローカルガイドにとって理想的なフォーマットであり、The Bedford Guide はその好例です。英国ベッドフォードの最高のレストラン、バー、観光名所、その他の人気スポットを探索するのに役立ちます。
ベッドフォードを訪れる予定ですか? Web サイトをデバイスにインストールするだけで、必要なときにいつでも簡単にアクセスできます。
Bedford Guide は WordPress を使用して開発されており、ネイティブ アプリと同じように美しいスプラッシュ スクリーンで開きます。
オンライン ストアで定期的に商品を注文しますか?簡単にアクセスできるように、携帯電話のホーム画面に追加してみてはいかがでしょうか? HobbyHop は Shopify を利用した手工芸品ストアであり、PWA でもあります。
Shopify は、オンラインで商品を販売するための最も簡単なプラットフォームの 1 つであり、Shopify App Store のおかげで、クリックするだけでストアをインストールとプッシュ通知を備えた PWA に変えることができます。
HobbyHop は、ホームページのフッターから独自のインストール ページにリンクします。これは、アプリ内でのユーザー ジャーニーを中断することなくインストールを促進する簡単な方法です。
最後になりましたが、Photopea について触れなければなりません。これは、私の意見では、これまでに Web 上で構築されたソフトウェアの中で最も偉大なものの 1 つです。つまり、HTML、CSS、JavaScript などの Web テクノロジーを完全に使用して開発された、無料の Photoshop の代替品です。
他の例と同様に、これを PWA としてデバイスにインストールできます。私はMacのDockに入れてほぼ毎日使っています。とてもうまく機能するので、実際にはネイティブアプリではないことがわかりません。
しかし、Photopea の本当に素晴らしい点は、実際に何ができるかということです。デザイナーがこのような複雑なタスクを Web 上で直接処理できるようにするのは、まさに天才の賜物です。
PWA の可能性について懐疑的ですか? Photopea を試してみてください。考えが変わるかもしれません。
以上が5 つで学べる実際の PWA の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
