PWA（Progressive Web Apps）は次世代のWebアプリケーションを作るのに学んでおくべき技術です。これをやればPWAという訳ではなく、Webアプリケーションをよりネイティブ/ローカルアプリケーションに近づけるための技術体系がPWAになります。
ニフクラ mobile backendはPWAでも活用が可能です。サーバレスアーキテクチャに注目が集まる中、データストアやファイルストア、認証をサーバレレスで実装できるmBaaSを活用してください。
この記事ではPWAを開発するのに便利なライブラリをカテゴリごとに紹介します。
- データベース：localForage/localForage: 💾 Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.
- Workbox | Google Developers
- PWABuilder
- pwa-builder/pwa-auth: Web component that lets your users sign-in/sign-up using their Microsoft, Google, Facebook, or Apple account. Your app receives their email address, name, and profile picture.
- pwa-builder/pwa-install: Web Component from the PWABuilder team that brings an awesome "install" experience to your Progressive Web App!
- wonderpush/wonderpush-webplugin-optin-dialog: WonderPush Web SDK plugin to present the user an opt-in dialog before prompting her for push permission.
- まとめ
データベース：localForage/localForage: 💾 Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.
Webアプリケーションではデータを参照する、作成する、更新するといった作業が必ず発生します。そうしたデータをオフライン時にも使おうと思うとストレージの活用が求められます。localForageはオフライン用のストレージライブラリになります。
localForageはIndexedDBやWebSQL、localStorageなどを透過的なAPIで使えるライブラリになります。それぞれ特徴があって使い分けるのは面倒ですが、localForageを使うことで違いを意識することなく使えるようになります。
Workbox | Google Developers
PWAで大事なのがキャッシュです。キャッシュはオフラインアクセスを可能にする重要技術になります。PWAの場合、そのキャッシュ管理をすべて開発者が行わなければならないのですが、ミスするとアプリケーションを更新しても表示に反映されなくなったりしてしまいます。そんなキャッシュを扱いやすくするのがWorkboxです。
Workboxではネットワーク、キャッシュの優先順位を指定したり、標準では提供されていないキャッシュの有効期限も指定できます。対象のURLやファイルの種類ごとにキャッシュ方法を変更できるなど、キャッシュを使う上で欠かせないライブラリといえます。
PWABuilder
PWAを開発する際に必要なリソースを生成してくれるのがPWABuilderになります。PWAではマニフェストJSONと呼ばれるアプリの定義ファイルが必要ですが、そこで必要な情報を自動生成してくれるのがPWABuilderです。
手作業で作るのも難しくはありませんが、設定項目の漏れが発生することもあるでしょう。PWABuilderを使うことで最適な設定を学べることでしょう。
pwa-builder/pwa-auth: Web component that lets your users sign-in/sign-up using their Microsoft, Google, Facebook, or Apple account. Your app receives their email address, name, and profile picture.
PWAではサーバサイドの認証にWeb APIを使うことが多々あります。そうした認証機能をWebコンポーネントで提供してくれるのがPWA Authになります。Google/Facebook/Aoole/Microsoftといった認証サービスに対応しています。
認証結果としてメールアドレス、名前、プロフィール画像が取得できます。実装すると面倒な認証をまるっと任せられるのは便利です。
pwa-builder/pwa-install: Web Component from the PWABuilder team that brings an awesome "install" experience to your Progressive Web App!
PWAはスマートフォンアプリやデスクトップアプリのようにインストールが可能です。その際、いきなりインストールを迫ってもユーザに拒否されてしまう可能性があります。まずインストールメリットなどを見やすい画面で提示する必要があるでしょう。
PWA installはユーザ向けのPWAインストール体験を良好なものにしてくれるライブラリです。インストールを促せる機会は多くないので、よりよい体験を提供できるのはメリットがありそうです。
wonderpush/wonderpush-webplugin-optin-dialog: WonderPush Web SDK plugin to present the user an opt-in dialog before prompting her for push permission.
PWAでよく注目されるのがWebプッシュ通知です。こちらもインストールと同じようにダイアログを出すのですが、ただ闇雲に出してもユーザに拒否されてしまいます。見せ方、タイミングを考えるべきでしょう。
WonderPush WebPlugin Optin DialogはWonderPush専用のライブラリになりますが、Webプッシュ通知のダイアログを出す前に、オリジナルの表示を通じてWebプッシュ通知のメリットを提示できます。事前に情報を見せることで、ユーザに許可してもらいやすくなる仕組みです。参考になる部分が多そうです。
まとめ
PWAはこれまでのWebアプリケーションの延長なので、まったく異なる技術体系という訳ではありません。しかし新しいテクニックが多数あります。それらを全てスクラッチで作り上げることもできますが、外部ライブラリを使うことでより効率的に開発できるようになるでしょう。
PWAアプリでサーバレスなデータベース、ファイル保存場所が必要になった際にはぜひニフクラ mobile backendを使ってみてください。
mBaaSでサーバー開発不要！ | ニフクラ mobile backend
PWA関連記事
