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

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

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

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の登録

manifest.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）2023/1 月に元にもどる 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はホームにインストールしたPWAのみ） • 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：フロントエンドエンジニア兼個人事業主知念昌史 / まぁし Twitter@chocodogmagic • 沖縄でリモートワーク/元・美容師

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

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

どう実装すればPWAなのか

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

Lighthouseを使おう

Lighthouseとは Web ページの品質を向上させるためのオープンソースの自動化ツールです。パブリックまたは認証を必要とする任意の Web ページに対して実行できます。パフォーマンス、アクセシビリティ、プログレッシブ Web

Twitterブラウザ版を検証

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

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

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

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

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

コードを見ていきましょうインストールバナーの表示が変わりました（2022/11）2023/1 月に元にもどる 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プッシュの導入

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