PWA：これはモバイルアプリの未来はどのようなものですか？

「プログレッシブウェブアプリ」とは、デザイナーのフランシスベリマンとGoogleChromeのエンジニアであるアレックスラッセルによって2015年に造られたばかりの用語です。 PWAは誕生以来、かなりの成功を収めており、大手企業にも採用されています。

しかし、予言が次のことを示しているのを聞くと、それはいくつかの眉をひそめます。 アプリストアの日数とネイティブアプリの日数は、番号が付けられています。

会議の開催から友人への連絡、サーモスタットの停止、車のロック解除まで、文字通り私たちの生活を営むアプリが、まだ初期段階にあるテクノロジーにすぐに置き換えられることを理解するのは難しいです。

それで、考えられないことは確かに可能であることができますか、それともローマ帝国は時の試練を乗り切ることができますか？

2つの分岐したパスから選択するには、最初に次のことを知っておく必要があります。PWAとは何ですか。 PWAはどのテクノロジーで実行されますか？ ネイティブアプリに対するPWAの利点は何ですか？ そしてその欠点は何ですか？

主要なPWA開発会社が回答した、このテクノロジーについて知っておくべきことはすべてここにあります。

PWAとは何ですか？

最高のウェブと最高のアプリにクローンの子があったとしたら、それはPWAです。

プログレッシブWebアプリ（PWA）は、その名前が示すように、本質的にWebアプリケーションですが、ネイティブモバイルアプリケーションのようにユーザーに表示されます。 つまり、PWAには両方の長所があり、Webアプリのように簡単にアクセスして検出でき、モバイルアプリの利便性を提供します。

ネイティブモバイルアプリケーションとは異なり、PWAは他のWebサイトと同様にWeb上に存在します。 ここでの唯一の例外は、ユーザーのホーム画面に直接追加できることです。 それ以降、PWAはネイティブアプリが提供するすべてのメリットを提供します。 信頼性、リコール、エンゲージメントの向上。

では、開発者がWebアプリとモバイルアプリの間のスイートスポットに到達するのに役立ったのは何でしょうか。 下にスクロールして、PWAの作成に関連するテクノロジーについて理解します。

PWAの背後にある秘密のソース？

PWAの基礎となる3つの基本的な技術の柱があり、それぞれを以下に説明します。

マニフェスト
WebアプリマニフェストはシンプルなJSONファイルであり、開発者はアプリに関するすべての情報（名前、作成者、アイコン、説明など）をメタデータとして一元的に配置できます。

マニフェストの目的は、デバイスのホーム画面にWebアプリケーションをインストールすることです。 これにより、ユーザーがネイティブモバイルアプリエクスペリエンスを期待する場所でアプリの外観を制御できます。たとえば、起動アイコン、ホーム画面の外観などです。

サービスワーカー
これが本当の魔法が起こる場所です。 Service Workerは、Webとモバイルの両方の長所をPWAにもたらすのに役立ちます。
技術的には、Service Workerはネットワークとデバイスの間に位置し、プログラムでHTTPリクエストを管理することでコンテンツを提供します。
信頼性が高くインテリジェントなキャッシュを処理し、バックグラウンド同期を維持し、通知をプッシュし、最も重要なことに、以前にアクセスしたサイトのオフラインブラウジングを可能にします。

アプリケーションシェルアーキテクチャ
App Shell Modelは、ユーザーがネイティブアプリを起動するときに期待する、高速読み込みに使用されるアーキテクチャアプローチです。

これはキャッシュメカニズムであり、基本的なUIが静的フレームとして保存され、コンテンツを段階的に読み込むことができるため、ユーザーはさまざまな程度のWeb接続にもかかわらずアプリを使用できます。
では、PWAを非常に魅力的なものにしているのは何ですか。 PWAが対処した、Webサイトまたはモバイルアプリに存在する主要な問題のいくつかを見てみましょう。

PWAの利点

このセクションは2つの部分に分かれており、それぞれがWebサイトとネイティブモバイルアプリの欠点と、PWAがこれらの問題にどのように対応するかについて説明しています。

