プログレッシブ Web アプリ: テクノロジー、長所、短所

モバイル熱はすべての人に影響を及ぼしており、オンライン ショップも例外ではありません。 現在、どのブランドもモバイルでの存在感を必要としています。 これは次のようにして実行できます。

• レスポンシブ Web デザイン。これには、モバイル デバイスやタブレット デバイスのサイズに合わせて Web サイトのコンテンツを調整する必要があります。
• ネイティブ モバイル アプリケーション。高価になる可能性がありますが、スマートフォン専用に開発されています。
• Web アプリとネイティブ アプリの要素を組み合わせたプログレッシブ Web アプリ (PWA)。

Progressive Web App (PWA) は、Web サイトをアプリケーションとしてデバイスにインストールできるようにする一連のテクノロジーです。 つまり、Web サイトと一緒に iOS および Android アプリを開発する必要はありません。 それとは別に、PWA の開発はそれほど難しくありません。たとえば、チームは Magento 2 PWA スタジオのような既製のテーマをカスタマイズすることで開発できます。

PWA は想像以上に広く使用されています。 eコマース、教育プロジェクト、旅行会社、ストリーミング サービスなどで使用されています。 Agent Provocateur、UK Meds、Alibaba、Eleganza などの主要ブランドは、PWA アプリケーションをベースとして、またはモバイル アプリケーションに加えて使用しています。

プログレッシブ Web アプリ (PWA) アーキテクチャ

ほとんどの Web サイトはモノリシック アーキテクチャを採用しています。 これは、フロントエンドがバックエンドで生成されることを意味します。 ユーザーが Web ページをリクエストすると、サーバーはユーザー固有の情報を取得して HTML ページを作成し、それをインターネット経由でユーザーのデバイスに送信します。 ユーザーが Web サイト上の別のページを開くと、このプロセスが繰り返されます。

モノリシック アーキテクチャの代替案は、ヘッドレス アーキテクチャです。 これは、フロントエンドとバックエンドが分割されていることを意味します。 PWA はヘッドレス Web サイトの一種です。 その結果、初期ロードでは、JavaScript ファイルを含む必要最低限​​の HTML ページのみがサーバーから受信されます。 サイトの残りの部分は、バックエンドからすべてのマテリアルを直接受信するのではなく、ブラウザーを使用してレンダリングされます。

その結果、PWA は優れた UX、高速性、応答性などの最高の品質を実現します。PWA の重要な要素は次のとおりです。

あなたにおすすめ:プログレッシブ Web アプリ (PWA) を構築するための最も人気のあるフレームワーク。

サービスワーカー

「サービス ワーカー」として知られるスクリプトは、ブラウザのバックグラウンドで動作します。 これらは Web ページなしで動作し、通知の処理やネットワーク リクエストの管理などの優れた機能を備えています。 これまでのところ、キャッシュ、バックグラウンド同期、オフラインモード、プッシュ通知などの機能がサポートされています。

アプリケーションシェル

ユーザー インターフェイスを強化するために必要な基本的な HTML、CSS、および JavaScript コードは、アプリケーション シェルと呼ばれます。 それはアプリのバックボーンです。 ユーザーがプログレッシブ Web アプリを開始すると、最初にアプリケーション シェルが読み込まれます。 これにより、ユーザーがオフラインの場合でもインターフェイスが即座に読み込まれることが保証されます。 さらに、アプリケーション シェルをキャッシュして、今後のアクセス時に迅速にロードできるようにすることもできます。

ウェブアプリマニフェスト

Web アプリ マニフェストは、デスクトップおよびモバイル プラットフォーム上で PWA がどのように表示されるかを担当する要素です。 これを利用すると、すべてのユーザーに PWA を表示する方法を制御できます。 Web ブラウザは、最初にネットワークに接続するときにマニフェスト ファイルを調べ、リソースをダウンロードしてローカルに保存します。 Web アプリは、ブラウザーのローカル キャッシュを使用して、インターネット接続なしで使用できます。

キャッシュ

