2022年のプログレッシブウェブアプリの究極のガイド–50のPWAの例
公開: 2021-03-18プログレッシブウェブアプリの構築に興味がありますか？ このガイドでは、市場で最高のPWAの50の例とともに、知っておく必要のあるすべてのことを説明します。
何年もの間、私たちはノンストップで説教してきました。ネイティブアプリが必要です。 それには正当な理由があり、私たちは今でもそれを支持しています。
当社のプラットフォームであるNews、Canvas、Canvas for eCommerceは、お客様がモバイルUXを大幅に改善し、トラフィックを増やし、ロイヤルティを高め、収益を増やすのに役立ちました。 ネイティブアプリは、コアユーザーベースとのより深い関係を構築するために優れて機能し、忠誠心、エンゲージメント、維持を重視するブランドにとって必須です。
しかし、完璧なものはありません。 ネイティブアプリは、優れたWebエクスペリエンスに代わるものではありません。
ネイティブアプリは、アプリをインストールしている人にのみ関係します。 彼らは、初めてWebであなたをチェックアウトする新しい訪問者、時々立ち寄ってアプリをインストールするのに十分なコミットメントを持っていないカジュアルなユーザー、またはデスクトップを使用している顧客には何もしません。
これらの潜在的な顧客も成功のために絶対に重要です。 第一印象は非常に重要であり、ネイティブアプリは常に目標到達プロセスの初期段階で役立ちます。 あなたは旅全体のために速くてスムーズな経験を提供する必要があります。 どのように？
プログレッシブウェブアプリ（PWA）を入力してください。 あなたがウェブサイトを持っていて、それがあなたやあなたのビジネスにとってリモートで重要であるなら–あなたはPWAを必要とします。
この記事では、プログレッシブWebアプリを定義し、それらの最も重要な利点について説明し、インターネット上で最高のPWAの50の例を共有します。
PWAを構築する方法と、それらがネイティブモバイルアプリと連携して優れたモバイルUXコンボを作成する方法についてのいくつかの指針で締めくくります。 飛び込みましょう。この記事の終わりまでに、プログレッシブWebアプリプロジェクトを開始するために知っておく必要のあるすべてのことを理解できるようになります。
基本的な質問から始めましょう– PWAとは何ですか？
PWAは、Web訪問者により良いエクスペリエンスを提供するのに最適です。 ただし、iOSとAndroidにプッシュ通知を送信する場合、アプリストアにアクセスして、モバイルアプリに必要なエクスペリエンスをユーザーに提供する場合は、期待を下回る可能性があります。 MobiLoudは、ニュースサイト、ブログ、eコマースストア、および使用する技術スタックに関係なく、あらゆるサイトやWebアプリ向けのソリューションを使用して、Webサイトをネイティブモバイルアプリに変換するのに役立ちます。 無料のデモを入手して詳細を確認し、サイトでどのように機能するかを確認してください。
プログレッシブウェブアプリとは正確には何ですか？ PWAを定義しましょう
プログレッシブウェブアプリは、最高のウェブと、以前はネイティブアプリでしか実現できなかった機能を組み合わせたものです。
PWAは、従来のWebサイトのようにブラウザに存在し、Webのリンクおよび検索エンジンインデックスのインフラストラクチャに完全に接続されています。 ネイティブアプリと同様ですが、ホーム画面のアイコンから起動したり、ユーザーのデバイスにプッシュ通知を送信したり、一瞬で読み込んだり、オフラインで動作するように構築したりできます。
プログレッシブウェブアプリはあなたのサイトから分離されていません。 これらはサイトの拡張機能であり、現在のベストプラクティスを最新のものにし、サービスワーカーなどの最先端のWebテクノロジーを活用して、モバイルブラウザー内からアプリのようなエクスペリエンスを提供します。
たぶん、あなたはまだ彼らが何であるか正確にはわからないでしょう。
これは理解できることです。というのも、この用語は多くのことを意味しますが、確かな定義はとらえどころのないものです。 用語の歴史を見て、物事を明確にしましょう。
プログレッシブウェブアプリの元の定義
「プログレッシブウェブアプリ」という用語は、2015年にフランシスベリマンとGoogleエンジニアのアレックスラッセルによって造られました。 彼らは新しいクラスのWebアプリケーションの出現を観察しており、夕食時にそれらを定義して名前を付けることにしました。
彼らは次の基準を考え出しました。
- レスポンシブ：あらゆるフォームファクターに適合
- 接続に依存しない：サービスワーカーがオフラインで作業できるように段階的に強化
- アプリのようなインタラクション：シェル+コンテンツアプリケーションモデルを採用して、快適なナビゲーションとインタラクションを作成します
- 新鮮：Service Workerの更新プロセスのおかげで、透過的に常に最新の状態になります
- 安全：スヌーピングを防ぐためにTLS（Service Worker要件）を介して提供されます
- 発見可能：W3CマニフェストとService Worker登録スコープのおかげで、検索エンジンがそれらを見つけることができるため、「アプリケーション」として識別できます。
- 再エンゲージ可能：OSの再エンゲージUIにアクセスできます。 例：プッシュ通知
- インストール可能：ブラウザが提供するプロンプトを介してホーム画面にインストールできるため、ユーザーはアプリストアの手間をかけずに最も便利なアプリを「保持」できます。
- リンク可能：摩擦がなく、インストールがゼロで、共有が簡単であることを意味します。 URLの社会的力は重要です。
これらの基準が定義の「Webアプリ」の部分をどのように満たしているかを確認できます。
長年にわたり、私たちや他の企業のような企業は、企業がWebテクノロジーを使用してアプリエクスペリエンスを作成できるプラットフォームを作成してきました。 これは今日までうまく機能しますが、トレードオフがあります。 優れたネイティブアプリエクスペリエンスを作成するには、Webの発見可能性とリンク可能性が失われます。
サービスワーカー（後で説明します）などの新しいWebテクノロジーが登場し、状況が変わりました。開発者は、ネイティブアプリのUXを最大限に活用したエクスペリエンスを構築し、それをブラウザーに配置できるため、Webのすべてのメリットを維持できます。
平凡なモバイルWebUXを受け入れる必要がなくなり、実際の取引を得るためにネイティブアプリをダウンロードするように人々に促します。 オンラインでブランドとやり取りしたすべての人に、AppStoreとWeb全体で優れたモバイルエクスペリエンスを提供できます。
これは、ベリマンとラッセルが観察したことです。 彼らは何も発明しませんでした、彼らはウェブの変化に気づき、それに名前を付けました。
「プログレッシブ」部分はどうですか？
このコンテキストでは、アプリがプログレッシブエンハンスメントで構築されていることを意味します。 これは、すべての人に役立つ「ベースライン」エクスペリエンスの構築に焦点を当てた設計手法ですが、より高度なデバイスでアップグレードおよび拡張されます。 プログレッシブウェブアプリのエクスペリエンスは、必ずしもすべてのユーザーで同じであるとは限りません。デバイスのパワーとユーザーが付与する権限に基づいて適応します。
では、ベリマンとラッセルの定義で十分ですか？ 問題は、実際にこれらの基準をすべて満たすPWAがほとんどないことです。 それらは、ウィッシュリスト、または狙うターゲット、またはモデルケースのようなものです。
Googleによるプログレッシブウェブアプリの定義
Microsoftは、しばらくの間PWAに熱心に取り組んできました。 Appleは説得力を持っており、現在（ほとんど）参加しています。しかし、ビッグテックの中で、最初からPWAを本当に擁護したのはGoogleでした。
とは言うものの、Google自体はその定義について100％確信しているようには見えません。 2015年に、彼らは10の特性のリストを出し、それを6つに減らし、次に3つの新しい特性を追加しました。
現在、プログレッシブウェブアプリのGoogleの定義には、3つの柱が含まれています。 紹介ページで、PWAは次のように述べられています。
「機能があり、信頼性が高く、インストール可能なように設計されたWebアプリケーション。 これらの3つの柱は、プラットフォーム固有のアプリケーションのように感じるエクスペリエンスに変換します。」
これはもっと役に立ちますが、とても広いのでそれほど役に立ちません。 ただし、重要な点は、PWAが従来はネイティブプラットフォームにのみ関連付けられていたエクスペリエンスをWebにもたらしていることを示唆しています。
プログレッシブウェブアプリの技術的定義
PWAを定義する3番目の方法は、UX基準ではなく、純粋に技術的な基準を指定することです。
これは、Web開発者であり著者であるJeremyKeithが2017年のブログ投稿で試みたものです。プログレッシブWebアプリとは何ですか。 。
キースは、PWAの定義に関する混乱は根拠がなく、基本的に3つの基準を満たす必要があると考えています。
- HTTPS – PWAは、HTTPSを採用している安全なサーバーで実行する必要があります。 サービスワーカーはその可能性に不可欠であり、HTTPSが設定されている場合にのみ使用できます。
- Service Worker –基本的にメインブラウザの「スレッド」とは別に実行されるJavaScriptファイルであり、開発者はアプリがネットワークリクエストとキャッシュを処理する方法を制御できます。 これは、PWAの驚異的な速度とオフライン機能を促進するのに役立ちます。
- Webアプリマニフェスト–名前、作成者、アイコン、説明、実行するリソースなどの詳細を含む、アプリケーションの説明をブラウザーに提供するJSONファイル。 これにより、アプリケーションが確実に検出可能になります。
キースはさらに、これは最小限の最低限の定義であると述べています。 PWAはさらに多くの機能を備えていますが、削減するには、これら3つの技術的基準を満たす必要があります。
そのため、元の観察/願望の定義、GoogleのUX主導の定義、および最小限の技術的定義を見てきました。 何を推測できますか？ まだ少しあいまいな点があるかもしれませんが、プログレッシブWebアプリとは何かについての良いアイデアが得られました。
PWAは、最新の安全な高速読み込みWebサイトであり、最先端のWebテクノロジーを使用してこれらの特性を実現しています。 従来のWebサイトとは異なり、ネイティブアプリのように実行およびユーザーに感じられ、その過程でブラウザータブを「エスケープ」します。
アレックスラッセルが言うように：
「これらのアプリは、パッケージ化されて店舗を通じて展開されるのではなく、適切なビタミンをすべて摂取したWebサイトにすぎません」
これはそれを置くための素晴らしい方法です。 PWAは最新世代のWebです。 これらは、最新のブラウザーテクノロジーの可能性を活用できるWebアプリです。 あなた自身のウェブサイトをPWAに変えることによって、あなたはそれが最適に機能するために必要な「ビタミン」をそれに与えます。
プロジェクトを刺激する50のPWAの例を見る前に、プログレッシブWebアプリを構築する利点に移ります。
プログレッシブウェブアプリのメリット
あなたがウェブサイトを持っていて、それがあなたのビジネスの成功に何らかの形で結びついているなら、あなたはPWAを構築する必要があると先に述べました。
それは大胆な発言のように思えるかもしれませんが、それは真実です。 どうして？
一言で言えば、PWAを構築しないことで、顧客、収益、成長をテーブルに残す可能性があります。 GoogleのウェブチームのPeteLePageとSamRichardは、次のように述べています。
「数字は嘘をつかない！ プログレッシブウェブアプリを立ち上げた企業は、目覚ましい成果を上げています。 たとえば、Twitterでは、セッションあたりのページ数が65％増加し、ツイートが75％増加し、バウンス率が20％減少しましたが、アプリのサイズは97％以上減少しました。 PWAに切り替えた後、日経は2.3倍のオーガニックトラフィック、58％のサブスクリプション、49％の毎日のアクティブユーザーを確認しました。 Huluは、プラットフォーム固有のデスクトップエクスペリエンスをプログレッシブウェブアプリに置き換え、再訪問数が27％増加しました。」
これは表面を傷つけるだけです。
PWAを立ち上げた直接の結果として、他の有名なブランドが達成した結果を見てみましょう。
- アリババはモバイルウェブのコンバージョンを76％押し上げ、iOSで14％、Androidで30％のアクティブユーザーを獲得しました
- Debenhamsは、モバイル収益が40％増加し、コンバージョンが20％増加し、市場のオンライン成長を上回りました。
- Pinterestは、費やされた合計時間が40％増加し、ユーザー生成広告の収益が44％増加し、コアエンゲージメントが60％増加しました。
- Forbesは、ユーザーあたりのセッション数が43％増加し、広告の視認性が20％向上し、エンゲージメントが100％増加しました。
- BMWは、販売サイトへのクリック率が30％増加し、読み込み時間が4倍速くなり、モバイルユーザーが50％増加し、オーガニックトラフィックが49％増加しました。
- MakeMyTripは、ページ速度を38％向上させ、コンバージョン率を3倍にし、買い物客のセッションを160％増加させました。
- AliExpressは、新規ユーザーのコンバージョン率を104％（iOSでは+ 82％）向上させ、セッションあたりの滞在時間が74％増加し、セッションあたりの訪問ページ数が2倍になりました。
- Housing.comでは、コンバージョンが38％増加し、平均セッションが10％長くなり、バウンス率が40％低くなり、ページの読み込み時間が全体で30％速くなりました。
- Wegoは広告のクリック率を3倍にし、全体で訪問者が26％増加し、コンバージョン数が95％増加しました。 iOSでは、コンバージョンが50％増加し、セッション期間が35％増加しました。
- Treeboでは、コンバージョン数が前年比で4倍に増加しました。 リピートユーザーは3倍高く変換しました。
- 11.91秒から4.69秒に半分以上の読み込み時間をTinderし、ネイティブアプリよりも90％小さいPWAで全面的にエンゲージメントを確認しました
これらすべての驚くべき結果はどのように可能ですか？ その多くは、PWAがはるかに優れたユーザーエクスペリエンスを提供し、そこから優れたビジネス結果が得られるという事実に要約されます。
それだけではありません。 最も重要なものである速度から始めて、プログレッシブWebアプリの主な利点のいくつかをより詳細に見てみましょう。
PWAは非常に高速です
現代の消費者は瞬間的な負荷を期待しています。 ハートビートに何かがロードされない場合、多くの人はおそらく永久に興味を失います。 これは自明であり、大量のデータによってサポートされています。
- ユーザーのほぼ50％が、モバイルでの最大の欲求不満は遅いページの読み込みを待っていると述べています（ソース）
- 2秒以内に読み込まれるページのバウンス率は9％、5秒かかるページのバウンス率は38％です（ソース）
- 「コンバージョン率の急激な低下」は、平均読み込み時間が1秒から4秒に増加することに関連しています（出典）
- ロード時間の1秒ごとの改善により、コンバージョン率が2％向上し、100ミリ秒の改善により、最大1％の増分収益が生成されます（ソース）
基本的に、サイトの読み込みが速いほど良いです。 あなたがあなたの顧客/読者/ユーザーを待たせるならば、彼らのまともな％は跳ね返り、あなたに彼らのお金を与えません。
サイトの速度を改善すると、全体的に良い結果が得られます。 これですべてです。
では、PWAはこれを達成するためにどのように役立ちますか？ プログレッシブウェブアプリは高速です。 本当に速い。
たとえば、Pinterestは、「インタラクティブまでの時間」の読み込み時間を、遅い23秒からわずか5.6秒に短縮することができました。 これは、平均して、低速の3G接続を介したAndroidハードウェアでした。 これは、主要な指標に歓迎すべき影響を及ぼしました。
悪くない、全く。 しかし、Pinterestの結果はまったく珍しいことではありません。
ストリーミングプラットフォームZEE5は、PWAを構築することにより、サイトの速度を3倍にし、バッファリング時間を半分にしました。 UberのPWAは、 2Gネットワークで3秒未満で読み込まれます。 Forbesは、モバイルの読み込み時間を以前のモバイルサイトの6.5秒からPWAのわずか2.5秒に短縮しました。
優れた、適切に設計されたプログレッシブWebアプリを構築すると、速度の向上が保証されます。
プログレッシブウェブアプリがこんなに速いのはなぜですか？
非常に重要なサービスワーカーのおかげで、PWAは非常に高速です。 ジェイソン・グリグスビーが彼の優れた本「プログレッシブウェブアプリ」にそれを書いているように：
「プログレッシブウェブアプリは、サービスワーカーを使用して、非常に高速なエクスペリエンスを提供します。 Service Workerを使用すると、開発者は、ブラウザがローカルキャッシュに保存するファイルと、ブラウザがキャッシュされたファイルの更新を確認する状況を明示的に定義できます。 ローカルキャッシュに保存されているファイルは、ネットワークから取得されたファイルよりもはるかに迅速にアクセスできます。」
Grigsbyはさらに次のように説明しています。
「誰かがプログレッシブウェブアプリから新しいページをリクエストすると、そのページをレンダリングするために必要なファイルのほとんどは、すでにローカルデバイスに保存されています。 これは、ブラウザがダウンロードする必要があるのはそのページに必要な増分情報だけであるため、ページをほぼ瞬時にロードできることを意味します。」
ネイティブアプリの従来の利点の1つは、非常に高速である可能性があることです。 同様の方法でこれを実現します。アプリの実行に必要なすべてのファイルは、インストール時にダウンロードされ、新しいデータを取得するだけで済みます。 サービスワーカーは、プログレッシブWebアプリが同様の印象的なパフォーマンスをWebにもたらすことを可能にします。
PWAは、Web上でアプリのようなUXを提供します
すでに説明した速度は、明らかにUXの大きな部分です。 ただし、他にも重要な要素があり、PWAもここで役立ちます。
ネイティブモバイルアプリは、長い間モバイルUXのゴールドスタンダードでした。 それらは（少なくともいくつかの点で）まだありますが、PWAは、ブラウザーから直接、その感触と機能の多くに一致するようになりました。
たとえば、PWAは次のことができます。
- オフラインまたはネットワーク状態の悪い場所で作業する（これについては次で詳しく説明します）
- ユーザーのデバイスにインストールされ、ネイティブアプリのようなホーム画面アイコンを介してアクセスされます
- デバイスのロック画面にプッシュ通知を送信します（残念ながらAndroidのみ）
- ネイティブアプリを模倣したナビゲーション構造で、フルスクリーンの「没入型」エクスペリエンスを提供するように開発されます
- ネイティブアプリのようにアニメーションを活用する
- カメラやGPSなどのデバイスのハードウェアにアクセスするために開発される
初期のモバイルウェブはかなり荒いものでした。 デスクトップブラウザの古いパラダイムは、実際には適合しなかったスマートフォンに「ボルトで固定」されていました。 レスポンシブデザインの時代はこれを大幅に改善しましたが、常に何かが欠けていました。
ネイティブアプリは、スマートフォン向けに明確に構築されています。 彼らは常にデバイスのエクスペリエンスにより良く適合しました。 PWAはこの境界線を曖昧にしていますが、経験の面での区別を特定するのは難しい場合があります。
たとえば、Instagram Lite、Google Maps Go、Twitter Liteを使用したことがありますか？
Google Playストアでダウンロードしてチェックアウトし、他のネイティブアプリとどのように感じられるかを確認できます。
これらがメインのネイティブアプリのより軽量でスリムなバージョンであると想定することは許されます。 ご想像のとおり、これらはプログレッシブWebアプリです。
これは、私たち全員が知っていて愛しているネイティブアプリエクスペリエンスを再現するためのPWAの可能性を示しています。 少し後で例に入ると、私たちが何を意味するのかが正確にわかります。
注：これらのPWAがGooglePlayストアで公開されていることに気付いたかもしれません。 Googleは2019年の初めにPlayストアをPWAにオープンしました！ これは、真のクロスプラットフォームアプリケーションとしてのPWAの将来について彼らがどれほど自信を持っているかを示しています。 PWAをそこに配置するには、いくつかのフープをジャンプする必要がありますが、それは確かに可能です。 現在のところ、これがiOS AppStoreで可能になるかどうかについてのAppleからの情報はありません。
PWAは信頼性が高い
私たちは皆、不安定なモバイル接続でWebサイトまたはWebアプリを使用しようとした経験があります。 面白くない。
ブラウザがローカルにキャッシュする内容を具体的に定義するサービスワーカーに再度感謝します。PWAは、ユーザーの接続性が低い場合でも、高速で完全なエクスペリエンスを提供するように構築できます。
これもさらに一歩進めることができます。 アプリケーション全体が最初のアクセス時にダウンロードおよび保存される「プリキャッシング」により、PWAは完全にオフラインで機能することもできます。
これは、農村部やサービスの行き届いていない地域にまだ住んでいる人の数と、今後数年間で初めてオンラインになる10億人ほどの人を考えると、非常に重要です。その多くは完璧な接続を享受できません。
PWAは安全で、効率的で、適応性があります
サービスワーカーが自分の仕事をするためには、WebサイトがHTTPSで完全に保護されている必要があります。
うまくいけば、すでに実行されていますが、PWAを構築しない場合は、サイトを100％安全にするために必要なすべての作業を実行する必要があります。
PWAも非常に効率的です。 ネイティブモバイルアプリのダウンロードを妨げる主な要因は、デバイスで利用可能なストレージ容量です。 PWAブックの著者が述べているように：
「彼らは、カメラ、コンピューター、メモ帳、アシスタントなどのモバイルデバイスを、そして最も重要なこととして、思い出の宝庫として扱っています。 アプリをダウンロードするということは、貴重な写真やメッセージを犠牲にしなければならないことを意味する場合、「はい」をクリックする前に3回考えます。」
PWAは、人々にそのような難しい決定を強いることはありません。 ネイティブアプリよりもはるかに軽量で、インストールプロセスの摩擦が少なくなります（ボタンを1回タップすると、ホーム画面にショートカットが作成されます）。 PWAはデバイス上で少しスペースを取りますが、比較すると無視できます。
この効率を推進するサービスワーカーは、サーバーの負荷を軽減し、パフォーマンスの低下や激しい期間中のクラッシュのリスクを最小限に抑える責任もあります。
プログレッシブウェブアプリも非常に適応性があります。 これらはWebに基づいているため、ネイティブモバイルアプリよりも簡単に保守、更新できます。
すばやく移動できるものを変更または更新する場合は、App Storeのゲートキーパーに対処したり、ユーザーに手動で更新したり、専門のネイティブアプリ開発者と契約したりする必要はありません。
今日のサイトの更新と同じくらい簡単です。更新（サーバーにデプロイされたもの）は、ユーザーがほぼ瞬時に利用できます。
PWAを使用すると、プッシュ通知でユーザーを引き付けることができます
私たちは何年もの間、プッシュ通知の力について話してきました。 これらは、モバイルで視聴者と関わり、コミュニケーションをとるための最良の方法です。 それらを使用して、ユーザーを更新したり、アプリに戻したり、オファーや製品を宣伝したり、忙しい生活の中で頭を悩ませたりすることができます。
さまざまな企業がプッシュ通知を使用する方法の例を次に示します。
- ニュース発行者
「ニュース速報、XとYがちょうど起こった！」
プッシュ通知はデジタルパブリッシャーに最適であり、トラフィックをトップストーリーに戻し、時間に敏感な速報でユーザーに警告することができます。
- eコマースストア
「特別オファー/カートを放棄した/アイテムが発送されました」
プッシュはeコマースでうまく機能します。 ショッピングアプリは定期的に通知を送信して、ユーザーにオファーや新製品を警告し、配信プロセスを最新の状態に保ち、特別なアプリ専用クーポンコードを配信します。
- ソーシャルプラットフォームとコミュニティ
「あなたの友達があなたにメッセージ/友達リクエスト/返信を送信しました」
私たちは皆、以前にソーシャルプラットフォームからのプッシュメッセージを経験したことがあるでしょう。 これらは、ソーシャルアプリがプラットフォームに戻り、他のユーザーと関わり、交流するために使用する秘密の要素です。
これらはいくつかのユースケースです。 しかし、実際にプッシュ通知は、あらゆるビジネスにとって大きな後押しとなる可能性があります。 それらは、ネイティブアプリを構築する最も強力な理由の1つでした（そして今でもそうです）。
フレンドサービスワーカーに改めて感謝します。プッシュ通知を送信するためにネイティブアプリはもう必要ありません。 あなたはあなたのウェブサイトからそれらを送ることができます（あなたがそれをPWAに変えるならば）。
プッシュ通知は適切に使用し、悪用しないようにする必要がありますが、多くの利点をもたらす可能性があり、PWAを構築することの大きな利点です。
たとえば、PWAを構築した後、ランコムは、プッシュ通知をタップした消費者の8％が購入を行い、プッシュ通知を介して回収されたカートのコンバージョン率を12％向上させたことを確認しました。
もう1つは、サウジアラビアの大手電子機器小売業者であるeXtraElectronicsです。 eXtraは、Webプッシュを介してアクセスするユーザーからの売上を100％増やし、プッシュ通知を選択したユーザーは4倍の頻度で戻ってきて、サイトで2倍の時間を費やしていることに気付きました。 チーフビジネスデベロップメントオフィサーのMujeedHazzaaは、次のように述べています。
「プッシュ通知は、モバイルエンゲージメント戦略の大きな部分を占めています。 これは、お客様とコミュニケーションをとるためのより個人的な方法です。 それは私たちの収益にとって非常に価値があります。」
あなたのサイトをプログレッシブウェブアプリに変えるとき、あなたはあなたのビジネスにも強力な結果を得ることができます。 大きな注意点が1つあります。Androidでのみ使用できます。 iOSはそれらをサポートしていません、そしてそれがサポートされるかどうかは誰にも分かりません。 プッシュ通知が重要であり、すべてのユーザーに送信する場合は、ネイティブモバイルアプリを作成する必要があります。
プログレッシブウェブアプリはあなたのビジネスを成長させます
私たちはあなたのサイトをプログレッシブウェブアプリに変えることの最も重要な利点のいくつかを経験しました。
肝心なのは、それらがウェブサイトを持つどんなビジネスにとっても完全に理にかなっているということです。 Web UX全体をアップグレードし、主要な指標の改善がほぼ保証されている、高速でモダンなエクスペリエンスを提供します。
PWAを構築することの欠点は何ですか？
構築するために投資する必要のある時間とお金を除いて、実際にはありません。 それでも、PWAは比較的手頃な価格であり、特にサイトが広告、eコマース、またはメンバーシップを通じてあらゆる種類の収益に結びついている場合は、時間の経過とともに（それ以上の）費用がかかる可能性が非常に高くなります。
まだ説得力が必要ですか？
いくつかの例ですべてを結び付けましょう。 インターネット上で最高のプログレッシブウェブアプリの例を50個紹介し、これまで議論してきたことを直接お見せします。
プログレッシブウェブアプリの例：2020年のインターネット上の50のベストPWA
印象的なPWAを開発したい場合、最初のステップは、成功したプログレッシブWebアプリの例を調べてインスピレーションを得ることです。
インスピレーションを与えるという私たちの使命の一環として、現在、最高のPWAのモデル例を50個集めました。 自分のビジネスに最も関連性のあるセクションにジャンプしたり、何かが気になるまでリストをざっと読んだり、プログレッシブWebアプリのすべての例を読んで概要を把握したりできます。
PWAのベスト50の例を見てみましょう。
eコマースと小売
スターバックス
世界で最も人気のあるコーヒーチェーンの1つとして、スターバックスはロイヤルティプログラムとより簡単な注文プロセスを特徴とすることで顧客エンゲージメントを高めるためにPWAを開発しました。
このアプリは、デバイスに関係なくエンゲージメントを維持するために、古いモバイルアプリを置き換えるように設計されました。
ユーザーはまず、スマートフォンから注文するときに、無料の食べ物や飲み物、誕生日の御馳走、詰め替え、支払いオプションを利用できる[特典]セクションを表示できます。
アプリページの残りの部分には、カスタムオーダー、店舗の空き状況、配信の詳細、アプリメニューが表示されます。
バリスタに注文するのと同じように、お気に入りの飲み物を注文すると、サイズ、アドイン、ショットのオプションをカスタマイズできます。 スターバックスはまた、食事を監視する人のために、栄養情報、成分、アレルゲンのセクションを追加しています。
このeコマースPWAの好きなところ：
- 弱いネットワーク接続でもうまく機能します
- Spotify、Lyft、Fordなどの他のブランドの他のプラットフォームやサービスと完全に統合されています
- シームレスなモバイル決済とチェックアウトプロセス
- 非常にユーザーフレンドリーなデザイン
ジュミア
アリババは中国にとって、ジュミアはアフリカにとってです。 この成功したオンラインマーケットプレイスは、2012年にナイジェリアで最初に立ち上げられ、それ以来、アフリカのeコマース業界を迅速に引き継ぎました。
2016年には、サハラ以南の地域における不安定なインターネット接続への回答としてPWAを開始しました。 PWAを使用すると、データキャップを備えた2Gネットワークに依存する市場のかなりの部分を追い詰めることができました。
PWAの導入は、大きなデータ帯域幅を消費することなくアプリのようなユーザーエクスペリエンスを提供するための完璧なソリューションでした。
結果？ Googleによると、同社はコンバージョン率を33％向上させ、ユーザーを12倍に増やしました（ネイティブアプリと比較して）。 さらに、バウンス率とユーザーデバイスのストレージ要件が大幅に削減されました。
このeコマースPWAの好きなところ：
- 信頼性の高いオフラインアクセス
- 高速検索機能
- 高速読み込みプロセス
- 簡単インストール
OLX.in
オンラインマーケットプレイスのPWAに関しては、インドの求人広告会社OLX.inを信頼してください。 プロパティからファッションに至るまでの堅牢なカテゴリにより、売り手と買い手は会社のPWAとよりよく一致します。
ユーザーは、特定の商品を検索したり、販売者からお得な情報を獲得したりするときに、アプリの使いやすさに簡単に気付くことができます。
OLXは、Googleの報告によると、PWAに移行して以来、広告のクリック率が高く、バウンス率が80％も大幅に低下していることを明らかにしました。
このeコマースPWAの好きなところ：
- オフラインモードでもプッシュ通知
- 売り手のために構築された簡単なカメラ統合機能
- 検索履歴機能
フリップカート
インドのeコマースシーンにおけるもう1つの競争相手は、フリップカートがPWAでオンラインショッピング体験を再定義し続けていることです。
ユーザーがアプリを下にスクロールすると、商品カテゴリ、限定オファー、ベストセラー、割引が表示され、アプリを閲覧してより多くの時間を費やすように顧客を引き付けることを目的としています。
FlipkartのPWAは、FlipkartLiteを通じて2015年に始まりました。 同社は、ほとんどの地域でインターネット接続が断続的であったとしても、インド人の間で買い物をより利用しやすくしたいと考えていました。
このeコマースPWAの好きなところ：
- 最新のニュースとアップデートのプッシュ通知は一貫しています
- オンライン購入プロセスが合理化されます
- 検索機能は正確です
純粋な式
健康補助食品の市場がかつてないほど競争が激しくなっていることを認識し、米国を拠点とするPure Formulasは、独自のPWAの立ち上げに関して、この業界のパイオニアと見なされています。
同社のウェブサイトとモバイルアプリは、チェックアウトプロセスが遅いために非常に高いバウンス率に苦しんでいることを発見した後、同社は完全なターンアラウンドを提供するPWAを開発しました。
コンバージョン率が高く、平均注文額（AOV）が増加していることが報告されています。
このeコマースPWAの好きなところ：
- 非常に便利なチェックアウトプロセス
- ミニマリストデザイン
- 非常に軽いデバイスストレージ要件
- 安全性の高いトランザクション
AliExpress
応答性の高いPWAを備えたAliExpressは、B2Cトランザクションで今日最も需要の高いアプリの1つと見なされています。
同社の幅広い製品カテゴリのおかげで、ユーザーはPWAを使用してページの読み込みを遅くすることなく、何千ものオプションを閲覧できます。
発売以来、AliExpressは、PWAのおかげで、より良い再エンゲージメントとコンバージョン統計を経験したことを発表しました。
このeコマースPWAの好きなところ：
- 簡単な製品ナビゲーション
- より速い読み込み時間
- ユーザーフレンドリーなレイアウト
アリババ
JackMaのAlibabaGroupは、Alibaba PWAの成功に関して、これ以上の紹介は必要ありません。 B2B eコマースアプリは、あらゆるPWAにとって理想的なモデルです。高速で、応答性が高く、軽量で、非常に魅力的です。
アリババは、モバイルWebとモバイルアプリの立ち上げで成功しました。 ただし、エンゲージメントを改善することで、市場の大部分を追い詰める必要がありました。 そして、同社のPWAはそれに対する完璧なソリューションでした。
グーグルによると、それは総コンバージョンの76％の増加を報告しました。
このeコマースPWAの好きなところ：
- 簡単な製品ナビゲーション
- Feeds、Messenger、MyAlibabaアカウントなどのWebサイトのツールとの統合
- より速い読み込み時間
目標
競合他社に負けないように、アメリカで8番目に大きい小売チェーンであるTargetは、顧客分析の調査に迅速に対応しました。 2015年に、顧客がモバイルデバイスで旅を始め、次にコンピューターを使用して購入することを発見しました。
経営陣はPWAの導入を考え、それ以来、アプリのユーザー数が大幅に増加し、さまざまなデバイスのユーザーを遠ざけることなくオンライントランザクションが大幅に改善されました。
このeコマースPWAの好きなところ：
- 簡単なカートへの追加オプション
- サイズに関係なく高速読み込み画像
ウォルマート
シームレスなアプリ体験のために、ウォルマートのPWAは、アプリ開発者の長いチェックリストに当てはまります。 何千もの製品を提供するこの小売大手は、トランザクションごとにオンライン購入と集配の選択肢を統合することができます。
その地理追跡機能は、ユーザーのエリアで最も売れているアイテムを監視します。これにより、アプリはそのようなリストに基づいて推奨事項を提供できます。
最後に、プッシュ通知を効果的に使用することで、同社は忠実なファン層に素晴らしい取引や新しい発見を知ってもらうことができます。
このeコマースPWAの好きなところ：
- フィードバックセクション
- ジオトラッキング機能
- 非常に応答性の高いインターフェース
- 不安定なネットワークでのシームレスなパフォーマンス
メイシーズ
ハイエンドの小売ブランドであるメイシーズは、PWAを立ち上げたときに、毎月数百万人の訪問者に最高の体験を提供するという目標を念頭に置いていました。
アプリユーザーの成長を認識し、同社のPWAは、買い物客が店頭の最新情報に注目し続けるための消費者向けツールへの歓迎すべき追加でした。
このeコマースPWAの好きなところ：
- 信頼できる店舗検索ツール
- 整理された製品レイアウト
ランコム
フランスの高級化粧品ブランドであるランコムは、オンライン販売で障害に直面しました。モバイルユーザーは増加しましたが、コンバージョンは減少していました。
この問題を理解するために、同社は顧客の行動を調査し、モバイルアプリでのユーザーエクスペリエンスがひどいことを発見しました。
ブランドは、読み込み時間を短縮し、アプリのアクセス性を高めるためにPWAに切り替えました。 Googleによると、プッシュ通知はコンバージョンに12％貢献し、モバイルセッションは51％に急上昇しました。
このeコマースPWAの好きなところ：
- 高速検索結果
- 簡単なナビゲーション
ニュース
フィナンシャルタイムズ
The Financial Times PWA is considered as one of the best PWAs in the news industry. Covering business and global markets, the app takes a similar look and feel of the paper with its traditional salmon-colored background.
The publication is one of the first news sites to abandon its native app and transition to a PWA. It works well even on slow networks, making news easily accessible for business people on the go.
What we like about this News Publisher PWA:
- Reliable offline
- Very fast loading time
- Real-time updates on content
- Seamless video content experience
Infobae
This Buenos Aires-based news website has proven to be successful in the PWA scene thanks to its Spanish readers. According to Google, the Latin American audience contributed to three times more page views compared to its old mobile site, and spent more sessions on the app as well.
Infobae switched from its mobile site to PWA in 2017 to improve the speed of access among its mobile users. This was influenced by the huge drop in session duration (3 minutes on mobile compared to 27 minutes on desktop).
What we like about this news publisher PWA:
- Very fast loading time
- High-quality visuals loading seamlessly
- 簡単なナビゲーション
Nau.ch
One of Switzerland's leading news websites became extremely popular when it began flashing content in public areas such as terminals and petrol stations.
Nau (an abbreviation for “new”) was founded in 2007 with the goal of prominently displaying news in public transport to reach millions of commuters on their daily route.
To improve its reach, the company launched its PWA and has achieved 400 times more installations than its old mobile site in the first two days.
What we like about this news publisher PWA:
- Impressive user interface
- 簡単なナビゲーション
- Content loads much faster relative to other news-related PWAs
Nikkei
Regarded as the world's largest financial newspaper (more than 3 million in daily circulation), Nikkei launched its PWA in 2017 with the goal of reducing load time, improve reader interaction and boost engagement.
Realizing that their website was not mobile-friendly (even taking more than 20 seconds to be fully interactive), the company assembled a team of five front-end engineers who worked on launching a PWA.
The result was truly impressive: improved loading speed, higher interactivity as well as better user experience with offline support according to Google.
What we like about this news publisher PWA:
- Prefetch feature (instant page navigation)
- Preloaded key requests
- 最適化されたJavaScriptバンドル
- Optimized images
- Enabled HTTP caching
The Washington Post
As a global authoritative news organization, The Washington Post has released one of the most responsive PWAs to reach out to a wider audience on mobile.
Launched in March 2016, the paper's goal is to provide “frictionless, uninterrupted reading.” This comes after its readers expressed their concerns over slow load times on its old mobile app.
With more than 1,000 articles published daily, they have announced that an 88% improvement in load times was initially observed. This has contributed to an increase in retention rate and longer readership according to Google.
What we like about this news publisher PWA:
- Fast loading time
- Real-time live updates
- Same look and feel as the website
中くらい
With social journalism becoming a necessity for readers and publishers alike, Medium has made a mark in the online publishing industry with its 120 million readers.
Medium's initial goal in 2012 was to reinvent the blogging platform through small stories that matter to any type of audience.
Now that it has grown into subscription-based service, its loyal users can follow exclusive content and audio narrations through its PWA even when working offline.
What we like about this news publisher PWA:
- レスポンシブ
- Seamless functionality even on an unstable connection
Wired
When tech publisher Wired launched its PWA in 2017, its main objective was to increase its app's page speed and reach out to its 11 million users.
And true enough, it did. Not only did it result in higher readership but also more impressions per session, leading other Conde Nast publications to follow suit through what its chief of technology refers to as Alien Web Apps (AWA).
What we like about this news publisher PWA:
- Fast loading time
- 応答性が高い
- Reliable background caching
Forbes
With almost a 50% lift in sessions, triple the rise in scroll depth and 100% boost in engagements according to Google, Forbes has definitely reaped the benefits of launching its fully functional PWA in 2017.
Its Chief Product Officer, Lewis Dvorkin, wanted a no-friction experience for its users to have content served to their devices the way they want.
In addition, Dvorkin states that the more people stay longer on their app, the more they view ads, thanks to increased personalization that yields better engagement.
What we like about this news publisher PWA:
- Stunning visual content
- Fast loading times
- Unique number of readers infographic
The Guardian
To make its online content more accessible, UK's leading news and media outlet, The Guardian, launched its PWA in 2017.
The app features high-quality images, interactive multimedia, and thousands of new content without compromising loading time and user experience.
The company also created a US-based innovation team called The Guardian Mobile Innovation Lab, which operated from 2015 to 2018, which explored mobile tools and chat apps to improve user experience.
What we like about this news publisher PWA:
- カスタマイズ可能なセクション
- News alert feature
- オフラインアクセス
Sports Mole
Sports fans – football, F1, tennis, rugby, cricket, golf and even snooker – are able to enjoy Sports Mole's website features right in their own devices through the site's PWA.
Video clips, real-time scores and game schedules are just some of the exciting features in the PWA.
The result of this move led to higher readership rate and increased session time on the app.
What we like about this news publisher PWA:
- 検索機能
- Seamless video playback
- リアルタイムの更新
- No lag on page transitions
The Weather Channel
Since the 1980s, The Weather Channel has been a trusted companion by travelers and households when it comes to providing an average of 40 billion daily weather forecasts.
While its previous native app was used by half of its total users through mobile web, the company found out that there are still users who don't enjoy reliable connections or are not equipped with advanced smartphones.
Through its PWA, The Weather Channel is able to cater to millions of its global users in 62 languages. Google reports that it has improved its page load time by 80% through the app.
What we like about this news publisher PWA:
- 検索機能
- Multiple language availability
- プッシュ通知
MyNet
Offering a wide range of content from news to sports, travel to education, and weather to finance, MyNet is one of Turkey's largest web portals.
Its old mobile site was plagued with complaints, most especially very slow loading speed. This led the company to develop a PWA to deliver fast and a highly engaging website.
Google reports that introducing PWA to MyNet's readers influenced a 15% rise in average views per session and a 23% drop in bounce rate.
What we like about this news publisher PWA:
- リアルタイムの更新
- 検索機能
ディレクトリ
コパ
以前はPadPiperとして知られていたコパは、家具付きのアパートや賃貸人のためのマーケットプレイスです。 賃貸人と賃貸ホストの両方に検証を提供するため、それらを一致させることがより安全になります。
PadPiperは当初、学生が学年度中またはインターンシップを開始した後に適切な住宅を見つけるのを支援するためにPWAを立ち上げました。 また、学生同士をつなぎ、ルームメイトとの対戦を容易にするために、近くで働いている人を見つける機会を利用することも考えました。
このディレクトリPWAの好きなところ：
- 高速検索結果
- レンタルホスティング機能
- ミニマリストデザイン
レンティオ
このカメラと家電のレンタルマーケットプレイスは、一時的にそのようなアイテムを必要とする人々へのソリューションです。
ユーザーはオンラインで注文し、商品が同じ日に発送されるのを待ちます。 レンタル期間が終了すると、ユーザーはアイテムを返品するか、購入することを選択する必要があります。
RentioのPWA（日本語または英語）は、ナビゲートしやすいインターフェース、高速な検索結果、豊富なカテゴリー、および高速な応答時間を提供します。
このディレクトリPWAの好きなところ：
- 検索機能
- 高速トランザクションプロセス
- 便利なナビゲーション
ジョッピー
Joppyは、開発者採用プラットフォームとして、才能を求めている企業や、技術系の求人に最適な応募者の一部に対応しています。
このプラットフォームは、応募者の好みを採用担当者が設定した要件と一致させることに重点を置いています。 ただし、他のオンラインジョブボードとは異なり、求職者はプロファイルを匿名に設定できるため、一方的な提案に煩わされることはありません。
JoppyのPWAは、応募プロセスをより合理化するために、採用担当者と応募者（主にバルセロナにいる）の両方のために明確に設計されています。
このディレクトリPWAの好きなところ：
- 速い応答時間
- 高速マッチングプロセス
OpenRent
英国の賃貸物件市場を検索することは、適切なオンラインツールがなければ頭痛の種になる可能性があります。 OpenRentのPWAを使用すると、テナントと家主は、利用可能な物件に関して適切な物件を簡単に検索できます。
PWAは、高速応答とリアルタイムの更新を提供します。 OpenRentは、潜在的な賃借人を苛立たせるゴースト広告を回避するように許可されるとすぐにリストを削除するため、これはサイトにとって非常に重要です。
このディレクトリPWAの好きなところ：
- 結果フィルター機能
- プロパティの簡単な追加
- 速い応答時間
車販売
PWAのオンライン自動車市場であるCarsalesは、オーストラリアで自動車購入者に最も人気のある目的地の1つであり、ユーザーに多くの利便性を提供します。
購入者は、ボディタイプ、ブランド、価格、特別オファーに基づいて車を検索できます。 一方、売り手は自分の車の評価を求めることができ、Carsalesが残りの面倒をみます。
PWAはまた、自動車の世話に関するレビュー、推奨事項、アドバイスを通じて専門家のヒントを提供します。
このディレクトリPWAの好きなところ：
- 素晴らしいモバイルファースト体験
- あらゆる画面サイズに対応
- 簡単なオフライン体験
カリガミ
Carigamiは、サプライヤーと賃借人をつなぐフランスの自動車小売ブローカーです。 PWAは、都市、ドライバーの年齢、日付、時刻に関するユーザーの検索設定に応じて、信頼性の高い車の価格比較を提供します。
アプリは、各レンタカーのすべての詳細を含む検索結果を数秒以内に返します。
このディレクトリPWAの好きなところ：
- 読み込み時間が速い
- 正確な検索結果
- 検索フィルター
輝く
シャインは、2008年に設立されたインドで2番目に上位の求人ポータルです。さまざまな業界の15,000を超える企業の候補者と一致します。
そのPWAは、ジョブマッチングサイトに最適なサイトの1つです。 たとえば、特定の仕事の検索は、スキル、指定、部門、業界、場所、および教育に応じて簡単にフィルタリングできます。
ジョブアラートは、ユーザーのデバイスにもシームレスに配信されます。
このディレクトリPWAの好きなところ：
- プッシュ通知
- 完全にアクセス可能
- カスタムオフラインページ
社会的またはコミュニティ
火口
Tinderがデートシーンの市場を混乱させたとき、多くのユーザーはマッチメイキングへの革新的なアプローチのためにアプリを愛するようになりました。
2017年、同社は3か月の開発期間を経て、独自のPWAに投資しました。 メリットはすぐに観察されました。 まず、データ投資をネイティブアプリの30MBからPWAのわずか2.8MBに減らすことができました。
また、ページの読み込みが速くなり、ユーザーによるエンゲージメントが向上したことも報告されています（スワイプ、メッセージング、購入、および支出セッションの観点から）。
このソーシャルPWAの好きなところ：
- プッシュ通知
- 使いやすさ
- 最適化されたパフォーマンス（ルートベースのコード分割）
人気のある画像共有およびソーシャルメディアプラットフォームであるPinterestは、3か月間、国際的なユーザーベースを拡大するためにPWAを構築しました。 Googleによると、650 KBの古いモバイルサイトと比較すると、PWAの150KBのサイズはユーザーを感動させるのに十分でした。
Pinterestのサブスクライバーは、以前のモバイルアプリの以前の23秒と比較して、UIが使用可能になるまでわずか5.6秒待つこともできます。
PWAへの移行の初期の結果は有望でした。アプリに費やす時間が40％以上増加し、ユーザー生成広告が44％増加し、広告のクリックスルーが50％増加し、コアエンゲージメントが60％向上しました。
このソーシャルPWAの好きなところ：
- プッシュ通知
- 低帯域幅の使用
- 印象的なオフラインサポート
電報
Telegramは、さまざまなデバイスと互換性のあるクラウドベースのツールを提供することにより、2013年にインスタントメッセージングサービスを中断させました。
この記事の執筆時点で、月間4億人以上のアクティブユーザーが、このクロスプラットフォームの安全なサービスを利用して、テキストメッセージ、写真、ビデオ、オーディオファイルを交換しています。
ネイティブモバイルアプリと同じ機能を提供するためにPWAがリリースされたとき（ただしサイズは軽い）、同社はユーザーあたりのセッション数と保持時間の50％の増加を報告しました。
このソーシャルPWAの好きなところ：
- iOSおよびAndroidにインストール可能
- オフラインサポート
- マニフェスト
ツイッター
立ち上げられた最も初期のPWAの1つは、2017年にTwitter Lite PWAを使用したTwitterからのものです。アプリ開発者は、後にWebとネイティブアプリの機能をモバイル向けのより理想的なアプリに統合するためのモデルとして使用しました。
Googleによると、PWAの目標は、毎日平均4回アカウントをチェックする25万人の毎日のユーザーの再エンゲージメントを改善することでした。
データ消費量を削減し、インスタントロード（3Gネットワークで5秒）を改善し、ユーザーエンゲージメントを改善することで、同社はセッションあたりのページビューが65％増加し、送信ツイートが75％増加し、バウンス率が20％急落したと報告しました。 。
このソーシャルPWAの好きなところ：
- ブラウザに最適化（ルートベースのコード分割）
- 帯域幅の使用量が少ない
- 高速更新
インスタグラム
Instagramは、TwitterのアプリがリリースされるとすぐにPWAを提供するというTwitterの戦略に従いました。 2020年の初めに、InstagramはWindows 10アプリを更新して、ダイレクトメッセージングを備えたPWAにしました。
ネイティブアプリはまだ販売されていますが、デバイスのモバイルブラウザー上のサイトは、同じ機能とユーザーエクスペリエンスを提供します。 ユーザーは、デスクトップおよびモバイルアプリから長い間楽しんできたのと同じ機能を利用できます。
このソーシャルPWAの好きなところ：
- プッシュ通知
- インスタントロード時間
- 早い反応
旅行と予約
Airbnb
Airbnbは、世界中の賃貸や観光体験に便利な手配を提供するオンラインプラットフォームです。 2008年、同社は、追加の部屋を借りようとしている住宅所有者と、手頃な価格の宿泊施設を探している旅行者を結び付け始めました。
10年後、PWAは、Windows 10MobileのEdgeで正常に動作するようにアップグレードされました。 その結果、顧客にとってよりシームレスなインスタントページ遷移が実現します。 現在までに、Airbnbには毎月8000万人以上の訪問者がおり、その大部分はアプリを利用しています。
このPWAの好きなところ：
- プッシュ通知
- 早い反応
- 数秒で読み込まれる高品質の画像
Treebo
オンライン予約業界のもう1つのリーダーは、ホテル予約プラットフォームであるTreeboです。 インドの165以上の都市で宿泊施設の選択肢を提供し、ユーザーは最良の取引のために選択肢を比較することができます。
Googleによると、そのPWAは3Gネットワークを介してわずか4秒で読み込まれます。 このサイトはまた、クリックスルーが5倍になり、コンバージョン率が3倍になったと報告しています。
このPWAの好きなところ：
- サーバー側のレンダリング
- 対話までの時間の短縮
- プログレッシブレンダリング（HTMLストリーミング）
私たちは行く
アジア太平洋および中東地域で最大の旅行関連サイトと呼ばれるWegoは、PWAを設計する際に、消費者の行動を念頭に置いています。
ほとんどの旅行者は写真を保存するために携帯電話に依存しているため、ストレージスペースが簡単に不足する可能性があります。 さらに、さまざまな場所への旅行は、低速で不安定なインターネット接続でイライラする可能性があります。
ユーザーがホテルの部屋やフライトを予約できるようにするために、PWAが構築されました。 Googleによると、Wegoは、ページの読み込み時間を12秒から3秒弱に短縮したと発表しました。
このPWAの好きなところ：
- 非常に速い応答
- ミニマリストデザイン
- 正確な検索結果
- 軽量
MakeMyTrip
インドを代表するオンライン旅行代理店の1つであるMakeMyTripは、月間800万人の訪問者に対応するために、PWAの時流に参加しました。
ネイティブアプリで成功を収めた後、同社は、劣ったスマートフォンのデータキャップで国内の接続が制限されていると、ユーザーアクセスが非常に苛立たしいものになる可能性があることを発見しました。
さらに、訪問者がネイティブアプリよりもWebサイトに多くの時間を費やしていることに気づきました。 したがって、同じエクスペリエンスを複製することは、携帯電話ユーザーにとって非常に重要です。
その結果、Googleによると、顧客セッションが160％増加し、バウンス率が20％急落しました。 さらに、初めての買い物客は、以前にネイティブアプリを使用した買い物客の3倍のコンバージョンを達成する可能性がありました。
このPWAの好きなところ：
- 簡単なナビゲーション
- 任意のOSにインストール可能
- 読み込み時間が速い
トラベルスタート
Jumiaは、オンラインマーケットプレイスの成功を利用して、JumiaTravelで旅行業界に参入しました。 Googleによると、そのPWAは、トラフィックを12倍に増やし、コンバージョン率を33％増やすのに役立ちました。
その後、Jumia Travelは2019年にTravelstartに買収され、旅行業界で最大のプラットフォームの1つを作成しました。 Jumia Travelのモバイルユーザーは、フライト、ホテルの宿泊施設、レンタカーを予約できるPWAでもTravelstartにリダイレクトされます。
このPWAの好きなところ：
- 読み込み時間が速い
- シンプルなインターフェース
トリバゴ
ドイツのテクノロジー企業Trivagoは、月に1億2,000万人の訪問者に対応するために、PWAを立ち上げ、旅行に行く前に、より多くのユーザーがホテルの価格を検索して比較できるようにしました。
ほぼ200の予約サイトをカバーするこのアプリは、価格比較を生成するという点で高速に動作します。 ユーザーは、Trivagoマップ、実際のホテルのレビューを便利に使用し、以前の検索を参照して時間と帯域幅を節約することもできます。
PWAは、55か国から50万人以上のユーザーによってホーム画面に追加され、Googleのレポートに基づくと、エンゲージメントが150％、ホテル取引へのクリックアウトが97％増加しました。
このPWAの好きなところ：
- AndroidとiOSにインストール可能
- 優れたオフラインサポート
- 早い反応
- 検索フィルター
- 多言語サポート
Uber
UberのPWAは、今日最もユニークに設計されたアプリの1つです。 配車サービス会社は、2019年7月に最初に発売されたPWAを支持して、2018年にWindow10アプリを舞台裏に配置しました。
ネイティブモバイルアプリと比較して、UberのPWAは50KBのストレージスペースしか使用しません。 読み込みが非常に速いため、ネットワークが弱い地域で立ち往生している場合に非常に便利です。
Uberは、場所に応じて、配車サービス、食品配達、自転車とスクーターのレンタル、モバイルデバイスをタップするだけでの空中配車の共有を提供しています。
このPWAの好きなところ：
- 読み込み時間が速い
- オフラインサポート
- 軽量
- 非常に速い予約プロセス
Lyft
2012年に設立されたUberのライバルであるLyftは、米国とカナダでライダーとドライバーの基盤を拡大しました。
（頻繁な乗客のためのサブスクリプションプランの観点から）より安い料金を提供することで、同社はかつてUberによって支配されていた巨大な市場シェアを獲得しました。 2016年にPWAを導入しました
新規ユーザーの場合、PWAは、ネイティブアプリで知られている予約サービスだけでなく、簡単な登録プロセスも提供します。
このPWAの好きなところ：
- 速い応答時間
- 信頼性の高いリアルタイムの更新
タジャワル
アラブ首長国連邦で非常に人気のあるフライトおよびホテル予約アプリであるTajawalは、450を超える航空会社と数千のホテルに旅行者がアクセスするための完全なソリューションを提供します。
PWAは非常に高速に動作し、簡素化されたプロセスを通じて簡単な予約ソリューションを提供します。 インターフェースは単純で、主に予約に焦点を当てています。
このPWAの好きなところ：
- 非常に高速なページ読み込み
- 安全なトランザクション
FlyWeekend
このユニークな旅行予約会社は、2017年にアムステルダムで設立されました。 目標は、週末のみの旅行日程をユーザーに提供して、ユーザーが飛行機に飛び乗って、システムの推奨に基づいて2日間のリトリートを体験できるようにすることです。
FlyWeekedユーザーは、現在の場所を入力し、休憩したい週末を選択するだけです。 次に、システムは、ユーザーが興味がない場合に「スワイプして離れる」か、代わりに旅行を予約するかを選択できるクリック可能な都市のリストを提供します。
PWAは使いやすく、独自のコンセプトにより、より高いエンゲージメントを保証します。
このPWAの好きなところ：
- 速い応答時間
- ページの高速読み込み
クールないとこ
あなたの興味を共有する地元の人があなたの旅行中にあなたを案内することができるとき、外国を訪問することはよりエキサイティングになることができます。 Cool Cousinを使用すると、訪問者は使いやすいプラットフォームで信頼できる地元のシティガイドを選択できます。
いわゆる「いとこ」は外科医からミュージシャンまでさまざまですが、地元の観光客をホストするという同じ情熱を共有しています。
そのPWAは、ユーザー間でより高速でスムーズなアクセスエクスペリエンスを提供するために2018年に開始されました。 同社は公式アップデートで、アプリの読み込み時間が25％短縮され、ユーザーによる他のオンラインソースへのアクセスが減少したことを発表しました。
このPWAの好きなところ：
- 速い応答時間
- 簡単なナビゲーション
エンターテイメント
サウンドスライス
ギター、ピアノ、サックス、バンジョーの演奏方法を学ぶのが、楽譜と実際のオーディオを同期するアプリであるSoundsliceで簡単になりました。
SoundsliceのPWAは、モバイルデバイスを使用したセルフティーチングセッションに最適です。 これにより、ユーザーはピッチを変更したり、セクションをループしたり、音楽に注釈を付けたりすることができます。 一方、音楽教師はツールを使用してインタラクティブなセッションを開発できます。
サンプルの「スライス」を使用すると、ユーザーは楽譜上で移動する垂直線ガイドを伴ってオーディオを再生できます。
このPWAの好きなところ：
- インタラクティブデザイン
- 読み込み時間が速い
Spotify
デジタル音楽ストリーミングサービスSpotifyの場合、PWAを介して軽量アプリを利用することは、より多くの加入者を追求するために必須です。
SpotifyのデスクトップとモバイルアプリはPWAに複製され、オフラインで聴いているときでもリスナーに同じ便利さを提供します。 PWAの読み込みがはるかに速くなり、背景色がアルバムのジャンルに適応して、よりパーソナライズされたタッチになります。
このPWAの好きなところ：
- アダプティブUI
- オフラインサポート
- インタラクティブデザイン
1チューナー
一般に信じられていることに反して、ラジオは死んでいない。 1Tunerを使用すると、すべてのユーザーがラジオ局（単語のどこでも）やポッドキャストを聞くことができます。
プレイリストを作成することもできるので、ブラジルからの放送やロンドンの地元の放送局で再生されるトップトラックを見逃すことはありません。
PWAも完璧に機能します。 特定のラジオ局を選択すると、リアルタイムで放送を聞くことができます。 一方、ポッドキャストは優れたオーディオ品質で配信されます。
このPWAの好きなところ：
- カスタマイズ可能なテーマ
- 膨大な数のコンテンツの推奨事項
9GAG
9GAGの発売以来、オンラインのユーモアはこれまでと同じではありませんでした。 世界中のユーザーが共有するインターネットミーム、ビデオ、画像により、このサイトは娯楽の源となっています。
ただし、特にトレンドコンテンツに多くの動画が含まれている場合は、古いネイティブアプリの読み込みに時間がかかることにすぐに気付きました。
9GAGはPWAに切り替えて、ページの読み込み速度を下げ、ユーザーエンゲージメントを向上させました。 このサイトは、ユーザーがネイティブアプリと比較して25％長くアプリにとどまっていることを明らかにしました。
このPWAの好きなところ：
- AndroidとiOSにインストール可能
- オフラインサポート
- 読み込み時間が速い
Lotto.de
このPWAの最新のユーロロトの結果に関する照合されたリアルタイム情報は、プレイヤーからの便利なリソースを提供します。
PWAは非常に高速にロードされ、ローエンドのデバイスや貧弱なインターネット接続でうまく機能します。 最新の結果を知るのが待ちきれないロトプレイヤーにとって、このPWAは便利なコンパニオンです。
このPWAの好きなところ：
- スムーズなユーザーエクスペリエンス
- ドイツ語と英語での可用性
PWAのベスト50の例のまとめ
うまくいけば、これらのプログレッシブWebアプリの例は、このガイドで私たちが行ってきた主要なポイントのいくつかを強調しています。
これらのブランドはモバイルUXに投資し、そのメリットを享受しました。 あなたは彼らの足跡をたどり、あなた自身のビジネスのための印象的なプログレッシブウェブアプリで「モバイルファースト」に行くことができ、そしてそうすべきです。 その方法を説明しますが、最初に重要な質問に答えます–「ネイティブアプリはどうですか？」
たぶん、あなたは自分でiOSとAndroidのアプリを構築するというアイデアをいじっていて、代わりにPWAを検討することになりました。 おそらく、あなたはApp Storeでの立ち上げにそれほど夢中になっておらず、もっと良いWebサイトが欲しいだけなのかもしれません。
いずれにせよ、「ネイティブvs PWA」の議論について簡単に説明し、PWAが最小であり、PWA +ネイティブアプリが最適であると考える理由を説明します。
どのような種類のアプリを作成する必要がありますか？ プログレッシブウェブアプリとネイティブアプリ
プログレッシブウェブアプリとネイティブアプリはライバルであるという考えがあります。 そのPWAは、ネイティブアプリを無関係で不要なものにします。 その企業は、PWAとネイティブアプリのどちらを構築するかを選択し、常に後者を選択します。
この説明は誤った方向に進んでおり、ネイティブアプリとPWAのどちらかまたは両方の選択肢として提示されていますが、これは誤った二分法です。 真実は、PWAとネイティブアプリは素晴らしい組み合わせであり、相乗的に連携するということです。 それらはお互いの基盤をカバーし、チャネルに関係なくすべての人に最適なユーザーエクスペリエンスを提供していることを保証します。
PWAは、Webの到達範囲、発見可能性、および遍在性から恩恵を受けます。 彼らは有機的なトラフィックを引き込み、初めての訪問者に速くて洗練された体験を印象付け、あなたのサイトにより多くの時間（そしてお金）を費やすように彼らを説得します。 摩擦やゲートキーパーを減らす簡単な設置オプションを提供し、限られたデバイスの保管スペースを心配している人にもアピールできます。
これらは、新しい訪問者や、何らかの理由でネイティブアプリをダウンロードするのに十分ではないが、戻ってくるのに十分に従事している訪問者とのつながりを構築するための完璧な手段を提供します。 PWAは、目標到達プロセスを通じて人々を育成するための完璧な手段です。
一方、ネイティブアプリは、PWAに比べてリーチと可視性が低くなります。 それらはAppStoreの「壁に囲まれた庭」の背後にあり、それらをインストールしてダウンロードするには、ユーザーからのより高いレベルのコミットメントが必要です。 一方、それらは既存のユーザーの習慣とより調和しており、iOSユーザーにプッシュ通知を送信できるようにし、AppStoreでブランドを高める可視性/プレゼンスを得ることができます。
ネイティブアプリは、コアリーダー/顧客/ユーザーに最適です。 最も忠実な基盤は、ネイティブアプリをダウンロードして、ログイン画面やペイウォールの背後でさえもそれらにアクセスすることを奨励する必要があります。そうすれば、アプリを1か所に集めて、理解と関与に集中し、LTVと保持を可能な限り最大化できます。
ネイティブアプリは、最大のファンにとって素晴らしい「家」です。
グーグルはそれをこのように言います：
「PWAはネイティブアプリを置き換える必要はありません。 彼らは彼らと協力して働くことができます。 たとえば、小売業者はネイティブアプリを使用して、アプリをインストールする可能性が高い忠実なユーザーを引き付けることができますが、PWAを使用して新しいユーザーに簡単にリーチできます。 PWAを操作するユーザーは、将来的にモバイルアプリをダウンロードするように求められます。」
私たちの推奨事項–両方を構築してください！
予算が限られている場合は、PWAを利用してください。 ネイティブアプリはあるがPWAがない場合は、できるだけ早く作成する必要があります。 最適なモバイルファーストUXの構築に全力で取り組み、それを達成するために投資できる場合は、両方を構築し、互いの長所と短所を補完するようにします。
MobiLoudを使用すると、優れたネイティブアプリを入手できます。必要なのは、WebサイトまたはWebアプリだけです。 詳細については、私たちのチームにお問い合わせください！
プログレッシブWebアプリを構築する方法
このガイドの目的は、PWAの完全な高レベルの概要を提供することです。 それらの開発の複雑さは私たちが入り込むものではありませんが、あなたが自分で選択できるようにあなたのオプションをレイアウトします。
「10分」でPWAを構築する方法については、オンライン上にたくさんのコンテンツが浮かんでいます。 そのネイティブアプリの感覚を従来のウェブアプリに1時間足らずですべてゼロからもたらすことが約束されているため、これらのチュートリアルに簡単に魅了されます。
それは合法ですか？
はいといいえ。 これらのPWAの「ハック」は、HTTPS、Webマニフェスト、およびサービスワーカーという絶対的な最小基準を満たすためのものでもあります。 非常に基本的で機能的なプログレッシブウェブアプリの作成に興味がある場合は、MicrosoftのPWABuilderを試すことができます。 少しいじくり回して技術的なノウハウを使えば、まともなものを稼働させることができます。
ユニークで最適化された機能豊富なプログレッシブウェブアプリを構築するには、その可能性を実際に発揮するために、さらに投資する必要があります。 その理由を理解するために、基本的な手順を詳しく見ていきましょう。
- ホスティングサービスを通じて構成するSSL証明書を購入する
- アプリシェルを開発する
- ブラウザがサービスワーカーをサポートしているかどうかを確認します
- サービス作業ファイルを登録する
- プッシュ通知とWebアプリマニフェストを追加する
- インストールプロンプトを設定する
- アプリの機能をテストする
- アプリベースのLighthouseのチェックリストを監査する
- バグを修正する
- アプリを起動します
簡単そうですね。
実際には、これをうまく行い、優れたカスタムプログレッシブWebアプリを構築するには、複雑なWebアプリの構築経験を持つフロントエンド開発者が必要です。
最適なパフォーマンスを得るためにサービスワーカーを設定してキャッシュするという重要な作業は複雑であり、実際のスキルが必要です。 次に、要件によっては、ネイティブアプリのユーザーエクスペリエンスとそれをウェブ上で効果的に適用する方法を理解しているデザイナーも必要になる場合があります。
あなたがかなり大きな会社でない限り、あなたはおそらくあなたが彼らに何をすべきかを言うのを待っている才能のあるフロントエンド開発者の負荷を持っていません。 あなたはそれらを見つけ、それらを雇い、チームをまとめてそれらを管理する必要があるでしょう-あなたがそのようなことを経験していないなら難しい仕事です。 優れたフロントエンド開発者も常に需要があり、彼らの契約率はそれを反映しています。
プログレッシブウェブアプリを構築するためのコストとタイムスケール
では、これにはいくらかかりますか？ ええと、それは古典的な「弦の長さはどれくらいですか？」に少し似ています。
構築するアプリの複雑さに完全に依存します。 PWAブックの著者によると：
PWAを最初から構築するには、3400 wh（小さなアプリの場合）から9000 wh（私たちが行った専用プロジェクト）までの時間がかかります。 これは、40万ドルから100万ドルのコストを意味します。 クラウドプラットフォームを使用すると、少なくとも75％安くなり、市場投入までの時間も75％短くなります（8〜12か月ではなく2〜3か月）。
–第10章、PWAブック
これは高価なことのように思われますが、上記で見たような主要なブランドがどのように彼らの経験に投資しているかについてのアイデアをあなたに与えます。
もちろん、サイトを最初から構築するのではなくPWAに変換する場合は、ほとんどの場合、より安価で簡単になります。 大まかな見積もりとして、あなたは少なくとも3か月を投資し、素晴らしい結果を得るために20,000ドルから50,000ドルを投資することを検討しています。
開発者はさまざまなプロジェクトフェーズに従いますが、ほとんどの場合、発見、設計、改訂、予備開発、テスト、バグ修正、最終リリースの7つのフェーズが含まれます。
PWAがより複雑な場合は、GPS、ソーシャルメディアのサポート、カメラアクセスなど、統合する必要のある高度な機能を考慮すると、完成が長引くことを期待してください。
そうは言っても、単純なPWAは3か月未満（または、必要最低限の場合は数週間）かかる場合があります。 バックエンドの管理パネル、視覚化パターン、その他の統合などのより高度な機能が必要な場合でも、6か月以内にPWAを使用できます。
これはかなりの量のように思えるかもしれませんが、コンテキストに入れると、それ以上の価値があります。 ネイティブアプリよりも手頃な価格で構築が高速であるだけでなく、速度とユーザーエクスペリエンスの向上は、長期的に見ればそれ以上の利益をもたらす可能性があります。
WordPressを使用している場合は、WordPressサイトをPWAに変換するためのより簡単な方法と、試してみることができるWordPressPWAプラグインがいくつかあります。
私たちはあなたのオプションについてアドバイスするのを手伝うことができます、そしてあなたのサイトが適切であるならば-標準コストのほんの一部で、わずか2週間でそれをPWAに変換するために私たちのカスタムプラットフォームを使用してください。 同様の時間枠でサイトからネイティブiOSおよびAndroidアプリを構築することもできるため、2021年以降のすべてのモバイルベースをカバーできます。
詳細については、モバイルエキスパートの1人に相談してください。
それはあなたの手の中にあります–今日からプログレッシブWebアプリの構築を始めましょう！
これで、プログレッシブWebアプリの特性とパワーについての概要がわかります。
詳細については、次のリソースをご覧ください。
- PWAブック
- web.dev上のGoogleのリソース、およびGoogle Developers
- PWA統計（興味深い指標とケーススタディ）
- GoogleのPWAロードショー（素晴らしいビデオシリーズ）
- Mozillaの優れたPWAガイドライン
- ジェイソングリグスビーの本プログレッシブウェブアプリ
- 今日、Webでできることは何ですか？ （Web技術がどのように発展したかを示しています）
- はい、そのWebプロジェクトはPWA（優れたガイド/記事）である必要があります
- ネイティブアプリ、ウェブアプリ、ハイブリッドアプリの違いに関するガイド
今ではあなたの番です。 大変な作業のように思えるかもしれませんが、印象的でモダンな最適なWebプレゼンスを実現するには、WebサイトをプログレッシブWebアプリに変える必要があります。
ローンチの準備ができたら、あなたは幸せになるでしょう、私たちは保証します。 そしてあなたの顧客はあなたのビジネスに従事するより多くの時間、注意そしてお金を費やすことによってあなたに報酬を与えるでしょう。
ただし、前述したように、PWAはネイティブアプリの代わりにはなりません。 PWAは、主にはるかに優れたWebサイトです。 ユーザーがまだ慣れていないため、ユーザーにデバイスにインストールさせるのは難しい場合があります。また、iOSユーザーへのプッシュ通知とAppStoreでのブランドプレゼンスの送信を逃してしまいます。
ネイティブアプリも構築する必要がありますか？
PWAは必須ですが、ネイティブアプリは依然として究極のモバイルユーザーエクスペリエンスです。 一部の人がネイティブアプリの見通しについて警戒または否定的である唯一の理由は、多額の費用（$ 50,000 +）と、従来はそれらに付随していた長くて骨の折れる開発プロセスです。
これらの懸念を共有しているが、ブランド向けのiOSおよびAndroidアプリの構築に関心がある場合は、プラットフォームNews、Canvas for eCommerce、またはCanvasを確認する必要があります。 どちらが適切か–わずか100ドル/月で、サイトまたはWebアプリをわずか数週間で最高品質のネイティブアプリに変換できます。
当社のプラットフォームは、あらゆるWebサイトをモバイルアプリに変換するために使用できます。 サイトが何で構築されているかは関係ありません。 MobiLoudは構築に最適です：
- WordPressアプリ
- バブルアプリ
- Squarespaceアプリ
- Wixアプリ
- WooCommerceアプリ
- Webflowアプリ
そしてその間の何か！ AndroidとiOSで無制限のプッシュ通知が設定され、WebとAppStoreでクロスプラットフォームでの存在感を高めるために必要なすべての機能を利用できます。
PWAのサポートも承っておりますので、今後は理想的なモバイルコンボをご利用いただけます。 これが良さそうな場合は、今すぐ連絡してデモを予約してください。 別のルートを取ることにした場合は、あなたの旅で頑張ってください。 PWAの例を楽しんでいただき、モバイルで成功するためのインスピレーションを得られたことを願っています。