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

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

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

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

PWA実装のイメージを掴む 

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

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

どう実装すればPWAなのか 

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

Lighthouseを使おう 

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

Twitterブラウザ版を検証  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Step 3  Webプッシュの導入 

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

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

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

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

PWA気になる方は話しましょう！ぜひご連絡を！  Twitter まぁし@chocodogmagic  フォローしてね  PWA Nightは毎月第3水曜日  　　　　　　　　参加してね！  平日9:00〜SpacesでWeb情報発信中！   TAMで一緒にお仕事しませんか？ 
ご依頼・各職種の採用も募集中 

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

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

Chinen

More Decks by Chinen

Other Decks in Technology

Featured

Transcript

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

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

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

PWA実装のイメージを掴む

どう実装すればPWAなのか

Lighthouseを使おう

Twitterブラウザ版を検証

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

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

実装はこれだけ  • manifest.jsonを追加（Android/iOS）  ◦ アイコン画像も用意  • <head> に数行追加（iOS）  • Service

minifest.jsonに登録するアイコンの画像サイズ  • 最低限用意するサイズは192pxと512px  ◦ https://web.dev/install-criteria/ を参照  ◦ その他、対応端末に合わせて複数のサイズを追加する    •

PWAのコアとなる技術要素          • WebページのJavaScriptとは別にバックグラウンドで実行される  • プッシュ通知やキャッシュ操作もService Workerを使って実現

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

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

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

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

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

全部キャッシュすれば良いのでは？      • ブラウザによって最大値が決められている  ◦ https://web.dev/storage-for-the-web/ 参考  ◦ 端末のストレージを圧迫する

Step 3  Webプッシュの導入

Webプッシュの導入（※iOSは2023年予定）      • JavaScriptのAPIを使って独自で実装する  ◦ ユーザー管理・配信の処理なども自前で実装が必要    • Webプッシュを提供するサービスを使う（今回はこちら）

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

まとめ  • まずは既存のWebアプリやWebサイトをPWA化することから始めよう  ◦ すでに作成したアプリやサイトがあればすぐに取り組める   ◦ Next.js/NuxtのようなフレームワークやWordPressのようなCMSならプラグイン有り

PWA気になる方は話しましょう！ぜひご連絡を！  Twitter まぁし@chocodogmagic  フォローしてね  PWA Nightは毎月第3水曜日  　　　　　　　　参加してね！  平日9:00〜SpacesでWeb情報発信中！   TAMで一緒にお仕事しませんか？