Webアプリケーションをもっと知りたい(前編)・PWA

Webの技術を利用した開発や制作などを普段から関心を持つ、またはwebデザイナーやWeb分野のエンジニアを目指して学習をされている方なら、「レスポンシブ対応」に関するお話は一度お聞きになったことがあるのではないでしょうか。
Webにおいての「レスポンシブ」というのは、サイトにアクセスしたユーザーの画面サイズ、またはそのユーザーが利用しているWebブラウザに応じて表示内容を変えることによって、ユーザービリティを向上させることを指します。

近年では主にモバイル端末でのユーザー体験を改善する発想が増えている中、非常に注目度の高い技術として「PWA」や「SPA」がよく挙げられます。
今回はこの様なWebアプリケーションについて「名前に聞き覚えはあるが...」というWeb制作初心者の方に向けて解説をしていきます。

「PWA(プログレッシブウェブアプリケーション)」とは

先ずはそもそも「PWA」とは「プログレッシブウェブアプリケーション」の略称ですよ、と言われましても、肝心な「プログレッシブ(進化する)」とは何を指しているのかピンと来ないのではないかと思います。
Web初学者の方にも分かりやすい説明としては、「Webアプリなのに、ネイティブアプリの様なユーザー体験を提供出来る仕組み」が一般的です。
ではまず従来のWebアプリとの比較から、「ここがすごい！」というポイントを下記にまとめました。

サーバー上の新しい情報をリアルタイムに届けるプッシュ通知機能
クライアントサイド(ブラウザ)の性能に適したユーザー体験を提供
ユーザー側はオフライン状態でもある程度の機能が使える

更にPWAをネイティブアプリと比較しても以下の優れている点があります。
インストール不要なのに、ホーム画面にアプリアイコンを追加できます
開発者目線からネイティブアプリと比べて、Webサイト→アプリのリリースの手順が少なく、自由度が高い
WebコンテンツにおけるSEOのノウハウはそのまま通用し、アプリ内コンテンツは検索エンジンを通して検索結果に引っ掛かりやすい

コンテンツ「PWA」化に必要な条件

先程での比較の中で既にWebコンテンツとして、「PWA」であることのメリットの一部をご紹介しましたが、これから「PWA」をサービスに導入する際に、幾つか最低限実装した方がいいとされている機能と必須条件を見ていきましょう。

1. Progressive(プログレッシブ)：旧式クライアント(ブラウザ)には基本機能、主流ブラウザ(先端)ではフル機能を提供する
2. Network independent(ネットワークからの独立)：オフラインキャッシュデータを用いており、ユーザーはインターネット環境に完全に依存せず情報を入手可能
3. Installable(インストール可能)：通常のアプリの様に端末のホーム画面に追加可能
4. Re-engageable(再エンゲージ、主にプッシュ通知機能)：アプリケーション内に新しいコンテンツが公開されたら、ブラウザを閲覧していないユーザーにも通知する機能
5. Safe(安全性)：PWAの土台となるWebサイト自体のSSL化など、情報の安全性を確保する

他にも、Webコンテンツ共通の「リンク機能」、検索エンジンにおける「発見性」や「レスポンシブ対応」などの基本的な要素もよく一緒に挙げられますが、今回はWebサービスにおける「PWA化」という前提としてご紹介しました為、主に上記５つの項目をまとめてみました。

近年における「PWA」の導入状況

これほどユーザーにとって嬉しい要素が実装されるコンテンツは、ユーザーにも検索エンジンにも評価されます。サービス改善として「PWA」はこれまで多くの企業が取り入れる事例があります。
今回は４つの有名事例をご紹介していきます。

---

---

---

PWAの導入に成功することによって、これまでは「Webサイトのみ/ネイティブアプリのみ」の展開と比べて、確実に直帰率が下がり、コンバージョン率の向上に繋がります。
様々な方面でメリットが得られることから、技術面で対応が出来れば今後もPWAを導入するサービスが増えるのではないでしょうか。

「SPA」(シングルページアプリケーション)について

「SPA」(シングルページアプリケーション：以下「SPA」)とは、「PWA」と同じ様にウエブアプリの一種で、その名前の通りに基本的に土台となるページが1枚のみとなっており、JavaScriptがインタラクティブな処理を行うことと、ユーザーの操作によってページの中身を書き換える方式で情報提供を実現する技術となります。
従来のWebサーバーサイドで画面に必要な新しいページのデータを読み込む事なく、Webクライアントサイドでユーザーにリアクティブな動きを提供する事が出来ます。
よくPWAと一緒に話題に出ることが多いので、次回の【後編】にて詳細をご紹介していきたいと思います。

---

ネイティブアプリのリッチなユーザー体験と、通常Webサイトの手軽に使える心地、その両方の強みを融合したPWAについてご紹介させて頂きました。
コンピー塾ではWeb制作初心者の方向けに「Webプログラミング講座」、「webデザイン講座」を実施しております。
気になる方は是非下記の講座紹介ページにてご確認下さい。