UdemyでPWA入門をした #JavaScript

クリエイティブ寄りな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等のライブラリにも手を出してみたいと思います。