Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

最大公約数的なServiceWorker制作から見るPWAの勘所

592 views

Published on

WordPress の PWA プラグイン制作を通して考えた、PWA実装のキーになる ServiceWorker によるキャッシュ制御の勘所をお話ししました。
PWA 設計時のヒントになれば幸いです。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

最大公約数的なServiceWorker制作から見るPWAの勘所

  1. 1. 最大公約数的なServiceWorker 制作から見るPWAの勘所 2019/4/17 @PWA Night Ryunosuke Shindo
  2. 2. 自己紹介 進藤 龍之介 エンジニア/日本Androidの会/しいたけの人 2018年 Web Working Group PWA 集中勉強会主催 WordPress プラグイン「PWA for WordPress」開発 オンライン診療サービス「YaDoc」開発に参加 Twitter @ryu_compin Fb ryushindo
  3. 3. WordPress プラグイン https://wordpress.org/plugins/pwa4wp/
  4. 4. プラグインであること • みんなに使って欲しい →みんなの環境や要件にマッチしやすくする • みんなの環境にマッチしやすいPWA? →最大公約数的な
  5. 5. PWAで何やりたいか(できるか) • キャッシュ • Push • Background Sync • オフライン(キャッシュの一種といえなくもない) • インストール • アイコン
  6. 6. プラグインの機能を絞った • キャッシュ • Push →思うところあってあとまわし(もしお金もらうならココかな、とも) • Background Sync →汎用的な実装イメージわかず • オフライン(キャッシュの一種といえなくもない) • インストール • アイコン
  7. 7. いつも言ってるけど、 キャッシュが命 できるだけ簡単な選択の幅を
  8. 8. 基本キャッシュプランとして Cache First と Online First
  9. 9. キャッシュの除外 キャッシュするもの、しないもの ↑大事 キャッシュされてはいけないものを除外する
  10. 10. キャッシュの有効期限 古いキャッシュを一定期間で捨てる
  11. 11. これから実装したい Online First だけど一部 Cache First にしたい Cache First だけど一部 Online First にしたい
  12. 12. 最大公約数的キャッシュプラン完成型? 基本キャッシュプラン Online First Cache First キャッシュ除外 (正規表現で柔軟にURLを指定) キャッシュ有効期限 プラン反転指定URL (Coming Next) あとはprecacheとか追加的な機能もいろいろあるけど、そこは追々・・・
  13. 13. 結局キャッシュプランの設計は・・・ キャッシュ{する|しない}要素の 切り分けが大事。 PWA 設計のちょっとしたヒントになれば幸いです。
  14. 14. 最後に告知! 日本 Android の会 ABC 2019 Spring 2019/5/26 @東海大学高輪キャンパス 今年もモバイルWebトラックをやります! PWA についてもっと掘り下げたい方、どっぷり半日PWAの話が聞けま す! PWA Nightセッションもあるよ!!!! ぜひお越しください。 https://japan-android-group.connpass.com/event/125928/
  15. 15. もうひとつ告知 WordCamp Haneda 2019 でもPWAのお話しします! 4/20~21 ※Session Day は20日(土) 会場:大田区産業プラザPIO https://2019.haneda.wordcamp.org/
  16. 16. ありがとうございました。 PWA for WordPress ぜひお試しください https://wordpress.org/plugins/pwa4wp/

×