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.5k
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 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
100
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.5k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
150
Web Push対応状況2023
chinen
0
560
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
200
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
210
frontend-conf-okinawa-2022
chinen
0
500
Other Decks in Technology
See All in Technology
大事なのは、AIの精度だけじゃない!〜1円のズレも許されない経理領域とAI〜
jun_nemoto
10
5.1k
他チームへ越境したら、生データ提供ソリューションのクエリ費用95%削減へ繋がった話 / Cross-Team Impact: 95% Off Raw Data Query Costs
yamamotoyuta
0
230
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
1
290
超簡単!RAGアプリケーション構築術
oracle4engineer
PRO
0
120
積み上げられた技術資産と向き合いながら、プロダクトの信頼性をどう守るか
plaidtech
PRO
0
810
エンジニア幼年期の終わり
rebase_engineering
1
110
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
8
65k
人とAIとの共創を夢見た2か月 #共創AIミートアップ / Co-Creation with Keito-chan
kondoyuko
1
680
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
GitHub Coding Agent 概要
kkamegawa
1
1.5k
KMP導⼊において、マネジャーとして考えた事
sansantech
PRO
1
210
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
24k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
890
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Rails Girls Zürich Keynote
gr2m
94
13k
Building Applications with DynamoDB
mza
95
6.4k
Designing for humans not robots
tammielis
253
25k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Code Reviewing Like a Champion
maltzj
523
40k
Thoughts on Productivity
jonyablonski
69
4.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Site-Speed That Sticks
csswizardry
7
590
KATA
mclloyd
29
14k
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で一緒にお仕事しませんか? ご依頼・各職種の採用も募集中