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

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

Transcript

1. PWA開発を基礎からおさらい
   2022/12/3　まぁし（知念）
   

   View Slide

2. 株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主
   知念 昌史 / まぁし Twitter@chocodogmagic
   ● 沖縄でリモートワーク/元・美容師
   ● 技術コミュニティ運営
   ○ PWA Night（東京）/ v-okinawa（沖縄）
   ● Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/
   アクセシビリティ/SEO/パフォーマンス改善/CMS
   ● 最近のハマり
   ○ スプラトゥーン3（弓S+17 XP1900）
   ○ ポケモン スカーレット
   

   View Slide

3. https://www.tam-tam.co.jp/
   

   View Slide

4. 目的：PWA実装のイメージを掴む
   

   View Slide

5. そもそもPWAとは？
   1. Capable（高い機能を持つ）
   　Webの進化で、ネイティブアプリでしかできなかったことがWebで可能に
   2. Reliable（信頼性がある）
   　ネットワークに関係なく高速、オフラインでも動く
   3. Installable（インストール可能）
   　ブラウザタブではなくスタンドアロンウィンドウで
   　実行される
   https://web.dev/what-are-pwas/ より引用

   

   View Slide

6. 本質的にPWAは単なるWebアプリ
   PWAはユーザーが好むWeb体験の機会を提供します。プログレッシブエンハンス
   メントを使用すると、最新のブラウザで新しい機能が有効になります。新しい機
   能が利用できない場合でも、ユーザーは主なエクスペリエンスを楽しめます。
   単一のコードベースで、誰でも、どこでも、どんなデバイスでも、構築したもの
   をインストールできるようにします。
   より良いWeb体験の提供がPWAの本質
   

   View Slide

7. どう実装すればPWAなのか
   

   View Slide

8. PWAのチェックリスト
   https://web.dev/pwa-checklist/ より引用
   GoogleがPWAのチェックリストを用意してい
   る。こちらに沿って開発すればOK。
   とはいえ、自分の作ったものがチェックリスト
   の基準をクリアしているのか判断は難しい。
   

   View Slide

9. Lighthouseを使おう
   

   View Slide

10. Lighthouseとは
    Web ページの品質を向上させるためのオープン
    ソースの自動化ツールです。パブリックまたは
    認証を必要とする任意の Web ページに対して実
    行できます。パフォーマンス、アクセシビリ
    ティ、プログレッシブ Web アプリ、SEO などの
    監査があります。
    https://developer.chrome.com/docs/lighthouse/ より引用
    

    View Slide

11. Twitterブラウザ版を検証
    

    View Slide

12. これから話すこと
    1. Webアプリをインストール可能にする
    　LighthouseのPWA項目をクリアする
    2. Service Workerを使ったキャッシュ
    　オフラインでも表示、操作ができるようにする
    3. Webプッシュの導入
    　プッシュ通知の実装サンプル
    

    View Slide

13. Step 1
    Webアプリをインストール可能にする
    

    View Slide

14. Webアプリをインストール可能にする
    ● インストールすると他のアプリと同様にホーム画面に追加される
    ○ アプリ切り替え画面（タスク切り替え）でアプリとして認識される
    ○ アプリ一覧のドロワーや設定・管理画面でもアプリとして追加される
    ● アドレスバーやブラウザメニューを表示しない
    ○ ネイティブアプリのようなUI
    PWA実装するとき一番最初に取り組むのがこの機能
    

    View Slide

15. SampleコードはGitHubに公開しています
    https://github.com/chinen-octtn/Count-to-3
    3秒ぴったりで止めるミニゲーム
    https://count-to-3.netlify.app/
    ブランチごとに実装しています。
    main：ブラウザのみ
    step01：ホームにインストール
    step02：オフライン対応
    step03：プッシュ通知
    

    View Slide

16. 実装はこれだけ
    ● manifest.jsonを追加（Android/iOS）
    ○ アイコン画像も用意
    ● に数行追加（iOS）
    ● Service Workerの登録
    

    View Slide

17. manifest.jsonに登録するアイコンの画像サイズ
    ● 最低限用意するサイズは192pxと512px
    ○ https://web.dev/install-criteria/ を参照
    ○ その他、対応端末に合わせて複数のサイズを追加する
    ● 通常のアイコンと、maskable iconsの設定が必要
    ○ https://web.dev/maskable-icon/ を参照
    ○ maskable iconsがなくてもインストール自体は可能だが、
    Lighthouseのチェックは通らない
    

    View Slide

