Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
Chinen
December 03, 2022
Technology
2
760
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
PWA Night CONFERENCE 2022の登壇資料です。
Chinen
December 03, 2022
Tweet
Share
More Decks by Chinen
See All by Chinen
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
17
frontend-conf-okinawa-2022
chinen
0
130
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
210
クライアントワーク(受託)のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
chinen
2
780
フロントエンドから見たWeb制作の変遷 / PHP Conference Okinawa 2022
chinen
3
1.6k
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
chinen
0
53
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
chinen
1
270
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
chinen
0
830
Shifter staticでREST APIしたい / Shifter Meetup 2020-12-02
chinen
0
580
Other Decks in Technology
See All in Technology
AWS Cloud Forensics & Incident Response
e11i0t_4lders0n
0
360
Cloudflare Workersで動くOG画像生成器
aiji42
1
490
ChatGPT for Hacking
anugrahsr
0
4.4k
金属加工屋の営業マンがSTマイクロで・・・
usashirou
0
160
NGINXENG JP#2 - 4-NGINX-エンジニアリング勉強会
hiropo20
0
120
あつめたデータをどう扱うか
skrb
2
160
SmartHRからOktaへのSCIM連携で作り出すHRドリブンのアカウント管理
jousysmiler
1
120
USB PD で迎える AC アダプター大統一時代
puhitaku
2
1.9k
Periodic Multi-Agent Path Planning
hziwara
0
110
インフラ技術基礎勉強会 開催概要
toru_kubota
0
170
DNS権威サーバのクラウドサービス向けに行われた攻撃および対策 / DNS Pseudo-Random Subdomain Attack and mitigations
kazeburo
5
1.3k
230125 古いタブレットの活用 かーでぃさん
comucal
PRO
0
16k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
In The Pink: A Labor of Love
frogandcode
132
21k
Statistics for Hackers
jakevdp
785
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
Optimizing for Happiness
mojombo
365
64k
Web development in the modern age
philhawksworth
197
9.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
Navigating Team Friction
lara
177
12k
Music & Morning Musume
bryan
37
4.6k
Transcript
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/
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は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で一緒にお仕事しませんか?
ご依頼・各職種の採用も募集中