目次
Contents
はじめに
前回に引き続き、近年注目を集めているPWA（Progressive Web Apps）の開発についてご紹介させていただきます。
ただ、PWAの開発といっても、重要なことは「PWAの要件」を満たしていることです。
今回はその要件も含め、既存WebアプリのPWA化なども含めお話させていただきます。
PWAの要件
PWAに正しく対応しているかどうかを判定する基準は、GoogleのProgressive Web App Checklistでチェックリストが提示されていますが、26項目と膨大なリストなので、ここでは最低限必須の要件だけ紹介します。
具体的には、以下の3項目です。
●HTTPS
・対象のWebアプリがHTTPS化されていること。
●Service worker（サービスワーカー）
・プッシュ通知やキャッシュを管理するJavaScriptのコードが実装されていること。
●Web app manifest（Webアプリマニフェスト）
・アプリのアイコンやURLエントリポイントなどが記載されたJSONファイルが配置されていること。
また、必須ではありませんが、満たすことが望ましい要件として、以下の4項目が挙げられています。
●Cross-browser compatibility（ブラウザ間の互換性）
・Chrome以外のブラウザでも正しく動作すること。
●Responsive design（レスポンシブデザイン）
・マウス操作やタップなど、ユーザーのデバイスに合ったUXが実現されていること。
●Deep linking（ディープリンク）
・サイトの各ページが一意のURLに紐づいていること。
●Best practices（ベストプラクティス）
・品質を確認できるツールを用いて、アプリの効率や安全性を最適化すること。
PWAの開発を行う上では、これらの条件を満たすよう留意しながら進める必要があります。
最低限必須の要件について
ここからは、先程ご紹介させていただいた、最低限必須の要件について詳しく見ていきましょう。
●HTTPS
HTTPSとは、「Hypertext Transfer Protocol Secure（ハイパーテキスト・トランスファー・プロトコル・セキュア）」の略で、SSL（暗号化通信）によってセキュリティを高めたHTTPのことです。
HTTPSにすることで、通信経路での第三者による情報の盗聴や改ざんのリスクを防止できます。
HTTPSに対応するためには、以下の手順が必要です。
1. PWAを配置するサーバーがHTTPSに対応していること。
2. CSR（証明書署名要求）の作成。
3. SSLサーバー証明書の取得
既にHTTPSに対応している場合は問題ありませんが、そうでない場合は、まずはHTTPS化する必要があります。
また、Firebase HostingやNetlifyを使うと、サイトをデプロイするたけでサイトがHTTPS化されるため、比較的簡単に対応できます。
●Service worker（サービスワーカー）
誤解を恐れず一言で表現すると、ユーザーに見えるWebページの裏側で動かせる、イベント駆動のJavaScript環境です。
これを使うと、Webアプリケーションでも、ネイティブアプリに近い操作性が実現可能になります。
Service workersを実装することで実現できることとしては、以下のようなものが例として挙げられます。
1. プッシュ通知
2. オフラインでの使用（キャッシュ）
3. バックグラウンド同期
Service workerを用いてこれらの機能を実現することで、Webアプリでありながらネイティブアプリに近い操作性を実現することが可能になります。
●Web app manifest（Webアプリマニフェスト）
Web app manifestはPWA設置の際、ユーザーデバイスに必要な情報を提供してくれる設定ファイルです。アプリの名前やアイコン情報、アプリが開いた時のURL設定など、色々な情報が設定できます。
ファイル名は自由に設定でき、拡張子は.jsonまたは.webmanifestです。
プロジェクトのルートディレクトリに配置することで、設定内容が反映されます。
PWAの開発方法
PWAの開発といっても、専用の開発用ツールや特殊な方法があるわけではありません。
基本的には、Service worker（サービスワーカー）とWeb app manifest（Webアプリマニフェスト）をそれぞれ作成し、適切に配置すればOKです。
そのため、既存のWebアプリをPWA化する場合も、この2つを追加するだけでPWA化することができます。
ただし、HTTPSに対応していない場合は、HTTPS化も必要になりますので、その点は注意が必要です。
・開発手順の一例
1. Web app manifestファイルを作成後、ルートディレクトリに設置する
2. Web app manifestを全ページで読み込む
3. Service Workerファイルを作成後、ルートディレクトリに設置する
4. Service Workerファイルを表示したいページで読み込む
5. Push API（プッシュ通知）を実装する
また、実際に作成したWebアプリがPWAに正しく対応しているかどうかを判定できるツールも存在します。
例えば、Googleから提供されている「Lighthouse」を使用することでも判定できるので、公開前に確認を行うことが可能です。
開発環境の例
現在は多種多様な言語やフレームワーク、ライブラリが存在しますが、こちらではその中でも代表的なものをいくつかご紹介させていただきます。
●JavaScriptフレームワーク（ライブラリ）
PWAでは、SPA（Single-page Application）を採用するケースがほとんどです。
SPAは、最初に一つのページを読み出し、後はページの変更が必要な部分をサーバーからデータを受け取って変更する仕組みです。
操作する度にページ全体を読み込む方式と比べると、ページ上の必要な箇所だけを更新するため、動作が軽快になることがメリットです。ネイティブアプリに近い表示や操作感が可能になります。
そのため、SPAに対応しているものとして、以下のフレームワーク（ライブラリ）が多く採用されています。
・ReactJS
・Angular
・VueJS
●UIライブラリ
PWAはネイティブアプリのようなUIを提供するため、自前でHTML/CSSをコーディングすることなくUIのライブラリを組み合わせて実装することが多いです。
基本的にはフレームワークに合わせてUIライブラリを選択するため、代表的なものとしては以下の通りです。
・Framework7（ReactJS・VueJS）
⇒ネイティブアプリに近いUIを実現するUIライブラリで、ReactJS版とVueJS版が
ある。
・Ionic（Angular）
⇒Angularベースのモバイル開発のフレームワーク。
元々はiOSとAndroid両方に対応するwebview上で動作するハイブリッドアプリの
フレームワークとして開発されていたため、UIもネイティブアプリに近いものを提供
している。
●バックエンドとの連携
PWAがデータベースと連携する場合は、バックエンドサービスを使います。このデータの流れはネイティブアプリと同様ですが、いくつかの選択肢があるので代表的なものを紹介します。
・REST API
⇒RESTのendpoints（端末や機器など）をサーバー側で実装し、それをPWAのクライ
アント側から呼び出す方法。
バックエンド側の実装やサーバーの設置が必要だが、Firebase Cloud Functionsなどを
使うことで、サーバーレスな実装にする事も可能。
・GraphQL
⇒REST APIに置き換わる次世代のAPIの仕組みになると言われている。
バックエンドの実装は必要なく、データの定義をするだけでAPI endpointsが作られ
APIが呼べるようになる。
Facebookで使用されている。
・Firebase Cloud Firestore
⇒Webアプリのデータ保存、同期、照会が簡単にできる NoSQLドキュメント データ
ベース。
Firebaseベース側にインスタンスを作るだけで、サーバーレスで運用が可能。
最後に
今回のブログでは、前回説明できなかったPWAであるために満たすべき要件や、実際の開発方法についてご紹介させていただきました。
PWAは近年注目されておりメリットも多いのですが、登場してからまだ日の浅いこともあり、対応していないブラウザなどもあることから、やはり現状はネイティブアプリが主流となっています。
次回のブログでは、各ブラウザの対応状況や、今後の展望についても触れていきたいと思います。
記事 ： K.K
