はじめに
今回は弊社のReact開発で用いているボイラープレートigataをPWA化するという内容のものです（なんか久しぶりに社員らしい記事が書けそうな気がする）。ただし今回は（いつもの事ながら？）結構内容が薄いのであえて横に１という数字をタイトルの横につけました。
PWAとは1
- Discoverable: コンテンツを検索エンジンで見つけることができる。
- Installable: アプリは端末のホーム画面に追加できる。
- Linkable: URL を送るだけでアプリを共有できる。
- Network independent: オフラインか、あるいは貧弱なネットワーク環境でも使用できる。
- Progressive: 古いブラウザーでも基本的な機能は使用でき、最新のブラウザーではすべての機能が使用できる。
- Re-engageable: 新しいコンテンツがあるときには、通知を送ることができる。
- Responsive: 携帯電話やタブレット、ノートパソコン、テレビ、冷蔵庫など、画面とブラウザーを備える全ての端末で使用できる。
- Safe: アプリからの通信が第三者からの攻撃に対して安全であり、機密情報を保護できる。
PWAを実現させるためにService Worker APIとよばれる技術を用います。これによりウェブページのプリキャッシュが行われ、ページの読み込み時間を減少させることができます。
調べたところ、このService WorkerというものがこのPWA実現のための重要要素になっているみたいですね。
Service Worker APIをigataに埋め込む
APIの実装はここを参考に行いました。やってることとしてはcreate-react-appが元々実装しているService Workerへの登録の機能を呼び出しているだけのようですね。今回はそのserviceWorker.tsという既存のtsファイルを拝借してみました。とはいえ丸々コピペだと、igataのlintとかtsconfとかに色々と駄目だしをもらってしまうので、少しだけ書き換えを行いました。
さいごに
ソースはこちらのGitHubで公開しています。とりあえず今回はServiceWorkerをigataに繋ぎこんだだけなので、まだやるべきことは色々と残っています。
- どっかにウェブアプリをデプロイする
- PWAの恩恵が受けられたことがわかるようなウェブアプリを作成する（現時点ではただのTODOアプリ）
このPart1はPWAの調べ物が中心でしたね。
-
プログレッシブウェブアプリ
Progressive Web Appsの略称です。端的に言うと、ウェブアプリとネイティブアプリそれぞれの利点を引き継いで作成されるウェブアプリのことを言います。とはいえPWAというのはウェブアプリ開発における一種の哲学みたいなものなので、ウェブアプリが特定の要件を満たしているか、あるいは特定の機能を実装している場合に PWAと見なされます。ウェブアプリがPWAとみなされるための原則があります（以下にいくつか示す）。 ↩