Slide 1
Slide 1 text
PWA開発を基礎からおさらい
2022/12/3 まぁし（知念）
Slide 2
Slide 2 text
株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主
知念 昌史 / まぁし Twitter@chocodogmagic
● 沖縄でリモートワーク/元・美容師
● 技術コミュニティ運営
○ PWA Night（東京）/ v-okinawa（沖縄）
● Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/
アクセシビリティ/SEO/パフォーマンス改善/CMS
● 最近のハマり
○ スプラトゥーン3（弓S+17 XP1900）
○ ポケモン スカーレット
Slide 3
Slide 3 text
https://www.tam-tam.co.jp/
Slide 4
Slide 4 text
目的：PWA実装のイメージを掴む
Slide 5
Slide 5 text
そもそもPWAとは？
1. Capable（高い機能を持つ）
Webの進化で、ネイティブアプリでしかできなかったことがWebで可能に
2. Reliable（信頼性がある）
ネットワークに関係なく高速、オフラインでも動く
3. Installable（インストール可能）
ブラウザタブではなくスタンドアロンウィンドウで
実行される
https://web.dev/what-are-pwas/ より引用
Slide 6
Slide 6 text
本質的にPWAは単なるWebアプリ
PWAはユーザーが好むWeb体験の機会を提供します。プログレッシブエンハンス
メントを使用すると、最新のブラウザで新しい機能が有効になります。新しい機
能が利用できない場合でも、ユーザーは主なエクスペリエンスを楽しめます。
単一のコードベースで、誰でも、どこでも、どんなデバイスでも、構築したもの
をインストールできるようにします。
より良いWeb体験の提供がPWAの本質
Slide 7
Slide 7 text
どう実装すればPWAなのか
Slide 8
Slide 8 text
PWAのチェックリスト
https://web.dev/pwa-checklist/ より引用
GoogleがPWAのチェックリストを用意してい
る。こちらに沿って開発すればOK。
とはいえ、自分の作ったものがチェックリスト
の基準をクリアしているのか判断は難しい。
Slide 9
Slide 9 text
Lighthouseを使おう
Slide 10
Slide 10 text
Lighthouseとは
Web ページの品質を向上させるためのオープン
ソースの自動化ツールです。パブリックまたは
認証を必要とする任意の Web ページに対して実
行できます。パフォーマンス、アクセシビリ
ティ、プログレッシブ Web アプリ、SEO などの
監査があります。
https://developer.chrome.com/docs/lighthouse/ より引用
Slide 11
Slide 11 text
Twitterブラウザ版を検証
Slide 12
Slide 12 text
これから話すこと
1. Webアプリをインストール可能にする
LighthouseのPWA項目をクリアする
2. Service Workerを使ったキャッシュ
オフラインでも表示、操作ができるようにする
3. Webプッシュの導入
プッシュ通知の実装サンプル
Slide 13
Slide 13 text
Step 1
Webアプリをインストール可能にする
Slide 14
Slide 14 text
Webアプリをインストール可能にする
● インストールすると他のアプリと同様にホーム画面に追加される
○ アプリ切り替え画面（タスク切り替え）でアプリとして認識される
○ アプリ一覧のドロワーや設定・管理画面でもアプリとして追加される
● アドレスバーやブラウザメニューを表示しない
○ ネイティブアプリのようなUI
PWA実装するとき一番最初に取り組むのがこの機能
Slide 15
Slide 15 text
SampleコードはGitHubに公開しています
https://github.com/chinen-octtn/Count-to-3
3秒ぴったりで止めるミニゲーム
https://count-to-3.netlify.app/
ブランチごとに実装しています。
main：ブラウザのみ
step01：ホームにインストール
step02：オフライン対応
step03：プッシュ通知
Slide 16
Slide 16 text
実装はこれだけ
● manifest.jsonを追加（Android/iOS）
○ アイコン画像も用意
● に数行追加（iOS）
● Service Workerの登録
Slide 17
Slide 17 text
manifest.jsonに登録するアイコンの画像サイズ
● 最低限用意するサイズは192pxと512px
○ https://web.dev/install-criteria/ を参照
○ その他、対応端末に合わせて複数のサイズを追加する
● 通常のアイコンと、maskable iconsの設定が必要
○ https://web.dev/maskable-icon/ を参照
○ maskable iconsがなくてもインストール自体は可能だが、
Lighthouseのチェックは通らない
Slide 18
Slide 18 text
PWAのコアとなる技術要素
● WebページのJavaScriptとは別にバックグラウンドで実行される
● プッシュ通知やキャッシュ操作もService Workerを使って実現
● HTTPSの環境が必要（localhostは例外）
Service Workerとは
WebブラウザとWebサーバーの間でプロキシとして機能する特殊なJavaScriptア
セットです。オフラインでのアクセスを提供することで信頼性を向上させ、ペー
ジのパフォーマンスを向上させることを目的としています。
https://developer.chrome.com/docs/workbox/service-worker-overview/ より引用
Slide 19
Slide 19 text
コードを見ていきましょう
インストールバナーの表示が
変わりました（2022/11）2023/1
月に元にもどる
https://deploy-preview-1--count-to-3.netlify.app/
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
iPhoneはインストール手順が違う
Slide 22
Slide 22 text
これでホーム画面への追加はOK
Slide 23
Slide 23 text
ただし、ユーザーがインストールするとは限らない
フロントエンドカンファレンス沖縄 2022で「PWAをインストールしやすくする
ための実装」というタイトルで登壇しました。インストールバナーについて解説
しています。ユーザーの使い勝手が良くなるよう追求していきましょう。
https://speakerdeck.com/chinen/frontend-conf-okinawa-2022
Slide 24
Slide 24 text
Step 2
Service Workerを使ったキャッシュ
Slide 25
Slide 25 text
Service Workerを使ったキャッシュ
キャッシュを活用することで、パフォーマンスの向上やオフラインでの対応がで
きます。（サーバーキャッシュやブラウザキャッシュとは別管理）
Service Workerのスクリプト内に直接書くのは複雑なため、今回はGoogle製のラ
イブラリ「Workbox」を使用します。
Slide 26
Slide 26 text
コードを見ていきましょう
オフラインでも動作します
https://deploy-preview-2--count-to-3.netlify.app/
Slide 27
Slide 27 text
プリキャッシュとランタイムキャッシュ
プリキャッシュ（Precaching）
Service Workerの登録時にキャッシュする。指定したファイルをキャッシュでき
るため、他のページのファイルも事前にキャッシュできる。
※全ページ共通のもの、長期間更新がないとわかっているものに最適
ランタイムキャッシュ（Runtime caching）
ページのリクエストがあった時にキャッシュする。
有効期限やキャッシュ戦略（ネットワーク優先やキャッシュ優先など）
の設定ができる。
Slide 28
Slide 28 text
全部キャッシュすれば良いのでは？
● ブラウザによって最大値が決められている
○ https://web.dev/storage-for-the-web/ 参考
○ 端末のストレージを圧迫する
○ 大量のファイルは通信量にも影響する
● 更新したはずのページが更新されないなどの不具合が起こる可能性
○ キャッシュ削除タイミングを間違えると古いキャッシュのまま表示される
メリット・デメリットを考えて使おう
Slide 29
Slide 29 text
Step 3
Webプッシュの導入
Slide 30
Slide 30 text
Webプッシュの導入（※iOSはホームにインストールしたPWAのみ）
● JavaScriptのAPIを使って独自で実装する
○ ユーザー管理・配信の処理なども自前で実装が必要
● Webプッシュを提供するサービスを使う（今回はこちら）
○ 比較的簡単に導入可能（配信用の管理画面なども使える）
○ サービスによってはAPIを提供しているものもあり、
CRMツールと連携できる
Slide 31
Slide 31 text
OneSignal：プッシュ通知サービス
● 無料で簡単に始めることが可能
● SDKをダウンロードしてコードを埋め込むだけでOK
● 管理画面にログインして、登録ユーザーのセグメントやプッシュ通知の配信
スケジュールを設定できる
https://onesignal.com/
Slide 32
Slide 32 text
コードを見ていきましょう
https://deploy-preview-3--count-to-3.netlify.app/
Slide 33
Slide 33 text
まとめ
● まずは既存のWebアプリやWebサイトをPWA化することから始めよう
○ すでに作成したアプリやサイトがあればすぐに取り組める
○ Next.js/NuxtのようなフレームワークやWordPressのようなCMSならプラグイン有り
● PWAの実装は小さく始めることができる
○ 必要な機能だけの実装でもOK
○ ホームに追加する機能だけでも良いし、オフライン対応だけでも良い
PWAの開発に興味を持ったら、
ぜひPWA Night通常回にも遊びにきてください！毎月第3水曜日！
Slide 34
Slide 34 text
PWA気になる方は話しましょう！ぜひご連絡を！
Twitter まぁし@chocodogmagic
フォローしてね
PWA Nightは毎月第3水曜日
参加してね！
平日9:00〜SpacesでWeb情報発信中！
TAMで一緒にお仕事しませんか？
ご依頼・各職種の採用も募集中