プログレッシブ Web アプリ (PWA) の詳細を確認する

だまされてはいけません。プログレッシブ Web アプリケーションは、ちょっとした記事を読んだだけで仲間と知識に基づいた会話をすることができないようなクレイジーな新しいテクノロジではありません。

それらは本質的に、凝った名前 (Google Chrome に感謝) を持つ近代化された Web アプリケーションです。

それでも、多くの組織が PWA の方が自分たちのニーズにより適していると判断する理由に注意してください。 PWA は、ネイティブ アプリケーションに比べて構築、マーケティング、および保守が安価であるだけでなく、顧客が好むものでもあります。

次のホテルの予約やレンタカーの予約のためだけにアプリ ストアにリダイレクトされることを顧客に尋ねたことがありますか? 多分それは別の日の会話です...

プログレッシブ Web アプリとは何ですか?

プログレッシブ Web アプリとネイティブ アプリケーションまたは従来の Web アプリケーションを構築するためのユース ケースを理解する前に、基本事項を確認しておきましょう。

何よりもまず、プログレッシブ Web アプリケーションについて知る必要があります。これは未来への道だからです。 JAX Enter が 800 人を超える技術者を対象に行った読者調査によると、回答者の 46% が、ネイティブ アプリケーションやハイブリッド アプリケーションではなく、PWA が未来であると考えていると述べています。

プログレッシブ Web アプリ、非プログレッシブ Web アプリ、ネイティブ アプリの違い

上級開発者でさえ、プログレッシブ アプリケーションと非プログレッシブ アプリケーション、または非プログレッシブ アプリケーションとネイティブ アプリケーションを混同する傾向があります。 それでも、これらのアプリケーション タイプには明確な違いがあります。

ソース

ネイティブ アプリケーションは、特定のデバイス (スマートフォン、タブレットなど) 向けに特定の言語で構築されたアプリケーションであり、アプリケーション ストアからダウンロードする必要があります。 上記の例では、Dish の MyPay アプリは、Apple App Store からダウンロードでき、iOS デバイス用に構築されているため、ネイティブ アプリケーションです。 Google Play で Dish の MyPay アプリをダウンロードすることもできますが、実際には Dish はそれを可能にするために 2 つ目のネイティブ アプリケーションを開発する必要がありました。

顧客向けに 2 つの異なるモバイル アプリケーションを設計および開発しなければならないことから、ネイティブ アプリ開発の大きな欠点が見えてきます。

より予算重視のアプリケーション タイプですか? 非プログレッシブ Web アプリケーション。 Web アプリケーションの最も初期の形式である非プログレッシブ Web アプリケーションは、アプリ ストアからダウンロードする必要のないアプリケーションです。 むしろ、Web 経由でのみアクセスできます。

見た目も操作感もアプリのようですが、実際には拡張機能を備えた単なる Web サイトです。 上の画像の非プログレッシブ Web アプリの例である Evolve Vacation Rentals は、安全で応答性が高く、洗練されていますが、PWA とは見なされていません。

実際、Web ベースのアプリケーションがプログレッシブ Web アプリケーションと見なされるためには、Google はアプリケーションに次のことが当てはまる必要があると述べています。

• プログレッシブ。 IE や Chrome だけでなく、すべての種類のブラウザーで機能する必要があります。
• レスポンシブ。 アプリは、すべての最新の携帯電話、タブレット、および将来のハイテク ガジェットに適合する必要があります。
• 独立。 オフラインまたは低強度のネットワーク接続で動作する容量が必要です。
• アプリ風。 アプリケーションは、アプリ スタイルのナビゲーションとスタイリングを使用します。
• 新鮮。 常に最新の状態。
• 安全。 トランスポート レイヤー セキュリティを介してユーザーに提供されるか、より一般的には HTTPS URL と呼ばれます。
• 発見可能。 検索エンジンで検索可能。
• 再エンゲージ可能。 プラットフォームを介してアプリケーション ユーザーを再エンゲージする機能 (つまり、プッシュ通知)。
• インストール可能。 ユーザーは、アプリストアからアプリをホーム画面にインストールして、簡単かつ便利にアクセスできるようにすることができます。
• リンク可能。 アプリは、URL を使用して他のユーザーと共有できます。

プログレッシブ Web アプリの機能

Google は、Web アプリケーションをプログレッシブWeb アプリケーションにするための分類を行っていますが、チェックリストを手元に置かずに Web アプリがプログレッシブかどうかを判断するにはどうすればよいのでしょうか。 それを実現するために、PWA の主な機能について見ていきましょう。

