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
frontend-conf-okinawa-2022
Search
Chinen
November 19, 2022
Technology
0
510
frontend-conf-okinawa-2022
フロントエンドカンファレンス沖縄2022の登壇資料です。
Chinen
November 19, 2022
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
110
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.6k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
580
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
220
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Technology
See All in Technology
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
120
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
100
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
140
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
210
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
15k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
8.3k
Connect 100+を支える技術
kanyamaguc
0
190
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
6.7k
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
330
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
14k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
It's Worth the Effort
3n
185
28k
4 Signs Your Business is Dying
shpigford
184
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Thoughts on Productivity
jonyablonski
69
4.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Raft: Consensus for Rubyists
vanstee
140
7k
Balancing Empowerment & Direction
lara
1
420
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Transcript
PWAをインストール しやすくするための実装 2022/11/19 まぁし(知念)
株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 知念 昌史 / まぁし Twitter@chocodogmagic •
沖縄でリモートワーク/元・美容師 • 技術コミュニティ運営 ◦ PWA Night(東京)/ v-okinawa(沖縄) • Vue.js/Nuxt/Jamstack/セマンティックHTML/ アクセシビリティ/SEO/パフォーマンス改善/CMS • 最近のハマり:スプラトゥーン3(弓ウデマエS+17) • 昨日発売のポケモン新作は来週やる!
PWA実装してますか?
PWAとは・・・ 1. Capable(高い機能を持つ) Webの進化で、ネイティブでしかできなかったことがWebで可能に 2. Reliable(信頼性がある) ネットワークに関係なく、高速で信頼性が高い、オフラインでも動く 3.
Installable(インストール可能) ブラウザタブではなくスタンドアロンウィンドウで実行される
PWAとは・・・ 1. Capable(高い機能を持つ) Webの進化で、ネイティブでしかできなかったことがWebで可能に 2. Reliable(信頼性がある) ネットワークに関係なく、高速で信頼性が高い、オフラインでも動く 3.
Installable(インストール可能) ブラウザタブではなくスタンドアロンウィンドウで実行される
PWAをインストール可能にする基本的な実装方法 これだけ! • <head> に数行追加 (iOS) • manifest.jsonを追加 (Android) •
ServiceWorkerの登録
具体的な実装方法はPWA Night で!
PWAをインストール可能にする基本的な実装方法 これだけ! • <head> に数行追加 (iOS) • manifest.jsonを追加 (Android) •
ServiceWorkerの登録 なんだけど・・・
PWA実装しただけでは インストールされにくい
理由その1:PCでインストールがわかりづらい https://mobile.twitter.com/ から引用
理由その2:iPhoneでインストールがわかりづらい
理由その3:Androidのインストール怖い この違い わかりますか・・? ※とてもお世話になっている https://yakkun.com/ から引用
ユーザーがわかりやすいようにしよう ※一般人はPWAとアプリの違いはわかりません
Richer PWA installation UI ※Androidのみ 例)Twitter https://mobile.twitter.com/ から引用
まだハードル高い
説明ページを作ろう • ダウンロードするメリットを説明 • インストールの仕方を書く ◦ PC/iOS/Andoidで説明を分ける ◦ PWAの画面スクショがあるとなお良い
◦ iOSは共有メニューからインストールする 流れを説明したスクショが必須 • 注意:インストール必須な要件にしない PWAはWebサイトで動くもの https://kan-teki.com/guide/details/ から引用
好きなタイミングでインストールできるように Androidのmini infobarは非表示にする PC/Androidでは別途ダウンロード用のボ タンを用意し、クリックでインストールメ ニューが開くようにする
コードを見ていきましょう ※Sampleコードは公開しています https://github.com/chinen-octtn/pwaBeforeInstall
mini-infobar https://deploy-preview-5--pwa-before-install.netlify.app/
Richer PWA installation UI https://deploy-preview-6--pwa-before-install.netlify.app/
ダウンロードボタン https://pwa-before-install.netlify.app/
まとめ • 全部インストールさせようとするのはよくない ユーザーにメリットを説明する・ユーザーが選べるようにする • Webブラウザで動くことが前提 PCでもスマホでも、ブラウザでもスタンドアローンでも使える ホームにインストール前提の要件にしない
• 使いやすいWebを作ろう!!!
フロントエンドで話しましょう!ぜひご連絡を! Twitter まぁし@chocodogmagic フォローしてね PWA Night CONFERENCE 2022 12/3(土) 参加してね!
平日9:00〜SpacesでWeb情報発信中! TAMで一緒にお仕事しませんか? ご依頼・各職種の採用も募集中