ServiceWorker、indexedDBを活用したオフライン機能開発

Transcript

1. © 2022 HITOTSU,Inc. ServiceWorker、 indexedDBを活用した オフライン機能開発 HITOTSU株式会社 2023年11月21日(火)
2. © 2022 HITOTSU,Inc. 2 自己紹介 氏名：河村 康治 Twitter：kkfactory0705 趣味：野球観戦 Qiita:koji0705 経歴： 2017年4月 保険系SIer4年 2021年9月 フリーランス 2023年5月 HITOTSU株式会社 入社 経験言語 ・React(TypeScript) ・GoLang ・Node.js ・Java
3. © 2022 HITOTSU,Inc. 3 オフライン機能とは 01
4. © 2022 HITOTSU,Inc. 4 Webシステムのオフライン環境で以下機能を提供。 オフライン機能とは オンライン時に⾃動 データ取得 オンライン時にオフラインで必要なデ ータを⾃動取得。 オンライン復旧時の ⾃動同期 オフライン→オンライン復旧時、デー タを⾃動同期。 動的ページの⽣成 (検索/並び替え/ペ ージネーション) オフライン環境にて、検索、ページネ ーション、並び替え機能が利⽤可能。 オンライン/オフラインの機能共にブ ラウザ1つで完結。 オフライン→オンライン、オンライン →オフラインのNWを⾃動検知し、サ ーバ/ブラウザ内DBの参照先を⾃動変 更する。 オフライン環境での 更新情報保存 オフライン環境で更新した情報をブラ ウザ内のDBに保存 Network監視によ る参照先変更 ブラウザ1つでオン ライン/オフライン 機能を実現 詳細: https://note.com/hitotsu_life/n/n5bb6531d5986
5. © 2022 HITOTSU,Inc. 5 システム設計 02
6. © 2022 HITOTSU,Inc. 6 全体処理フロー図
7. © 2022 HITOTSU,Inc. 7 ServiceWorker オンライン時 オフライン時 ServiceWorkerはServerの値を返却 ServiceWorkerはindexedDBの値を返却 React ServiceWorker サーバ React ServiceWorker サーバ indexedDB React側でオンライン、オフライン処理の実装が不要。 NW監視によるオンライン、オフラインのデータ参照先の制御。 APIリクエストの解析、DB取得/更新、レスポンス返却までを担う。
8. © 2022 HITOTSU,Inc. 8 indexedDB サーバのデータ保存、オフライン時の更新データを保存
9. © 2022 HITOTSU,Inc. 9 まとめ ・ServiceWorker、indexedDBを活用する事でオフライン機能を実現。 ・ServiveWorker側に処理を委ねる事で、React側ではオフライン、オンラインを意識しない 実装が実現可能。それにより技術的負債を回避した。
10. © 2022 HITOTSU,Inc. 10 エンジニア募集 03
11. © 2022 HITOTSU,Inc. 11 エンジニア募集 フロントエンジニア、バックグラウンドエンジニア、技術領域問わず募集しております。お気 軽にお問い合わせください。 ※本日の発表を見たと言っていただけると、話はスムーズです。