キャッシュ ストレージのアプローチにより、ソースからデータを繰り返し取得する必要がなくなります。 これは、データをサードパーティのデータセンターまたはユーザーのデバイスに一時的に保存することによって実現されます。 ソースから取得する代わりに、キャッシュからロードすることもできます。

PWA にはさまざまなキャッシュ手法を実装できます。 アセット全体をキャッシュするのが最も一般的な方法です。 これは、静的コンテンツと動的コンテンツの両方がキャッシュに含まれていることを意味します。

部分的なアセットをキャッシュすることも別の戦術です。 この方法を使用すると、スクリプトや写真などの特定の素材のみをキャッシュできます。 これは、コンテンツの大部分が動的であるページに効果的である可能性があります。

プログレッシブ ウェブ アプリ (PWA) の利点

Statista によると、2021 年の世界の e コマース小売売上高の約 75% はモバイル チャネルを通じて行われました。 2017 年の数字と将来の予測は次のようになりました。

モバイル デバイス ユーザーの数は急激に増加しているため、PWA の導入はこれまで以上に重要になっています。 ここでは、注目に値する PWA サイトの機能をいくつか紹介します。

画像出典: Statista。

素晴らしいパフォーマンス

PWA はバックグラウンド サービス ワーカーを使用して労働集約的なタスクを実行するため、読み込み時間が短縮されます。 これらのスクリプトは Web ページとは独立して動作し、迅速かつスムーズなナビゲーションを維持するために必要なすべての情報をプリフェッチします。 さらに、スクリプトはページ上でアクティブではないため、ページの読み込み速度には影響しません。 データがキャッシュされると、アプリ内のナビゲーションが事実上迅速になります。

視認性の向上

「ホーム画面に追加」オプションにより、より高い視認性が提供されます。 顧客はワンクリックでアプリを見つけ、気を散らすことなく製品を選択できます。 また、ユーザーが商品をカートに入れたら、後で割引や特別オファーに関する通知を送信して、購入を促すことができます。

アプリのようなUX

PWA は Web サイトのように動作し、ネイティブ アプリに似たデザインを持ちます。 さらに、PWA とネイティブ アプリケーションはどちらもユーザー エクスペリエンスに同等の影響を与え、データベース アクセスや自動データなどの多くの機能を共有します。

クロスサポート

PWA はどこでも動作できます。 さまざまなデバイスを切り替える傾向があるユーザーは、どこでも相互サポートを利用できます。 PWA に依存するビジネスに関しては、プラットフォームであれアプリのバージョンであれ、最高のパフォーマンスを発揮するソフトウェアを従業員に提供することが重要です。

開発コストの削減

ネイティブ アプリケーション開発には 2 つの異なるコードベースが必要です。 たとえば、ネイティブ アプリケーションの作成には、iOS 開発の場合は Swift または Objective-C、Android の場合は Kotlin または Java のスキルを備えた開発者が必要ですが、これにはコストがかかります。 プログレッシブ Web アプリは、HTML、CSS、JavaScript などの広く使用されているプログラミング言語に依存します。 それとは別に、それらを維持するには、Web 開発を専門とする単一のチームが必要です。

オフラインでも動作

PWA の顕著な機能の 1 つはオフライン ナビゲーションです。 接続に失敗しても、重要なデータやサービスへのアクセスが失われることはありません。

PWA を使用すると、アプリ内に表示されるデータの一部をキャッシュして保存することで、アプリをオフラインで操作できるようになります。 また、キャッシュされたリソースを処理し、オフラインであってもプッシュ通知を有効にすることでパフォーマンスも向上します。

アプリをApp Storeに置く必要はありません

アプリケーションをアプリ ストアでリリースするには、プロジェクトの追加費用がかかります。 ストアによっては、リリース前であっても料金を請求したり、プロジェクトに面倒な出版と認証の手続きを踏まなければならない場合があります。 この戦略では価格が上昇し、平均市場時間が長くなるため、場合によってはプロモーション期間を逃したり、期限に間に合わせるためにテストされていないリリースを発行したりする可能性があります。

