PWAを活用している_ガジェットアプリの話.pdf

Transcript

1. PWAを活用している ガジェットアプリの話 あのぞん(えるざっぷ)
2. About me @anozon あのぞん🌏.tsx (@anozon) elzup (elzup) · GitHub 株式会社プランクユニッツ PWA初心者 React,TypeScript Firebase, hooks で Redux 離れが進んでる
3. こんなアプリを作っています Mitelop ガジェットツール集 タイマー/Todoリスト /編集点/みどころ記録 プログラミング配信で使えそうなもの 自分でツールとしてほしいもの Web URL: https://mitelop.anozon.me/ GitHub: elzup/mitelop https://github.com/elzup/mitelop
4. こんなアプリを作っています Mitelop 使っている技術 TypeScript, React Next.js (極力SSG) styled-components 好き Material UI (そろそろ外せそう) Netlify
5. かっこいいロゴ作れたと思ったら.. ダークモードで微妙だった デザイン難しい。。。
6. Mitelop と PWA関連の話 (PCブラウザがメイン) theme-color とフレームの色 (デモ) PWA モードのときだけ挙動や見た目を変える PWA のローカルでバッグ
7. theme-color とフレームの色
8. ちょっとでもコンパクトなガジェットにしたい ブラウザアプリだとヘッダー (フレームの範囲)が多い → このくらいフラットにできた 子ウィンドウ PWA PWA theme色背景色統一 theme-color とフレームの色
9. <meta name=”theme-color” /> を変更すると リアルタイムに変わる https://mitelop.anozon.me/color theme-color とフレームの色
10. これ以上はネイティブじゃないとできなさそう - 長方形以外 - フレームの丸み - ひし形 - 透過ウィンドウ などなどできたら嬉しいので期待 theme-color とフレームの色
11. PWA モードのときだけ 挙動や見た目を変える
12. PWAで起動してるときは見た目を変えたい 例: ヘッダーを削除したい PWA モードのときだけ挙動や見た目を変える
13. CSSはメディアクエリで簡単 @media (display-mode: standalone) を使う PWA モードのときだけ挙動や見た目を変える
14. CSSはメディアクエリで簡単 PWA モードのときだけ挙動や見た目を変える スッキリ
15. JSで値を取りたい場合は？ PWA モードのときだけ挙動や見た目を変える window.matchMediaが使えます window.matchMedia('(display-mode: standalone)').matches
16. JSで値を取りたい場合は window.matchMedia('(display-mode: standalone)').matches PWA モードのときだけ挙動や見た目を変える
17. JSで値を取りたい場合は window.matchMedia('(display-mode: standalone)').matches PWA モードのときだけ挙動や見た目を変える
18. react-hooks 化した PWA モードのときだけ挙動や見た目を変える const mql = window.matchMedia('(display-mode: standalone)') mql.addEventListener('change', listener) で変更イベントの検知ができる → useIsStandalone (useIsPwaMode) hooks を作ってみた
19. react-hooks 化した PWA モードのときだけ挙動や見た目を変える () =>
20. react-hooks 化したが・・・ PWA モードのときだけ挙動や見た目を変える ここで気づく mediaQuery (今回は ‘display-mode: standalone’) は引数にして汎用的になるん じゃね？ → シンプルだし便利だから既にあるんじゃね？ →
21. react-hooks 化したが・・・ PWA モードのときだけ挙動や見た目を変える ここで気づく mediaQuery (今回は ‘display-mode: standalone’) は引数にして汎用的になるん じゃね？ → シンプルだし便利だから既にあるんじゃね？ → ありました react-use https://github.com/streamich/react-use/blob/master/docs/useMedia.md
22. react-use useMediaのコード 大筋は同じ実装だったが mounted 変数の意味は謎
23. react-hooks 化したが・・・ PWA モードのときだけ挙動や見た目を変える ということでこんなにシンプルに使えます
24. PWA のローカルでバッグ (もはや PWA 初心者がどうやってやったのかの話 )
25. PWA化 は https が要件の１つ PWA のローカルでバッグ ローカルで https を使いたいと気に使っているサービス ngrok https://ngrok.com/
26. ngrok で PWA ローカルデバッグしてみた ちゃんとインストールできる PWA のローカルでバッグ
27. ホワイトアウト問題に悩まされる • 別のプロダクトでホワイトアウトに悩んでる • キャッシュのテンプレ設定しかしていない • 古い js を参照しにいってしまう • ↓正しいパターン？ a. 更新ボタンで unregister し新しいのを参照させる b. 常に更新する • next-pwa を使っている • use-service-worker • https://github.com/JCofman/react-hook-use-service-worker
28. About me @anozon https://twitter.com/anozon https://github.com/elzup PWA初心者 React,TypeScript