セキュア コンテキスト (HTTPS)

アプリケーションが最新かつ最高のデータ セキュリティ基準に準拠していない場合、そのアプリケーションをプログレッシブと呼ぶのは困難です。 セキュア コンテキストは、Web サイト ユーザーに一定レベルの信頼を提供するセキュリティ標準であり、ユーザーが使用している Web アプリケーションが安全な方法でコンテンツを配信していることを示します。

2020 年のどの Web サイトのベスト プラクティスでもあるように、PWA の重要な機能は、TSL/SSL で暗号化され、安全なコンテキストを確保することです。 Web アプリケーションが保護されているかどうかをすばやく判断するには、ページの URL で HTTPS を探すだけです。

HTTPS 接続を持たない Web アプリケーションを使用している場合、それを PWA と見なすことはできません。

ソース

サービスワーカー

技術的に言えば、サービス ワーカーは持ち帰り用の食品を提供する人ではありませんが、その比喩に固執しましょう。

あなたがレストランにいて、停電になったとしましょう。 いつものようにお腹がすいたら、サラダや冷たいスープを食べたくてたまらないでしょう。 しかし、Service Worker が行うことは、キャッシュを使用してエクスペリエンスが損なわれないようにすることです。 というか、サービス ワーカーは、温かい食事が提供されるようにします。

これが PWA のユーザー エクスペリエンスの観点から意味することは、アプリを操作しているときにインターネット接続が失われても、気付かないということです。 または、以前にその PWA に行ったことがある場合は、事前に夕食を注文したように、エクスペリエンスが非常に高速に読み込まれます。

これはどのように可能ですか？ 少しの JavaScript ファイルで、すべてです。 より高度な Service Worker をプッシュ API に接続することもできるため、PWA がプッシュ通知をユーザーに送信して、ユーザーのエンゲージメントを維持できます。

マニフェスト ファイル

よりカスタマイズされたユーザー エクスペリエンスを作成するために、PWA は多くの場合、マニフェスト ファイルを利用します。 つまり、マニフェスト ファイルは、1 つのユニットの一部であるファイルのグループのメタデータを含むファイルです。

基本的に、メタファイルは、特定のデバイスで開かれたときに PWA アプリがどのように動作するかを Web ブラウザーに伝えるためによく使用されます。 PWA のマニフェスト ファイルを作成することにより、開発者は既定のアプリ アイコンまたはスプラッシュ スクリーンの色を設定できます。 開発者は、特定のデバイスでより「アプリのような」エクスペリエンスを作成するために、アプリケーションがフルスクリーンのブラウザー ウィンドウで開くようにすることもできます。

ソース

PWA の利点

確かに、すべてのタイプのアプリケーションに利点があります。 Spire Digital のアジャイル製品開発担当ディレクターである Bart Deferme 氏は、次のように述べています。

「さまざまなタイプのアプリケーションは、さまざまな組織のさまざまなユースケースで有利です。ネイティブ アプリケーションは、ユーザーが PWA や非プログレッシブ Web アプリケーションよりもネイティブ アプリケーションを好むことを知っている組織にとって理想的です。しかし、概念実証を取得しようとしている起業家にとっては、無駄のない MVP、非プログレッシブ Web アプリケーション、または PWA を起動することは、よりコストにやさしいルートです。」

さまざまな種類のアプリケーションが最適なソリューションであるユース ケースが常にあることを念頭に置いて、プログレッシブ Web アプリケーションを別の種類のアプリケーションよりも優先する一般的な利点を次に示します。

発見可能

Google は 1 日に 35 億件の検索があり、世界最大の検索エンジンです。 問題や質問がある場合、人々は Google に質問すると言っても過言ではありません。 これは、アプリ ストアに加えて Web 上に存在できるため、PWA を展開している組織にとって絶好の機会です。 これにより、人々は他のアプリケーションと比較して PWA を見つけやすくなります。

PWA の検出可能性は、ユーザーが最も検索する場所を検索し、回答を取得し、アクションをすべて 1 か所で完了することができるため、大きな利点です。 PWA を使用すると、アプリケーション全体をダウンロードするという面倒な手順を踏んで、アプリ ストアのダウンロード ホイールが「100%、ダウンロード完了」までゆっくりと回転するのを見る必要はありません。

インストール可能

ユーザーが PWA を本当に気に入っている場合、または単に頻繁に使用する場合は、非プログレッシブ Web アプリケーションのようにコンピューターや携帯電話のブラウザーにブックマークする必要はありません。 ユーザーは、アプリ ストアとユーザーに簡単にアクセスするだけで、通常のネイティブ アプリケーションと同じ時間でお気に入りの PWA にアクセスできます。

