PWA（Progressive Web Apps）プログレッシブウェブアプリとは

今これがあつい！最新WEB開発のトレンド傾向を探る

Web開発のプロジェクトは現在世の中に山のようにあり、それに合わせて常に多くの技術開発が進められています。Web開発のトレンドは無数に存在しますが、今回はその中の一つである「プログレッシブウェブアプリ」について紹介したいと思います。

プログレッシブウェブアプリとは

以前まで、web開発の世界は大きく分けると、「サーバー上に置かれたコンテンツをwebブラウザで閲覧する」「App storeやGoogle Playなどのストアからアプリをダウンロードし使用する」という２つの方法があり、ぞれぞれにメリット・デメリットがあるなか、プロジェクトの目的に合わせてどちらかを選択して開発が行われてきました。しかし近年、双方のメリットをうまく取り入れた新しい技術が生まれ、web開発の世界が大きく広がりました。それが「プログレッシブウェブアプリ」です。
プログレッシブウェブアプリ（「PWA（Progressive Web Apps）」）は、ブラウザ上で利用するウェブサイトですが、ユーザーはまるでパーソナライズ化されたアプリのように利用することができます。現代のWebサービスやマーケティングは、それぞれのユーザーに最適なコンテンツを届ける「パーソナライズ化」が求められています。PWAは匿名のユーザーにもある程度パーソナライズ化したコンテンツを届けることができるので、非常にニーズが高まっているようです。

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

PWAは「Service Worker」というスクリプトを使用することで、様々な機能を実装することができます。たとえば、
・アプリを操作中に画像を表示する「スプラッシュスクリーン」
・ユーザーに合わせてメッセージを送る「プッシュ通知」
・GPS機能の利用で実現できる「提供するコンテンツのパーソナライズ化」
などの機能があります。
そして、「インストールの必要がない」、「常にアップデートされる」、「HTTPSを利用できる」などメリットも多く話題になっています。このような利点はエンジニアにとっても開発の上で都合のいい効果を発揮してくれます。一例を挙げると、アプリ開発に不具合はつきものですが、PWAであればアプリのインストールは必要ないので、不具合が発見されても修正してサーバーに修正プログラムを乗せるだけです。一方、インストールが必要なアプリは修正プログラムを再度ユーザーがインストールする必要があり手間がかかります。

PWAを導入する企業と利用方法の事例について

PWAは世間で注目されており、多くの企業のサイトで導入されています。一例として、下記があげられます。
・starbucks.com（スターバックスのホームページ）

・suumo（不動産に関する情報サイト）

・Alibaba（世界有数のECサイト）

なぜ、企業はPWAを取り入れようとするのでしょうか。もちろん企業にメリットがある機能を実装することができるためです。たとえば、購入サイトでユーザーが欲しい商品を買い物かごに入れたとします。その後他のページも閲覧したあと買い物かごに物を入れていることを忘れてサイトから離脱してしまうユーザーもいます。「プッシュ通知」の機能を利用してユーザーにリマインドすることで、ユーザーが物を購入する確率が上がったという事例があります。

PWAが提供できるメリットの仕組みについて

PWAは前述したような数多くの利点を出す「仕組み」が備わっています。具体的には、「コンテンツをキャッシュする」という仕組みがあり、これは主に「オフラインでも動作する」ということと、「高パフォーマンス（サイト上での操作が高速になる）」という二つのメリットを実現しています。PWAではないウェブサイトであれば、コンテンツはサーバー上にあります。コンテンツを利用する際はサーバーにリクエストを投げて取得する必要があるため、オフラインでは動きません。外部リソース（サーバー）にアクセスするため時間もかかります。しかし、PWAであればコンテンツはクライアントにキャッシュしておくため、オフラインの場合もキャッシュのコンテンツを利用することで動作し、処理も高速になります。