クリエイティブ寄りなWeb制作会社でも、**Progressive Web Apps（以下、PWA）**の対応を行う案件が増えてきたようです。
弊社では、Nuxt.jsで開発する案件が多く、PWA導入の際は「pwa-module」を使用しているようですが、
私感としては、PWAの知見がないのに、ラッピングされたツールを使用したくありません。
そこで、「そもそもPWAって何だ？」を学べる教材を探していたところ、Udemyの**『Progressive Web Apps (PWA) - The Complete Guide』**に出会いました。
コースの概要
- セールで¥1,300の時に購入しました。
- 言語は、英語です。字幕も、自動翻訳のみです。
- 制作済みのプロジェクト**「写真投稿アプリ（pwagram）**に対してPWAを導入するために、
Service Workerを記述していきます。 -
Workbox等のライブラリに頼らず、スクラッチでの開発です。（後半に少しだけ、Workboxの紹介はあります） -
Single page Applicationをベースにしていないので、その辺りの知見がない方でも学べます。 - 既存プロジェクトに対しての実装のため、書くよりも、観るのほうが適しているコースかもしれません。
- 課題もありますが、
CacheAPIのセクションだけでした。 -
CacheAPI、IndexedDB、Background Sync、Web Pushがメインの学習項目。 - Promise/Fetch API や レスポンシブデザイン についてのセクションもあるが、そこは常識なので飛ばした。
- データベースやストレージ、アプリサーバ等は、
FireBaseを利用する。
セクションの流れ
ざっくりメモのため、気になる方は受講を推奨します。
Getting Started
-
ネイティブアプリは、様々なデバイスの機能にアクセス可能である一方、アプリそのものをユーザにリーチしづらい。
-
従来のWebアプリは、アプリそのものをユーザーにリーチしやすい一方、デバイスの機能へのアクセスにはかなりの制限がある。
-
PWAなら、どちらのメリットも手に入れることができる。
-
PWAの特徴としては、Cachingを利用したオフライン対応、モバイルライクなWeb Push、ホームアイコンへの追加等がある。もちろん、デバイス依存のAPIも使える。
Understanding the App Manifest
アプリケーションの情報をmanifest.jsonとして設定する必要がある。
| key | description |
|---|---|
| name | スプラッシュ画面に表示されるアプリ名 |
| short_name | ホーム画面のアイコン下に表示されるアプリ名 |
| description | アプリの説明 |
| start_url | ホーム画面のアイコンをクリックした際、初期表示されるページ |
| scope | PWAを適用する範囲 |
| display | 表示モードの指定 |
| background_color | スプラッシュ画面等の背景色 |
| theme_color | スイッチャーのナビゲーション背景色等 |
| dir | テキストの書字方向 |
| lang | 使用言語 |
| orientation | デフォルトの向き。強制力を持たせるプロパティもある |
| icons | アプリのアイコン情報（src,type,size）を指定する |
{
"name": "Sweaty - Activity Tracker",
"short_name": "Sweaty",
"description": "Keep running until you're super sweaty!",
"start_url": "./index.html" ,
"scope": ".",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#3F51B5",
"dir": "ltr",
"orientation": "portrait-primary",
"icons": [{
"src": "/src/imags/icon/app-icon-48x48.png",
"type": "image/png",
"sizes": "48x48"
},{
"src": "/src/imags/icon/app-icon-96x96.png",
"type": "image/png",
"sizes": "96x96"
}],
}
The Service Workers
JavaScriptはシングルスレッドを前提にした言語であるが、Service Workerは別スレッドで動作する。
ページと外部の通信に割り込む機能があり、プログラマブルなProxyとして動作する。
また、イベント駆動型のWorkerであり、HTMLページから切り離されており、タブ・ブラウザを閉じた後でも動作し続ける。
※ https もしくは localhost 上でしか動作しない。
ライフサイクルについては複雑で、動画のみでは理解しづらい部分があった。
したがって、公式ドキュメントを並行して読んだ。
Service Workers - Caching / Service Workers - Advanced Caching
Cache APIの戦略的利用のためのセクション。
後のWorkboxで登場する[workbox.strategies.**]をスクラッチで書く。（strategies）
Promiseや条件分岐が多発するので、「これを毎度のこと記述するのは辛いな〜」という印象だった。
一方で、かなり丁寧に説明してくれるので、このコースで最も勉強になるセクションだった。
IndexedDB and Dynamic Data
ブラウザ内部のKey-ValueなDatabase。
LocalStorageの場合は、文字列のみしか保存できないため、JSONを保存する場合はstringifyする必要があったが、IndexedDBはJSON形式で保存できる。
また、大容量であり、ファイルをBlob形式で保存することも可能。
さらに、LocalStorageは同期型だが、IndexedDBは非同期型。したがって、ファイルサイズが大きい動画等をローディング画面等の間に読み込むことが可能になる。
ちなみに、このコースでは、ユーザーの投稿データをIndexedDBにJSON形式で格納していた。
Background Sync
ネットワークがオフラインの際に、ユーザーが投稿した場合、通常のアプリケーションならリクエストに失敗する。
Background Syncを利用すれば、ネットワークに再接続された際に、再度リクエストを送信することが可能。
当たり前ではあるが、Web Application側で、sync.registerする必要がある。
Web Push Notifications
PWAの知見が少ない方でも、この機能についてはご存知の方が多い。
一方で、Push ServerやらPermission等を考慮する必要があり、実装コストは高そうだった。
本件の詳しい内容は、[改訂版] Web Pushでブラウザにプッシュ通知を送ってみるが詳しいので、割愛する。
所感
PWAでできることは様々な記事で紹介されているので理解が容易い。また、ドキュメントも充実しているため、不明点の検索・理解も容易い。
しかし、プロジェクトベース、コードベースで学べるような記事がないため、初めの一歩を踏み出しづらかった。
そのような点では、今回のコースは非常に実りがありました。
基礎の理解を終えた上で、Workbox等のライブラリにも手を出してみたいと思います。