ただし、PWA を使用すると、アプリ ストアの問題全体を回避できます。 PWA は、顧客がアプリをダウンロードしたり、新しい検証ラウンドを待たずにアプリを使用してアップデートを受信できるため、顧客と企業の両方にとって実用的です。

あなたは好きかもしれません: React Native vs Flutter vs PWA: トレンドのモバイル アプリ フレームワークの戦い。

プログレッシブ ウェブ アプリ (PWA) の欠点

ビジネスに導入するモバイル アプリの種類を選択するときは、このテクノロジーは比較的新しいため、考慮すべき欠点がいくつかあることを考慮してください。

iOSの互換性が不十分

すべての PWA 機能が iOS でサポートされているわけではありません。 Android と比較すると、Service Worker のサポートは非​​常に限定されています。 アプリケーション データの保存とそのファイルのキャッシュのみが可能です (バックグラウンド タスクは不可)。 ストレージには 50MB の制限があります。 このため、多くのユーザーの PWA へのアクセスが制限されています。 また、Siri、アプリ内決済などの一部の組み込み機能の使用には制限があります。PWA のユーザー エクスペリエンスは、ネイティブ アプリが提供する UX に比べて劣ります。 UX が少なくともマーケティングと同じくらい重要である世界において、これは真の損失です。

制限された機能

デバイスのすべての機能が使用できるわけではありません。 たとえば、連絡先、カレンダー、Bluetooth にアクセスできません。 アプリケーションがデバイスのハードウェアを広範囲に利用する必要がある場合は、多くの場合、PWA よりもネイティブ アプリの方が適しています。 たとえば、ファイル共有や Bluetooth メッセンジャーなどの Bluetooth ベースのソリューションは、通常、ネイティブに開発されます。

バッテリー消費量の増加

複雑なコードで暗号化されているため、携帯電話で解読することがより困難になります。 その結果、PWA はネイティブ アプリケーションよりも多くのバッテリーを消費します。

インストールプロセスはどのように行われますか?

Lancome.com の例でインストール プロセスがどのように機能するかを見てみましょう。

1. ユーザーはモバイル デバイスのブラウザで Web サイトを開きます。
2. ユーザーにはオファーを含むポップアップが表示されます。 たとえば、「ホーム画面にアプリを追加する」などです。
3. ユーザーはワンクリックでアプリケーションをインストールします。
4. ユーザーがアイコンをタップすると、Web サイトが開きます。

画像出典：ランコム。

こちらもおすすめです: Magento PWA Studio: Magento 用のプログレッシブ Web アプリ ツール!

どのような結果が期待できますか?

プログレッシブ Web アプリは、それを立ち上げた企業に優れた成果をもたらします。 たとえば、web.dev によると、アプリのサイズを 97% 近く削減した後、Twitter ではセッションあたりのページビューが 65% 増加し、ツイート数が 75% 増加し、直帰率が 20% 減少しました。 また、PWA に変換した後は、オーガニック トラフィックが 2.3 倍、加入者が 58 パーセント増加し、毎日のアクティブ ユーザー数が 49 パーセント増加しました。 Hulu では、プラットフォーム固有のデスクトップ エクスペリエンスに加えてプログレッシブ Web アプリの導入により、リピーターが 27% 増加しました。

プログレッシブ Web アプリを使用すると、ユーザーに素晴らしい Web エクスペリエンスを提供するまたとない機会が得られます。 PWA は最新の Web テクノロジーを使用して、単一のコードベースを使用して、作成したものを誰でも、任意のデバイスで使用できるようにします。

 この記事は Alex Husar によって書かれています。 Alex は、先進的な Web アプリ開発サービスを提供する会社の最高技術責任者です。 約 10 年間同社で働いてきた Alex は、Web 開発、プログレッシブ Web アプリ (PWA) の作成、およびチーム管理の熟練度を獲得しました。 Alex はさまざまな技術分野について常に知識を深め、記事で共有しています。 プログラマーがよくある課題を克服し、最新の Web 開発トレンドを常に把握できるように支援します。 LinkedIn で彼をフォローできます。