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
480
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
79
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.3k
MTDDC Meetup TOKYO 2023
chinen
2
360
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.9k
WWDC2023-Recap-LT
chinen
1
140
Web Push対応状況2023
chinen
0
550
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
180
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
190
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Technology
See All in Technology
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
350
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
170
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
400
OPENLOGI Company Profile for engineer
hr01
1
20k
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1.1k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
210
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.2k
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
120
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
190
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.5k
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
290
Featured
See All Featured
Producing Creativity
orderedlist
PRO
344
40k
Side Projects
sachag
452
42k
The Invisible Side of Design
smashingmag
299
50k
Speed Design
sergeychernyshev
27
810
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Embracing the Ebb and Flow
colly
84
4.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Designing for humans not robots
tammielis
250
25k
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で一緒にお仕事しませんか? ご依頼・各職種の採用も募集中