18. PWAのコアとなる技術要素
    ● WebページのJavaScriptとは別にバックグラウンドで実行される
    ● プッシュ通知やキャッシュ操作もService Workerを使って実現
    ● HTTPSの環境が必要（localhostは例外）
    Service Workerとは
    WebブラウザとWebサーバーの間でプロキシとして機能する特殊なJavaScriptア
    セットです。オフラインでのアクセスを提供することで信頼性を向上させ、ペー
    ジのパフォーマンスを向上させることを目的としています。
    https://developer.chrome.com/docs/workbox/service-worker-overview/ より引用
    

    View Slide

19. コードを見ていきましょう
    インストールバナーの表示が
    変わりました（2022/11）2023/1
    月に元にもどる
    https://deploy-preview-1--count-to-3.netlify.app/
    

    View Slide

20. View Slide

21. iPhoneはインストール手順が違う
    

    View Slide

22. これでホーム画面への追加はOK
    

    View Slide

23. ただし、ユーザーがインストールするとは限らない
    フロントエンドカンファレンス沖縄 2022で「PWAをインストールしやすくする
    ための実装」というタイトルで登壇しました。インストールバナーについて解説
    しています。ユーザーの使い勝手が良くなるよう追求していきましょう。
    https://speakerdeck.com/chinen/frontend-conf-okinawa-2022
    

    View Slide

24. Step 2
    Service Workerを使ったキャッシュ
    

    View Slide

25. Service Workerを使ったキャッシュ
    キャッシュを活用することで、パフォーマンスの向上やオフラインでの対応がで
    きます。（サーバーキャッシュやブラウザキャッシュとは別管理）
    Service Workerのスクリプト内に直接書くのは複雑なため、今回はGoogle製のラ
    イブラリ「Workbox」を使用します。
    

    View Slide

26. コードを見ていきましょう
    オフラインでも動作します
    https://deploy-preview-2--count-to-3.netlify.app/
    

    View Slide

27. プリキャッシュとランタイムキャッシュ
    プリキャッシュ（Precaching）
    Service Workerの登録時にキャッシュする。指定したファイルをキャッシュでき
    るため、他のページのファイルも事前にキャッシュできる。
    ※全ページ共通のもの、長期間更新がないとわかっているものに最適
    ランタイムキャッシュ（Runtime caching）
    ページのリクエストがあった時にキャッシュする。
    有効期限やキャッシュ戦略（ネットワーク優先やキャッシュ優先など）
    の設定ができる。
    

    View Slide

28. 全部キャッシュすれば良いのでは？
    ● ブラウザによって最大値が決められている
    ○ https://web.dev/storage-for-the-web/ 参考
    ○ 端末のストレージを圧迫する
    ○ 大量のファイルは通信量にも影響する
    ● 更新したはずのページが更新されないなどの不具合が起こる可能性
    ○ キャッシュ削除タイミングを間違えると古いキャッシュのまま表示される
    メリット・デメリットを考えて使おう
    

    View Slide

29. Step 3
    Webプッシュの導入
    

    View Slide

30. Webプッシュの導入（※iOSはホームにインストールしたPWAのみ）
    ● JavaScriptのAPIを使って独自で実装する
    ○ ユーザー管理・配信の処理なども自前で実装が必要
    ● Webプッシュを提供するサービスを使う（今回はこちら）
    ○ 比較的簡単に導入可能（配信用の管理画面なども使える）
    ○ サービスによってはAPIを提供しているものもあり、
    CRMツールと連携できる
    

    View Slide

31. OneSignal：プッシュ通知サービス
    ● 無料で簡単に始めることが可能
    ● SDKをダウンロードしてコードを埋め込むだけでOK
    ● 管理画面にログインして、登録ユーザーのセグメントやプッシュ通知の配信
    スケジュールを設定できる
    https://onesignal.com/
    

    View Slide

32. コードを見ていきましょう
    https://deploy-preview-3--count-to-3.netlify.app/
    

    View Slide

33. まとめ
    ● まずは既存のWebアプリやWebサイトをPWA化することから始めよう
    ○ すでに作成したアプリやサイトがあればすぐに取り組める
    ○ Next.js/NuxtのようなフレームワークやWordPressのようなCMSならプラグイン有り
    ● PWAの実装は小さく始めることができる
    ○ 必要な機能だけの実装でもOK
    ○ ホームに追加する機能だけでも良いし、オフライン対応だけでも良い
    PWAの開発に興味を持ったら、
    ぜひPWA Night通常回にも遊びにきてください！毎月第3水曜日！
    

    View Slide

34. PWA気になる方は話しましょう！ぜひご連絡を！
    Twitter まぁし@chocodogmagic
    フォローしてね

    PWA Nightは毎月第3水曜日
    　　　　　　　　参加してね！
    平日9:00〜SpacesでWeb情報発信中！
    TAMで一緒にお仕事しませんか？
    ご依頼・各職種の採用も募集中
    

    View Slide