プログレッシブウェブアプリ（PWA）

プログレッシブウェブアプリ（PWA）とは何か？

プログレッシブウェブアプリは、ネイティブアプリケーションとHTML5ベースのウェブアプリケーションの技術的な組み合わせです。PWAは、アプリとウェブページの間の技術的なギャップを埋めるために登場しました。

Googleはこの種の技術の開発を促進する主要な提唱者の一人でした。その特徴をよりよく理解するためには、信頼性が高く、高速で、エンゲージできるアプリケーションについて話す必要があります。

プログレッシブウェブアプリが持つべき特徴

PWAの概念を十分に明確にし説明するために、これらの技術が持つべき必須の特徴を掘り下げてみましょう。

もちろん、一般論として話しています。そこから、各ビジネス／サービスモデルが、自身のターゲットオーディエンスのニーズに目標を合わせていきます。

速度

時は金なりです。これはGoogleにとってだけでなく、商品の遅い読み込みでユーザーが潜在的な購入を放棄する可能性のあるすべてのビジネスにとってもそうです。

Googleはこの前提を長い間強調してきました。AMPプロジェクトの誕生にはこの目的があり、今やPWAがアプリケーションからの情報への高速アクセスの必要性に加わります。

今日のユーザーには忍耐がなく、サイトの読み込みを完全に待ちません。Think with Googleによると、ユーザーの53%はウェブサイトの読み込みに3秒以上待ちません。

信頼性

信頼性について話すとき、サイトの動作保証を指します。Service Workersとして知られているもののおかげで、ネットワーク接続の問題はPWAの読み込みを妨げないはずです。

インストール可能

PWAは、Chrome Store、Apple Store、または既存のアプリストアのいずれにも行く必要なくインストールできます。これらはネイティブアプリケーションではないので、これらのストアを通さずにアクセスできることを覚えておいてください。

インストールは単にショートカットとして動作するだけで、異なるファイルを保存するスペースは必要ありません。

異なるデバイス：モバイルとデスクトップ

コードベースは両方のデバイス間で統一されているため、レスポンシブデザイン技術はモバイルとデスクトップの両方に適用されます。

PWAの利点と欠点

プログレッシブアプリケーションの特徴を説明する際、いくつかの利点はすでに上で言及されました。しかし、私たちのビジネスでこの技術の使用を検討する理由はもっとたくさんあります。

• ›リソースの節約
• ›インストールが不要
• ›非常に高い読み込み速度
• ›スマートフォンへの直接プッシュ通知
• ›すべてのオペレーティングシステムで動作
• ›セキュリティの向上
• ›ネイティブアプリよりも開発・保守の作業が少ない
• ›ネイティブアプリよりも経済的

欠点

• ›インターネット接続が必要
• ›すべてのブラウザがPWAをサポートしているわけではない
• ›バッテリー消費が多い

Service Workerとは何か？

技術的な側面に少し戻ると、それなしではプログレッシブアプリケーションが機能できない特定の側面について話す必要があります。Service Workerは、ウェブアプリケーション、キャッシュ、またはネットワーク自体にリクエストを行いながらバックグラウンドで実行されるスクリプトです。

知っておくべき重要なことの一つは、Service WorkerはSSL証明書を持ち、httpsで提供している場合のみ機能できるということです。

それでは、例で全部見てみましょう：BMWのウェブサイトとそのPWAです。

PWAの例：BMW

技術的な側面に深く入り込まずに記事を書こうとしましたが、これからPWAの概念をよりよく理解するのに役立つアプリケーションの例を見ていきます。

BMWのウェブサイトに入ると、彼らは非常に魅力的なデザインを持ち、視覚的なものを優先していますが、デザインについて話すのを超えて、これがどのタイプのウェブサイトかを見てみましょう。

一見「普通」のウェブサイトですが、コードを掘り下げると最初の驚きが得られます。実際、これは完全にAMPで開発されたウェブサイトで、モバイル版だけではありません。

しかし、今日の本題に入りましょう。

