PWA開発入門
2023/05/02
kindle unlimited
2018 柴田文彦
https://scrapbox.io/files/64507453e39a757a459a97da.png
目次
第一章 PWAの概要
第二章 PWAのの構成要素
第三章 PWA開発の実際
第四章 PWAのデバッグ
第五章 PWAのデプロイ
第六章 これからのPWA
第一章 PWAの概要
PWA:Google提唱
基礎技術群はW3Cで提唱済み
PWA=「通常のウェブページに、革新的な機能が追加されている」
=革新的な機能部分が動かないブラウザ上では、通常のウェブページとして動くはず。
PWAの目的:ネイティブアプリと同等かそれ以上の使い心地をユーザーに提供する(モバイル/PC)
オフライン操作が可能
可能な限り高速に起動する
インアクティブな状態でも動き、バージョンアップやデータ取得を進めておく
ホーム画面にアイコンを表示できる
ストアを通す必要がなくインストールできる
言い換えると、ストアに並べてもらえない。どこで知ってもらえる?
プッシュ通知可能
バックグラウンドでのデータ同期が可能
第二章 PWAのの構成要素
ブラウザー
メジャーどころは「程度の差こそあれ」PWAをサポートしている
Chrome, FireFoxはほぼフルで対応している。
開発時はChrome, FireFoxのどちらかが良い。PWA専用のデバッグ環境がある。
サーバ
https のドメインが必須。
開発時は、ローカルホストであればhttpでOK。
開発時でも、ローカルマシン上に「ホスティング」した形でないとダメ。
HTMLを直接ブラウザで開く、ではNG。
ServiceWorker
PWAがオフライン時に動くためのJavascriptファイル。
初回DL後、ブラウザ環境にインストールされ、常駐プログラムとして動く。
この「インストール」は、アプリのインストールとは別話。DL=自動インストール。
Manifest
元の意味は「積荷の目録」
PWAの「外装の仕様」を定義する(アイコンとか、アプリ名とか)
JSONファイル
キャッシュ
ブラウザに標準装備されている各キャッシュ機構
ServiceWorkerが自分の処理の記憶媒体として利用する
ストレージ
ブラウザのストレージ機構
LocalStorage, SessionStorage, IndexedDB, WebSQL, Cookie
「アプリの設計」の領域。適切に選び、利用する。
アイコン
ホーム画面、およびスプラッシュスクリーンで大きく出る
スプラッシュスクリーン:アプリ起動時に1〜2秒出る準備画面。
第三章 PWA開発の実際
「レスポンシブデザイン」であることが必然となる。
レスポンシブデザイン:デバイスのサイズに応じた最適な表示がされるデザイン。
Bootstrap, ZurbFoundation といったUIフレームワークが対応手段として人気。
べつに自前CSSでやっても良い。
「ツールバー」を画面の上部に配置するのがセオリー。
CSS:
「メディアクエリ」:デバイスの画面サイズ情報を参照できる。
@media (max-width:600px) { color: red;}
動作環境
Web Server for Chrome を使うのがいちばん簡単
"Accessible on local network" を有効にすれば、LAN上のデバイスからアクセス可能
PWA化:ServiceWorkerとManifestを置くこと
ServiceWorker(SA):
ファイル名はなんでも良い。HTMLファイル上でファイル名を指定する。
SAの先頭では使用するキャッシュを定義するのがセオリー。
キャッシュ=アプリで参照するindex.html等のファイルのキャッシュ。
SAがキャッシュ可能なのは、URL上で自分と同等か配下にあるファイルのみ。(36p)
SAで定義するイベント:
install
SAがブラウザに配置された時点で実行される
アップシェル(アプリの基本構成となるファイル群)をキャッシュする
activate
SAが次回起動した時に実行される
キャッシュの状態を確認し、最新でなければ更新する、がセオリー
fetch
PWA(=HTML/JS)がウェブ上のリソースをリクエストすると発生。
リクエストにSWが割り込み、キャッシュがある場合はそれを返す。
Manifest
定形のJSON
”display”:
"standalone":一般的なアプリと同様の表示。いちばん無難。
"fullscreen":ステータスバーも使わない、全画面表示。
"minimal-ui":ブラウザのナビゲーション機能のための最小限のUI。
"browser":ブラウザのタブの中で機能する。
HTML上にManifest, SAを配置する。
Manifest
<link rel="manifest" href="/manifest.json">
SA
Javascriptで読み込み。(47p)
温度計アプリの動作確認(57p)
RSSリーダーの作成(非PWA)
外部通信が発生するアプリ、としてのサンプル
RSSリーダーのPWA化(88p)
キャッシュ名は、アプリの構成要素が変わる度にバージョン変更したほうが良い。(88p)
SAによるキャッシュは「リクエストがアプリシェルのものか、外部リソースのものか」で振る舞いを分ける(02p)
動作確認(112p)
第四章 PWAのデバッグ
Chromeでデバッグできる
Application > Manifest
"Add to home screen" で、PCブラウザの「インストール」アイコンがでるようになる
変わった?今は確認できない
Application > ServiceWorkers
"ServiceWorkers" 枠のチェックボックス:
Offline:このアプリについてのみ「オフライン状態」にできる
Updated on reload:リロードする度にSWを強制的にアップデートする
Bypass for network:ブラウザのリクエストが(本来通るべき)SAを回避して直接ネットワークにアクセスするようになる
単体のSW:
NetworkRequest:SWの通信をキャプチャ
Update:SWの強制アップデート
Unregister:SWの削除
Status:
現在実行中のSW、および保留中のSWを視認可能。
Application >Storage > ClearSiteData:アプリデータのクリア
Application >Storage > CacheStorage:キャッシュの確認
第五章 PWAのデプロイ
プラットフォーム:firebase(Google)
第六章 これからのPWA
プッシュ通知
SWの機能を用いて実現している
プッシュ通知の表示機能自体は、OSが提供
プッシュ通知の種類:
PushAPI:外部サーバからメッセージを受け取る
NotificationAPI:通知をユーザーに向けて表示する
Chromeを使ったプッシュ通知テスト:環境設定(166p)
Chrome上から通知を発行できる
MicrosoftはストアにPWAを登録できる対応をしている
PWA builder
ウェブサイト。PWA作成のサポート、およびパッケージ化をしてくれる。
読み終えて
読んどいてよかった!
PWAのこと、やっと手に触れて理解できた。
Next.jsとか、本質じゃない。使ってもいいけど。
知らなかった基本的な情報、かき集められた。
Chromeでのデバッグ方法
WebServerForChrome
ローカルネットワークならhttpでPWA利用可能
サービスワーカーの書き方(最低限)
MicrosoftのPWA戦略
これで、手書きのPWA、つくれるぞ!