ネイティブモバイルアプリに対する利点

ネイティブモバイルアプリは、使いやすさと速度に関してはゴールドスタンダードですが、それにはいくつかの欠陥があります。 そして、テクノロジーは進化するにつれて向上するだけであり、すべての欠陥は常に取り除かれます。

現在のアプリの最大の欠点は、アクセスできないことです。 ほとんどのモバイルアプリのダウンロード数は1000未満です。

それらはエーテルの中に消え、痕跡を残しませんが、なぜですか？ アプリを見つけるには、それを探す必要があるからです。 グーグルが私たちをしばしばウェブサイトに連れて行くウェブサイトの場合とは異なり、私たちは実際には検索しませんでした。

モバイルアプリの使用に関する別の驚くべき統計は、ダウンロードからアクティブな使用までのユーザー数が20％減少していることを示しています。 つまり、アプリを見つけてダウンロードし、最後に使用するまでのどこかです。 5人に1人のユーザーが消えます。

これに加えて、モバイルアプリの開発と保守は、理想的にはAndroidとiOSの両方で、ウェブサイトとともに行うと、かなりの費用がかかります。

プログレッシブウェブアプリは、上記のすべての欠点に対するソリューションです。

これらはウェブサイトのようにウェブ上に存在するため、Google検索結果で見つけることができるため、PWAのアクセシビリティと発見がはるかに簡単になります。

PWAは、ユーザーがアプリストアからアプリをダウンロードする必要があるステップをバイパスするため、摩擦がなくなります。 デバイスのホーム画面に直接追加して、そこからアクセスできます。
LAへの定期便の航空券をグーグルで検索すると、ウェブサイトの代わりに、ネイティブアプリと同じユーザーフレンドリーなインターフェースで旅行アプリにすぐにアクセスできると想像してみてください。 それがあなたにとってのPWAです。

PWAは、基本的にモバイルアプリのすべての機能を備えたWebサイトであるため、プラットフォームに依存しません。 したがって、PWAを構築して維持する方がコストが低く、より早く出荷できます。

ウェブサイトに対する利点

Webサイトの主な欠点は、モバイルアプリに比べて低速であり、不安定な接続でアクセスした場合に信頼性が低いことです。

これが「ウェブ肥満危機」を引き起こしたものです。 私たちはHDビデオとカラフルなアニメーションを備えたウェブページが大好きですが、同時に統計によると、ユーザーの40％が読み込みに3秒以上かかるウェブサイトからバウンスしています。

これとは別に、Webサイトは常に、アプリと同じように通知トレイとホーム画面の場所を切望してきました。

PWAは、長い間Webサイトを悩ませてきたこれらの問題に適切な組み合わせをもたらします。

前述のように、PWAはApp Shellアーキテクチャを採用しており、迅速な読み込みを保証します。 これは、他のコンテンツが段階的または動的にロードされる最初のロードのために、信頼性の高い高速Webコンポーネントを備えた静的フレームを提供します。

PWAは、アプリと同じようにデバイスから追加してアクセスできます。 アプリをダウンロードするよりも追加する方が簡単です。 ここでは、ブラウジング中に「ホーム画面に追加」プロンプトを受け入れるだけで、PWAがデバイスのホーム画面に追加されます。
次回デバイスのホーム画面から起動すると、すべてのブラウザコントロールが非表示になり、アプリのように動作します。

ご覧のとおり、PWAは両方の長所を組み合わせています。 堅牢なバックエンドフレームワークとWebサイトの接続性を備えたネイティブアプリの速度と使いやすさ。 それがまさに私がPWAをネイティブアプリとウェブサイトのクローンの子と呼んでいる理由であり、プログレッシブウェブアプリの開発に投資することを楽しみにすることをすべての人に勧めています。 ただし、同時に、このモバイルアプリケーション開発ガイドで説明されているように、モバイルアプリ開発プロジェクトの成功に影響を与える他の要因とともに、テクノロジーとその市場での範囲を裏返しに理解することをお勧めします。