Indexed DBにtakker99/ScrapBubbleのデータを格納する案
今のところお蔵入りしてる
DBのデータ構造設計がめんどい
そこまで高速化する需要がない
環境によってかなり遅い
読み込み速度の高速化を目的としているのに、遅いのでは使う価値が全くない
オフライン状態で読み込めるメリットはいらない
これはやめたほうがいい
fetchが失敗するまで待つので、切り替えにかなり時間がかかる
と思ったけどそこそこ速いっぽい？
加工した状態で保存する
code:ts
interface Bubble {
title: string;
/** 更新チェックを最後に行った日時 */
checked: number;
/** このデータの最終更新日時
*
* index用
*/
updated: number;
pages: {
project: string;
title: string; // リダイレクトした場合は、Bubble.titleと値が変わる
lines: Line[];
}[];
cards: {
project: string;
title: string;
image?: string;
descriptions: string[];
// 並び替えに使う情報
updated: number;
created: number;
linked: number;
}[];
}
容量は一定以下に保つ
古いcacheを順次削除するとかで
最終利用日時が古い順のほうがいいなtakker.icon
更新はしてないけど何度も参照しているページはありうる
別のタブのDB更新を反映させる
更新通知 or setIntervalで更新監視
後者が楽かなと思っているtakker.icon
データの読み出し方法は色々ある
❌全部DBからメモリに読み出す
複数タブを開くとメモリを圧迫することになる
必要なリンクデータだけ順次DBからメモリに読み出す
次回以降はまずメモリに呼び出したリンクデータを使う
その後DBを照会し、対象データが更新されていればそれを読み出す
❌データ生成時に毎回DBから読み出す
一番省メモリかも
performanceが十分出るなら、これもあり
code:ts
/** card bubblesとtext bubblesのデータを返す */
export const useBubbleData: (title: string, projects: string[], options?: UseBubbleDataOptions) => BubbleData;
export interface BubbleData {
cards: Card[];
pages: Page[];
}
export interface UseBubbleDataOptions {
/** cacheの有効期間 (単位はms) */
maxAge?: number;
}
// これはusePageDataを流用しちゃってもいいかも
/** 指定したリンクが空リンクかどうか判定する */
export const useEmptyLink (title: string, projects: string[], parentTitle: string)
=> boolean;
重複除去や並び替えはComponent内で行う