Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 まぁし(知念)


  2. 株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 
 知念 昌史 / まぁし [email protected]
 •

    沖縄でリモートワーク/元・美容師
 • 技術コミュニティ運営
 ◦ PWA Night(東京)/ v-okinawa(沖縄) 
 • Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/
 アクセシビリティ/SEO/パフォーマンス改善/CMS
 • 最近のハマり:スプラトゥーン3(弓ウデマエS+17)
 • ポケモン スカーレット始めました

  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. minifest.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)
 https://deploy-preview-1--count-to-3.netlify.app/

  20. None
  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は2023年予定)
 
 
 • 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で一緒にお仕事しませんか?


    ご依頼・各職種の採用も募集中