【PWA】Progressive Web Appsとは

近年はPCでWEBアプリ（WEBサイト）を利用するユーザーよりも、スマートフォンやタブレット等のモバイル端末でWEBアプリ（WEBサイト）を利用するユーザーの方が多くなっています。
その為、専用ブラウザの様なネイティブアプリを作る事でモバイル端末ユーザーの利便性を向上させる事でサービスの利用率を上げる場合が多いです。
その様な中で、新しい技術であるPWA（Progressive Web Apps）が台頭してきました。
今回はそのPWA（Progressive Web Apps）を紹介させて頂きます。

PWA（Progressive Web Apps）とは

PWA（Progressive Web Apps）とはモバイル向けWEBサイトをネイティプアプリを作成せずに
ネイティブアプリの様なWEBサービスを提供出来る仕組みです。
Progressiveは「進歩的な」、「革新的な」という意味があり、今までのWEBアプリケーション（WEBサイト）を更に進歩させた技術と言えるでしょう。

ネイティブアプリとは

ネイティブアプリとは、iPhoneやAndoroid等にインストールをして使用するアプリの事を指します。
ブラウザ上でWEBサービスを利用するよりも、手軽に、より高速に対象のWEBサービスを利用出来る事が特徴です。
ブラウザ等がよくわからないユーザーでも対象のネイティブアプリを使うだけでWEBサービスが利用出来ます。
その為、ユーザー層を拡張出来る利点もあります。
ネイティブアプリはユーザーにとってとても便利な半面、提供するには3つのハードルがあります。

アプリ開発

ネイティブアプリを開発するには、JavaやObject-C等を使いアプリケーションを開発する必要があります。
これらの言語はWEBサイトとはまた違う技術が必要になる為コストが掛かると思います。
また、ネイティブアプリをリリースする為にはApple等に申請を行いリリース許可が出なければリリースできない等の問題もあります。

アプリのインストール

ネイティブアプリはユーザーが使用している端末にインストールされなければ使えません。
アプリのインストールはウイルス感染の原因等にもなる為、慎重になるユーザーも多いです。
その為、どの様にインストールしてもらうかを考えなくてはなりません。

アップデートの難度

アプリ開発で述べましたが、ネイティブアプリはリリースの際に審査があります。
これはアプリのアップデーをリリースする際にもあります。
もしアプリに不具合があった場合等にすぐに修正をリリースする事が出来ません。
その為、運用でその辺りをカバーしなくてはなりません。

PWA（Progressive Web Apps）で出来ること

ネイティブアプリの便利さや有用性、運用までのハードルを前項で述べました。
本項ではPWA（Progressive Web Apps）で（実現）出来る内容を上げていきます。

プッシュ通知が配信出来る

ネイティブアプリで使われているプッシュ通知の配信が行えます。
新着情報や更新情報、サービスの進捗情報等をブラウザを開いていない時でもユーザーに知らせることが出来ます。
その為、サービスの利便性が向上します。

アイコンをホーム画面に追加出来る

スマートフォンやタブレット等のモバイル端末のホーム画面にアイコンの追加が行えます。
このアイコンをタップする事によりWEBアプリやWEBサイトにアクセス出来ます。
ブラウザから登録したブックマークを利用するフローに比べワンアクションでアクセスが出来るのが利点となります。
また、ブラウザやブックマーク等が分からないモバイル端末のユーザーの場合もアイコンをタップするだけなので簡単にサービスを利用していただけます。

WEBサイトの表示高速化が出来る

ブラウザでWEBサイトを表示する場合に比べ、ページの表示速度を向上する事が出来ます。
これはプリキャッシュ機能がPWA（Progressive Web Apps）にあるからです。
また、WEBサイトの様に表示の度にページの情報を通信しなくても端末にデータをキャッシュしておく事で
通信をせずにページが表示出来ます。
WEBサイトの作り方次第では更新した情報の箇所のみ通信で取得するといった事も可能です。

インストールが不要

