有識者が解説するPWA開発に必要な構成要素や開発環境
※本記事は2018年1月に公開された内容です。
こんにちはQualium Systems Japanの天野です。
本記事は実際にPWA (Progressive Web Apps)開発に必要な構成要素や開発環境などを紹介します。
目次
この記事の要約
PWAの構成要素
- Service Worker
- ネイティブアプリに近いUI
- httpsのサーバー
- Single Page Application
- App Manifest
PWAの開発環境
- JavaScriptライブラリ：React, Angular, VueJSなど
- UIライブラリ：Ionic, Framework7, Vue Materialなど
- バックエンドとの連携：REST API, GraphQL, Firebase Cloud Firestoreなど
PWAの構成要素
PWAは様々なモジュールを組み合わせてできています。主なものを紹介します。
Service Worker
Service Workerはバックグラウンドで動作するJavasriptのヘルパーのライブラリです。
Service Workerを使うことでキャッシュ機能が働き、ネットワークが切れたり不安定な場合でもPWAが落ちることなく使い続けることができるようになります。
またpush通知もService Workerを使って行うことができるようになります。
push通知はService WorkerとFirebase Cloud Messagingなどを組み合わせて実装します。
これまではsw-precacheやsw-toolboxが使われていましたが、現在Googleは後継者のWorkboxを使うことを推奨しています。
なおiOS内のSafariやその他のブラウザではwebkitがブラウザのエンジンになっています。webkitへのService Workerは開発中のためiOS上のブラウザ(Safari, Chromeどちらも)ではService Workerを使ったオフラインでの動作などは使えません。
2017年の8月はじめにAppleがService Workerの開発を始めたというニュースで少し盛り上がったのですが、なかなかその後リリースされませんね。これからの進捗が楽しみです。
ネイティブアプリに近いUI
これまでスマホブラウザ内で動くwebアプリはレスポンシブ対応をしているものも多くありました。レスポンシブ対応をすることで、狭いスマホの画面でも文字や画像が小さくならずに見る事ができました。
PWAではこれをもう一歩進めてネイティブアプリに近いUIでネイティブアプリと見間違えないユーザー体験を提供できるようにしています。
例えば以下のサイトからFramework7を触って貰えば分かると思います。
画面遷移のアニメーションとかボタンのデザインなどネイティブアプリっぽいですよね。
httpsのサーバー
PWAの条件としてサイトがhttpsで提供されている必要があります。
Firebase HostingやNetlifyを使ってサイトをデプロイするとサイトが何もしなくてもhttps化されているのでお薦めです。
またGoogleがPWAをスコアリングしてくれるLighthouseというChromeのプラグインがあります。Lighthouseが条件のひとつとしてしているのはサイトのhttps化です。
Single Page Application
PWAはJavascriptを使ったSPA (Single Page Application)として実装します。
SPAはこれまで画面遷移ごとにUI全部をサーバーから受けていたWebアプリの仕組みとは違い一つのページを最初に読み出し、後はページの変更に必要な部分だけをサーバーからデータを取ってきて変更する仕組みです。
SPAにする事でページロードが速くなりPWAがよりネイティブアプリに近いレスポンスで動作するようになります。
App Manifest
App Manifest内にホーム画面に登録した際のアイコンやPWA起動時のSplashスクリーンの指定を行います。
またPWA起動後にアドレスバーを表示させるかどうかなどの設定もApp Manifest内で行います。
PWAの開発環境
PWAを開発するにあたり必要なライブラリなどを紹介します。
Javascriptのフレームワーク
PWAはJavascriptのフレームワークを使って作ることが多いです。こちらの３つのどれからのフレームワークが主に使われています。
ReactJSはビュー側だけのライブラリと言われることが多いです。どのライブラリも人気がありますが、天野はVueJSを使ってPWAを作ることが多いです。VueJSで作る理由は、
- ライブラリの仕組みがシンプルで学習コストが少ない
- 日本語のマニュアルもしっかりしていて、英語が苦手でも情報を得ることが可能
- 日本でコミュニティが盛り上がっていて、meetupなども多く開催されている
などになります。PWAの開発をこれからやってみたいという方はとりあえずVueJSで始めてみるのがおすすめです。
UIライブラリ
PWAはネイティブアプリのようなUIを提供するため、自前でHTML/CSSをコーディングすることなくUIのライブラリを組み合わせて実装します。
いくつか天野が触った事のあるPWAのUIライブラリをいくつか紹介します。
Ionic
IonicはAngularベースのモバイル開発のフレームワークです。もともとはiOSとAndroid両方に対応するwebview上で動作するハイブリッドアプリのフレームワークとして開発されていたため、UIもネイティブアプリに近いものを提供しています。
Framework7
Framework7もネイティブアプリに近いUIを実現するUIライブラリです。ReactJS版とVueJS版があります。
Vue Material
Vue MaterialこちらはMaterial Designを採用したモバイルUIライブラリになります。最近天野はVue Materialを使ってPWAを作るプロジェクトをやったのですが、コーディングはしやすかったですよ。
バックエンドとの連携
PWAがデータベースを連携する場合はバックエンドサービスを使います。このデータの流れはネイティブアプリと同様ですが、いくつかの選択肢があるので紹介します。
REST API
REST APIはRuby on RailsやNode.jsのExpressなどを使ってRESTのendpointsをサーバー側で実装してそれをPWAなどのクライアント側から呼ぶ方法です。
この方法はバックエンド側の実装やサーバーの設置が必要になりますが、Firebase Cloud Functionsなどを使うことで、サーバーレスな実装にする事も可能です。
GraphQL
いろんなところでREST APIに置き換わる次世代のAPIの仕組みになると言われています。
GraphQLを使うことで、基本的にはバックエンドの実装は必要なくなりデータの定義をするだけでAPI endpointsが作られAPIが呼べるようになります。
GraphQLはAPを呼ぶクライアント側から取得したいデータの内容も指定できるためAPIを呼ぶ回数やデータ量を減らすことができます。
GraphQLは自前でサーバーを立ててそこにインストールすることもできますが、GraphcoolなどのGraphQLのホスティングサービスを使うとサーバーレスで実装する事が可能です。
GraphQLはFacebookが2012年ころから内部的に使ってきた技術なのですが2015年に公開されました。Facebookで使われているので実績も問題ないですね。
Firebase Cloud Firestore
Firebaseのrealtimeデータベースはこれまでチャットなどに使われてきましたが、NoSQLのためリレーショナルデータベースの用にJOINができないなどデータの扱いに難しいところがありました。
Cloud FirestoreではCollectionというものが導入され、Collectionを使うことでユーザー情報など同じデータを持っているものはCollectionの中にDocumentとして保存する事でデータが扱いやすくなっています。
Cloud FirestoreはこれまでのFirebaseのデータベースと同じようにFirebaseベース側にインスタンスを作るだけでサーバーレスで運用可能です。
終わりに
今回はPWAの開発の開発に必要な構成要素や環境について紹介しました。
当然記事の中で全てをお伝えすることはできませんでしたが、この記事を参考にPWA開発についての詳細や最新情報などを調べられてもいいのと思います。
次回以降は記事の中で実際にPWAを実装していく記事などを書いていくつもりですので楽しみにしてくださいね。
FLEXYのご紹介
FLEXYは、エンジニア、技術顧問、CTO、デザイナーの方向けに案件をご紹介するサービスです。
リモートワークや週1-5日、高単価案件など、ご希望に合った案件をご紹介いたしますので、是非お気軽にご相談ください。
■関連記事：
