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.2k
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
280
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.1k
WWDC2023-Recap-LT
chinen
1
85
Web Push対応状況2023
chinen
0
430
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
110
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
120
frontend-conf-okinawa-2022
chinen
0
350
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
300
クライアントワーク(受託)のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
chinen
2
1.3k
Other Decks in Technology
See All in Technology
Cracking the KubeCon CfP
inductor
2
170
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
470
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
350
データベース02: データベースの概念
trycycle
0
130
On Your Data を超えていく!
hirotomotaguchi
2
620
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
Databricks における 『MLOps』
databricksjapan
2
160
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
2
150
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
0
190
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
810
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Rails Girls Zürich Keynote
gr2m
91
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Clear Off the Table
cherdarchuk
83
310k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
Side Projects
sachag
451
41k
Docker and Python
trallard
33
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Agile that works and the tools we love
rasmusluckow
324
20k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.5k
How to train your dragon (web standard)
notwaldorf
72
5.1k
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で一緒にお仕事しませんか? ご依頼・各職種の採用も募集中