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.4k
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
53
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2k
MTDDC Meetup TOKYO 2023
chinen
2
350
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.8k
WWDC2023-Recap-LT
chinen
1
130
Web Push対応状況2023
chinen
0
530
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
160
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
170
frontend-conf-okinawa-2022
chinen
0
460
Other Decks in Technology
See All in Technology
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
Password-less Journey - パスキーへの移行を見据えたユーザーの準備 @ AXIES 2024
ritou
3
1.4k
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
24
11k
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
0
110
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1k
Wantedly での Datadog 活用事例
bgpat
1
410
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
120
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
160
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
Amazon Kendra GenAI Index 登場でどう変わる? 評価から学ぶ最適なRAG構成
naoki_0531
0
100
第3回Snowflake女子会_LT登壇資料(合成データ)_Taro_CCCMK
tarotaro0129
0
180
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
33
1.5k
Embracing the Ebb and Flow
colly
84
4.5k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
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で一緒にお仕事しませんか? ご依頼・各職種の採用も募集中