IndexedDBのラッパー「localoForage」を試してみた

2019年3月20日 PWA Night のLT資料です。
未検証の部分があるため、将来的に資料をアップグレードする可能性があります。

Transcript

1. IndexedDBのラッパー 「localForage」を使ってみる 2019年3月20日 シックス・アパート株式会社 ⾧内毅志
2. 自己紹介 • ⾧内毅志(Takeshi Nick Osanai) • ディベロッパーリレーションマネージャー • Movable Type エバンジェリスト • AWS認定ソリューションアーキテクト • 趣味 ジョギング、野球観戦 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと @Nick_smallworld
3. PWAのストレージに関するベストプラクティス https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa?hl=ja
4. IndexedDBとは • ブラウザで利用できるストレージ領域(DB) • Key-Value 形式でデータを保存 • ブラウザのデフォルトストレージになりつつある
5. localForageとは • WebStorage のような書き方でIndexedDBが使えるラッパー • Mozzila財団のメンバーがメンテナンスをしている
6. localForageのインストール(Web)
7. 書き方の違い • WebStorage • localForage
8. localForage と WebStorage ? • WebStorage と localForage で パフォーマンスは異なる? • 試してみた
9. パフォーマンス計測 • for文で1000件のデータを作成 • sessionStorage、localForageで回す • 書き込み、読み出しの時間をそれぞれ計測
10. コード(一部)
11. •デモ
12. 試した結果 • Chromeでは localForage＋IndexedDBの方が全体的に早い • 特に書き込みは数十倍のレベルでWebStorageより高速 • localForage いけるじゃん! • ・・・という結論にしようと思ったのですが
13. あれ…? • FireFoxではsessionStorageのほうが早い…だと…? • ベンチマークのコードの問題かも • なにかわかったら今度発表します
14. ありがとうございました! • シックス・アパートの⾧内でした。 • MovableType.net もよろしく お願いします。