PWA（Progressive Web Apps）はネイティブアプリの様な挙動をしますが、ネイティブアプリでは無い為モバイル端末にインストールをする必要がありません。
ホーム画面に追加を行うだけでサービスを利用する事が可能です。

PWA（Progressive Web Apps）とネイティブアプリや通常のWEBサイトとの違い

通常WEBサイトとの違い

PWA（Progressive Web Apps）はWEBサイトではありますが、機能がネイティブアプリに寄っています。
通常WEBサイトに比べ表示速度（読み込み速度）が大幅に改善されます。
通信が必要になる関係上限界があった表示速度（読み込み速度）をプリキャッシュ機能やSPA（Single Page Application）の仕組み等を利用する事で限界を超えて高速化出来るようになりました。
また、プッシュ通知機能やバックグラウンドでの通信等を利用する事で従来のWEBサイトでは行えなかったサービスが提供出来るようになります。

ネイティブアプリとの違い

その大きな違いは、ネイティブアプリではないという点です。
ネイティブアプリはリリースの際の許可やアップデートの際の許可、インストールを行わなければならないというハードルが存在しました。
PWA（Progressive Web Apps）は、ネイティブアプリのような動きはするが存在自体はWEBサイトである為
これらのハードルがありません。
つまり、新規でネイティブアプリを開発する場合、提供方法をPWA（Progressive Web Apps）にする事で工数の削減が行えるでしょう。

PWA（Progressive Web Apps）を導入する際の注意点

新規でネイティブアプリを開発するのに比べて、簡単にネイティブアプリに似たサービスを作成出来る。
更に、通常のWEBサイトに比べ高速なサイトを作成出来るPWA（Progressive Web Apps）ですが
PWA（Progressive Web Apps）を導入する際にはいくつか注意しなくてはならない点があります。

SSL化が必須である

PWA（Progressive Web Apps）はhttps通信が前提の為、http通信では利用出来ません。
近年Googleのランキング評価もSSL化が前提になっており、API等もSSL化されたサイトでしか利用できなくなって来ている為
これを気にSSL化を行ってしまっても良いかもしれません。

▼関連記事

通常のWEBサイト作成に比べコストがかかる

PWA（Progressive Web Apps）で作成したWEBサイトは通常のWEBサイトに比べ制作するコストが高くなる傾向にあります。
ネイティブアプリ開発に比べるとコストは高くないですが、目的なく通常サイトをPWA（Progressive Web Apps）化するにはデメリットとなるでしょう。

PWA（Progressive Web Apps）を導入したWEBサイト

PWA（Progressive Web Apps）を導入し成功したWEBサイトがGoogleに紹介されていました。

twitter

有名なSNSのtwitterはユーザーの80％以上がモバイルのユーザーらしく、PWA（Progressive Web Apps）も早い段階で導入していました。
その結果以下の様な効果が得られたとGoogleが報告しています。

セッションあたりのページ数が65％増加

送信されるツイートが75％増加

離脱率が20％減少
参考：Google Developers

suumo

大手不動産サイトのsuumoもPWA（Progressive Web Apps）を導入しています。
こちらでは以下の様な効果が得られたとGoogleが報告しています。

読み込み時間が75％短縮

プッシュ通知からのアクセス率31％

参考：Google Developers

PWA（Progressive Web Apps）の導入するには

とても便利なPWA（Progressive Web Apps）ですが導入するには複数のWEBAPIを利用して開発を行います。
そして、Googleの提供している「Progressive Web App checklist」に沿ってWEBサイトを作成する事でPWA（Progressive Web Apps）のWEBサイトが作成出来るようです。
言語はJavaScriptが使用されます。
その中でも、以下のフレームワークのどれかを使用して開発される場合が多いです。

• Vue.js
• React
• Angular

また、WordPressのプラグインを利用して、PWA（Progressive Web Apps）化を行う場合もあるようです。
「PWA for WordPress」というプラグインを利用する事でWordPressのWEBサイトがPWA（Progressive Web Apps）化されます。
ただし、WEBサイトの構造を考えて作らなければ高速化等の恩恵を受けにくくなってしまう為注意が必要です。