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
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
iOSでSVG画像を扱う
kishikawakatsumi
0
170
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
CSC509 Lecture 06
javiergs
PRO
0
270
Introduce Hono CLI
yusukebe
6
3.1k
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
Go言語の特性を活かした公式MCP SDKの設計
hond0413
2
500
What's new in Spring Modulith?
olivergierke
1
170
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
9
1.5k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
280
Pythonに漸進的に型をつける
nealle
1
120
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Speed Design
sergeychernyshev
32
1.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Producing Creativity
orderedlist
PRO
347
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Agile that works and the tools we love
rasmusluckow
331
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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