PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022

PWA Night CONFERENCE 2022の登壇資料です。

Transcript

1. PWA開発を基礎からおさらい 2022/12/3　まぁし（知念）
2. 株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主 知念 昌史 / まぁし Twitter@chocodogmagic • 沖縄でリモートワーク/元・美容師 • 技術コミュニティ運営 ◦ PWA Night（東京）/ v-okinawa（沖縄） • Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/ アクセシビリティ/SEO/パフォーマンス改善/CMS • 最近のハマり ◦ スプラトゥーン3（弓S+17 XP1900） ◦ ポケモン スカーレット
3. https://www.tam-tam.co.jp/
4. 目的：PWA実装のイメージを掴む
5. そもそもPWAとは？ 1. Capable（高い機能を持つ） 　Webの進化で、ネイティブアプリでしかできなかったことがWebで可能に 2. Reliable（信頼性がある） 　ネットワークに関係なく高速、オフラインでも動く 3. Installable（インストール可能） 　ブラウザタブではなくスタンドアロンウィンドウで 　実行される https://web.dev/what-are-pwas/ より引用

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