Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
Search
Chinen
December 03, 2022
Technology
3
1.3k
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
PWA Night CONFERENCE 2022の登壇資料です。
Chinen
December 03, 2022
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2023
chinen
1
320
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.7k
WWDC2023-Recap-LT
chinen
1
110
Web Push対応状況2023
chinen
0
500
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
130
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
150
frontend-conf-okinawa-2022
chinen
0
410
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
350
クライアントワーク(受託)のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
chinen
2
1.5k
Other Decks in Technology
See All in Technology
クレジットカードを製造する技術
yutadayo
59
29k
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
12k
低コストで実現する社内文書RAG機能を搭載したAIチャットボット開発
takapy
3
580
Authenticator のエミュレーションによる パスキーのログインテスト/nikkei-tech-talk-25
nikkei_engineer_recruiting
0
140
VS CodeでF1〜12キーつかってますか? / Do you use the F1-12 keys in VS Code?
74th
2
280
【shownet.conf_】コンピューティング資源を統合した分散コンテナ基盤の進化
shownet
PRO
0
300
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
1
210
OPENLOGI Company Profile
hr01
0
53k
山手線一周のパフォーマンス改善
suzukahr
0
110
Create Inquiry via Bedrock / 生成 AI で問い合わせ品質は変わるのか?思いついてぱっと作ったものを供養してみる
kazzpapa3
1
200
SQLによるオブザーバビリティの進化とClickHouseの実力
mikimatsumoto
0
150
【shownet.conf_】トポロジ図の歩き方
shownet
PRO
0
370
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
279
34k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
42
6.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
640
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
279
13k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
6
230
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
2
210
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Transcript
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/
None
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で一緒にお仕事しませんか? ご依頼・各職種の採用も募集中