ウェブサイトに入ったら、Chromeの「カスタマイズと制御」バーに行きましょう。

ご覧のように、BMWウェブサイトのコンテンツを含むウィンドウが開きました。両方のコンテンツを比較すると、ほぼ同一であることがわかります。

ブラウザ（Chrome）でのウェブサイトの画像

PWAデスクトップでのウェブサイトの画像

BMWの開発者は同一のビジュアル外観を維持することができました。Chromeアプリケーションフォルダやデスクトップ（OSによる、私は現在MacOSを使用しています）でPWAの「インストール」を受け入れると、PWAへのショートカットがダウンロードされます。

アプリのインストールに圧倒され、アンインストールしたい場合は、PWAバージョンウィンドウに行き、Chromeと同じように右側をクリックして、アンインストールを選択するだけです。

モバイル版でもほぼ同様です。PWAバージョンでウェブサイトに入ると、「ショートカットを作成する」通知を受け取ります。

PWA付きのウェブサイトに入ると、ショートカットを作成するオプションが表示されます。

受け入れると、モバイルデスクトップにPWAアイコンが表示されます。

PWAについて学ぶためのDevTools

この時点で、この種のアプリケーションの概念と機能を説明する例に深く入り込みたいと思います。

このために、Chromeが提供する開発者ツール（DevTools）を使用します。右ボタンでインスペクタを開き、Applicationに移動します。

Chrome Devtools

App Manifest（Web Application Manifest）

manifestは、ブラウザに提供される基本的なスタイル側面を持つ小さなJSONファイルで、急激な変化を避けるためのものです。

Manifest（JSON）の例

Service Workers

先ほど説明したように、今やそれが何かを見ることができます。JSファイルとそれが使用するスクリプトを見ます。Service Workerはブラウザにインストールされます。他のウェブアプリケーションからもいくつか持っているでしょう。

このタイプのコードの主な機能の一つは、別のタブを開いても常に同じバージョンが提供されるようにすること（キャッシュを制御する）です。

WordPressでPWAを実装する方法は？

独自のコードでウェブサイトを開発した場合、かなりの手作業が必要になりますが、WordPressでウェブサイトを開発した場合は状況が大きく異なります。この場合、数クリックでPWA技術を有効にできるいくつかのプラグインを利用できます。実際、SEO AliveのPWAバージョンは、私たちがおすすめするこのプラグインの結果です。

WordPressにPWAを実装するための最も人気のあるプラグイン。

マーケティングにおけるPWA

マーケティングに従事する私たちにとって、プログレッシブウェブアプリは、ブランドを成長させるためにすべてのマーケティング部門が念頭に置く目標を達成するのに役立ちます。

ロイヤリティと売上

一部のブランドが最も悪く取り組んでいる目標の一つです。携帯電話ブランドが顧客を扱う際の関与度の低さは、例を挙げるなら誰もが知っています。

PWAでのプッシュ通知は、最もうまく機能している施策の一つであり、売上の創出に貢献しています。

GartnerによるPWAに関する研究は、LancomeとAlibabaに関する非常に興味深い統計のシリーズを提供しています。**Lancomeはコンバージョンの17%増、**モバイルデバイスからのセッションの51%増、iOSでの52%増を報告しています。Alibaba（Aliexpressが属するグループ）はコンバージョン率を76%改善しました。

世界的な巨大企業2社について話しましたが、モバイル上に読み込みと実行時間が遅延しないアプリを持ち、優れたデザインを尊重することは、コンバージョン率を高めることが示されています。

結論として、PWAは特に大手ブランドの間でますます広がっていると言えます。スペインでは、おそらくこの技術の巨大な可能性に気付くまで少し時間がかかるでしょうが、遅かれ早かれ実装されるでしょう。

モバイルナビゲーションを促進する技術はすべて重要です。私たちはスマートフォンと多くの時間を過ごし、最終的にコンテンツと商品の両方へのアクセスがビジネスです。

参考文献

• ›PWAに関するGoogleドキュメント