$30 off During Our Annual Pro Sale. View Details »

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

Chinen
December 03, 2022

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

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

Chinen

December 03, 2022
Tweet

More Decks by Chinen

Other Decks in Technology

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