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を活用している_ガジェットアプリの話.pdf
Search
anozon
October 25, 2021
Programming
0
21
PWAを活用している_ガジェットアプリの話.pdf
anozon
October 25, 2021
Tweet
Share
More Decks by anozon
See All by anozon
VSVimの間合いですよ
anozon
0
100
埼玉県の描き方.pdf
anozon
0
34
Other Decks in Programming
See All in Programming
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
390
CSC509 Lecture 04
javiergs
PRO
0
300
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.9k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.7k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
530
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
5k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.3k
作って理解するGOCACHEPROG / Go Conference 2025(Workshop)
mazrean
0
100
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2k
The Cost Of JavaScript in 2023
addyosmani
55
9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Fireside Chat
paigeccino
40
3.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
How STYLIGHT went responsive
nonsquared
100
5.8k
A Tale of Four Properties
chriscoyier
161
23k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Transcript
PWAを活用している ガジェットアプリの話 あのぞん(えるざっぷ)
About me @anozon あのぞん🌏.tsx (@anozon) elzup (elzup) · GitHub 株式会社プランクユニッツ
PWA初心者 React,TypeScript Firebase, hooks で Redux 離れが進んでる
こんなアプリを作っています Mitelop ガジェットツール集 タイマー/Todoリスト /編集点/みどころ記録 プログラミング配信で使えそうなもの 自分でツールとしてほしいもの Web URL: https://mitelop.anozon.me/
GitHub: elzup/mitelop https://github.com/elzup/mitelop
こんなアプリを作っています Mitelop 使っている技術 TypeScript, React Next.js (極力SSG) styled-components 好き Material
UI (そろそろ外せそう) Netlify
かっこいいロゴ作れたと思ったら.. ダークモードで微妙だった デザイン難しい。。。
Mitelop と PWA関連の話 (PCブラウザがメイン) theme-color とフレームの色 (デモ) PWA モードのときだけ挙動や見た目を変える PWA
のローカルでバッグ
theme-color とフレームの色
ちょっとでもコンパクトなガジェットにしたい ブラウザアプリだとヘッダー (フレームの範囲)が多い → このくらいフラットにできた 子ウィンドウ PWA PWA theme色背景色統一 theme-color
とフレームの色
<meta name=”theme-color” /> を変更すると リアルタイムに変わる https://mitelop.anozon.me/color theme-color とフレームの色
これ以上はネイティブじゃないとできなさそう - 長方形以外 - フレームの丸み - ひし形 - 透過ウィンドウ などなどできたら嬉しいので期待
theme-color とフレームの色
PWA モードのときだけ 挙動や見た目を変える
PWAで起動してるときは見た目を変えたい 例: ヘッダーを削除したい PWA モードのときだけ挙動や見た目を変える
CSSはメディアクエリで簡単 @media (display-mode: standalone) を使う PWA モードのときだけ挙動や見た目を変える
CSSはメディアクエリで簡単 PWA モードのときだけ挙動や見た目を変える スッキリ
JSで値を取りたい場合は? PWA モードのときだけ挙動や見た目を変える window.matchMediaが使えます window.matchMedia('(display-mode: standalone)').matches
JSで値を取りたい場合は window.matchMedia('(display-mode: standalone)').matches PWA モードのときだけ挙動や見た目を変える
JSで値を取りたい場合は window.matchMedia('(display-mode: standalone)').matches PWA モードのときだけ挙動や見た目を変える
react-hooks 化した PWA モードのときだけ挙動や見た目を変える const mql = window.matchMedia('(display-mode: standalone)') mql.addEventListener('change',
listener) で変更イベントの検知ができる → useIsStandalone (useIsPwaMode) hooks を作ってみた
react-hooks 化した PWA モードのときだけ挙動や見た目を変える () =>
react-hooks 化したが・・・ PWA モードのときだけ挙動や見た目を変える ここで気づく mediaQuery (今回は ‘display-mode: standalone’) は引数にして汎用的になるん
じゃね? → シンプルだし便利だから既にあるんじゃね? →
react-hooks 化したが・・・ PWA モードのときだけ挙動や見た目を変える ここで気づく mediaQuery (今回は ‘display-mode: standalone’) は引数にして汎用的になるん
じゃね? → シンプルだし便利だから既にあるんじゃね? → ありました react-use https://github.com/streamich/react-use/blob/master/docs/useMedia.md
react-use useMediaのコード 大筋は同じ実装だったが mounted 変数の意味は謎
react-hooks 化したが・・・ PWA モードのときだけ挙動や見た目を変える ということでこんなにシンプルに使えます
PWA のローカルでバッグ (もはや PWA 初心者がどうやってやったのかの話 )
PWA化 は https が要件の1つ PWA のローカルでバッグ ローカルで https を使いたいと気に使っているサービス ngrok
https://ngrok.com/
ngrok で PWA ローカルデバッグしてみた ちゃんとインストールできる PWA のローカルでバッグ
ホワイトアウト問題に悩まされる • 別のプロダクトでホワイトアウトに悩んでる • キャッシュのテンプレ設定しかしていない • 古い js を参照しにいってしまう •
↓正しいパターン? a. 更新ボタンで unregister し新しいのを参照させる b. 常に更新する • next-pwa を使っている • use-service-worker • https://github.com/JCofman/react-hook-use-service-worker
About me @anozon https://twitter.com/anozon https://github.com/elzup PWA初心者 React,TypeScript