リンク可能

お気に入りのアプリケーションへのリンクを友人と共有する方が、友人に「アプリ ストアでそのアプリを検索してください」と言うよりもはるかに簡単です。 リンクは、電子メール、ソーシャル メディア dms などを介して簡単に共有できます。リンク可能性と発見可能性は、同期して機能する 2 つの PWA の利点であり、初めてのユーザーがアプリケーションにアクセスするのにかかる時間を短縮し、量も減らします。スーパーユーザーが友人や将来のユーザーとアプリを共有するのにかかる時間。

ネットワークに依存しない

ネットワークshmetwork。 世界のどこに行っても、完全なバーを取得することはできません。 しかし、繰り返しになりますが、PWA を運用するために完全なバーは必要ありませんね。

プログレッシブ Web アプリケーションを使用すると、ユーザーはトンネルを通過する途中でもお気に入りの音楽を聴き続けることができ、都市全体の停電時に通信事業者に電力線のダウンを通知することができます。 常に強力なネットワーク接続を必要としないため、PWA はすべてのユーザー グループにより信頼性の高いユーザー エクスペリエンスを提供します。

レスポンシブ

Zoom 通話で興味を示しながら、友達と言葉遊びをしたいと思ったことはありませんか? Words with Friends がネイティブ アプリケーションではなく PWA である場合は、それが可能です (ちなみに、それは素晴らしいアイデアです。誰かがそれを実現してください)。 PWA は、デバイスやブラウザーの種類に関係なく、シームレスなユーザー エクスペリエンスを実現します。 これは、お気に入りのネイティブ アプリケーションや非プログレッシブ アプリケーションを使用するために、携帯電話やラップトップを常に手元に置く必要がないことを意味します。

応答性のもう 1 つの利点は、組織が複数のユーザー グループに対して複数のアプリケーションを作成する必要がなくなることです。 ラップトップ ユーザーと携帯電話ユーザーは、単一のアプリ (PWA) の展開に満足できます。 この利点は、組織の IT およびマーケティング支出のバケットを節約できるため、PWA の最も優れたセールス ポイントの 1 つになる傾向があります。

安全

特に、金融、健康、または保険のアプリケーションを使用する場合、ユーザーは自分の個人データがケイマン諸島の何者かにアクセスされていないことを知りたいと考えています。 もっと簡単に言えば、セキュリティはユーザーとの信頼を築きます。 安全なコンテキストと URL 暗号化により、PWA はユーザーと Google 検索ボットの両方に安心感を提供できます。

前述のように、組織のすべての URL (Web アプリケーションを含む) で SSL 暗号化を使用することをお勧めします。 Web アプリケーションを保護しないと、検索結果ページでの Web アプリケーションのパフォーマンスに悪影響を及ぼすと、Google は一貫して述べてきました。

ソース

結論

考えてみてください。世界は、人間が 1 日 24 時間ソフトウェアに接続されるブレードランナーの現実に向かっています (まだ接続していない場合)。 技術曲線を先取りし、最大の ROI を得るということは、最も長期的な価値を持つソフトウェアに投資することを意味します。

ネイティブ アプリケーションは、特定のデバイス向けに特定の言語で構築されているため、アプリケーション エクスペリエンスが応答しなくなり、コード ベースの再利用性が低下します。 非プログレッシブ Web アプリケーションのコードは、他のアプリケーションの作成に再利用できますが、非プログレッシブ Web アプリケーションは特定のブラウザー用にのみ構築されます。 また、アプリストアからダウンロードすることもできません。

PWA は、次のように、最も将来性が保証されたタイプのアプリケーションです。

• ウェブまたはアプリストアで発見可能
• レスポンシブであらゆるブラウザに対応
• ネットワーク接続に依存しない
• 安全で暗号化されています
• もっと

PWA についての理解が深まったので、アプリケーションのユース ケースをよりよく調べて、組織のニーズに合ったアプリケーションの種類を判断できます。 まだ行っていない場合は、顧客と話し合って彼らの要望とニーズを把握し、組織に最も長期的な価値を提供する構築するアプリケーションを選択してください。

PWA は組織に適していますか? 知るか。 しかし、すべてのアプリケーション オプションをよりよく理解することは決して悪い考えではありません。

G2 のアプリ開発情報ハブで、他のアプリ開発に関する洞察をより完全に理解してください。