IndexedDB의 사용 예로 Microsoft To-Do를 읽어 보세요.

최근 취미로 IndexedDB를 이용한 오프라인 완결형의 어플리케이션을 쓰고 있다.
다른 사이트의 IndexedDB의 이용예로 Microsoft To-Do에서 제일 제대로 사용되고 있었던 생각이 들기 때문에 이용예로서 스키마를 읽는다.

IndexedDB를 확인하는 방법

이전부터 사용된 LocalStorage에 비해
- (브라우저에 따라) 단순히 용량이 크다.
- 색인을 붙일 수 있습니다.
- Object를 그대로 저장할 수 있다
근처가 장점이 된다.
이 근처는 다른 기사를 보면 좋다

Chrome에서 내용을 확인하려면 DeveloperTools의 Application 탭, Storage의 IndexedDB를 보면 된다.
각 테이블의 데이터를 확인할 수 있습니다.

Microsoft To-Do

Microsoft가 개발하는 ToDo 관리 응용 프로그램.
태스크를 복수 저장할 수 있는 list가 있는 일반적인 Todo 관리 어플리케이션으로, 오프라인으로 동작한다.

표

2018/4/6 현재는 이하의 6 테이블
- 설정
- steps
- tasks
- members
- lists
- sync

기본적으로 모든 테이블은 하나의 고유 키를 가지고 있고 키에 대해 Object를 가지고 있는 모습.

설정

{
  id: "l-5oo86"
  key: "onboarding_detail_tooltip_dismissed"
  local_id:"l-5oo86"
  remote_id: undefined
  value: true
}

이른바 key, value인 느낌의 오브젝트가 보존되고 있다. primaryKey는 key가 설정되어 있다.

remote_id는 tasks를 보는 한 서버 측에서 가지고있는 id가 흔들리는 모습이지만, settings에 관해서는 remote_id가 흔들리고있는 레코드는 없기 때문에 클라이언트에서만 저장하고있을 가능성이 높다

tasks

{
  ChangeKey: "XAI/lv8jBkOPt79WuS0NSwAAnP2j=="
  committed_day: undefined
  completed: false
  completed_at: undefined
  created_at: {date_time: "2017-05-04T18:22:51.500", time_zone: "UTC"}
  due_date: undefined
  id: "AQMkADAwATM0MDAAMS1hZGNiLTQzYjYtMDACLTAwCgBGAAADVFc0lFz6P0m-xARjTHHhrAcAXAI-lv8jBkOPt79WuS0NSwAAAJzsHc4AAABcAj_W-yMGQ4_3v1a5LQ1LAAAAnOwloAAAA=="
  is_ignored: undefined
  is_reminder_on: false
  list_id: "AQMkADAwATM0MDAAMS1hZGNiLTQzYjYtMDACLTAwCgAuAAADVFc0lFz6P0m-xARjTHHhrAEAXAI-lv8jBkOPt79WuS0NSwAAAJzsHc4AAA="
  local_id: "AQMkADAwATM0MDAAMS1hZGNiLTQzYjYtMDACLTAwCgBGAAADVFc0lFz6P0m-xARjTHHhrAcAXAI-lv8jBkOPt79WuS0NSwAAAJzsHc4AAABcAj_W-yMGQ4_3v1a5LQ1LAAAAnOwloAAAA=="
  note: ""
  note_updated_at: undefined
  position: 1493922090000
  postponed_day: undefined
  recurrence: undefined
  reminder: undefined
  remote_id: "AQMkADAwATM0MDAAMS1hZGNiLTQzYjYtMDACLTAwCgBGAAADVFc0lFz6P0m-xARjTHHhrAcAXAI-lv8jBkOPt79WuS0NSwAAAJzsHc4AAABcAj_W-yMGQ4_3v1a5LQ1LAAAAnOwloAAAA=="
  remote_list_id: "AQMkADAwATM0MDAAMS1hZGNiLTQzYjYtMDACLTAwCgAuAAADVFc0lFz6P0m-xARjTHHhrAEAXAI-lv8jBkOPt79WuS0NSwAAAJzsHc4AAA="
  source: undefined
  title: "タスクネーム"
  today_position: undefined
}

primaryKey는 id입니다.

remote_id, remote_list_id가 아마 서버 측에서의 pkey.

list_id는 lists의 레코드에 대한 외래 키입니다.

ChangeKey를 보고 서버측 데이터와 동기를 취하는 것처럼 보인다.

lists

{
  background: "mountains"
  id: "inbox"
  is_owner: true
  is_shared_folder: false
  local_id: "inbox"
  members: []
  position: 1493835505000
  remote_id: "AQMkADAwATM0MDAAMS1hZGNiLTQzYjYtMDACLTAwCgAuAAADVFc0lFz6P0m-xARjTHHhrAEAXAI-lv8jBkOPt79WuS0NSwAAAgESAAA"
  sharing_sync_status: "Synced"
  show_completed: false
  sort_asc: true
  sort_type: 1
  theme: "blue"
  title: "タスク"
}

sync

{
  id : "sync-key"
  queue : [
    {
      data : 
        committed_day : {date_time: "2018-04-06", time_zone: "Asia/Tokyo"} 
        id : "l-5hkdu"
        list_id : "inbox"
        local_id : "l-5hkdu"
        position : 1492520890000
        postponed_day : null
        remote_id : undefined
        remote_list_id : "AQMkAwATM0MDAAMS1hZGNiLTQzYjYtMDACLTAwCgAuAAADVFc0lFz6P0m-xARjTHHhrAEAXAI-lv8jBkOPt79WuS0NSwAAAgESAAAA"
        title : "aaaa"
        today_position : 1522984086542
      type : "CREATE_TASK"
    }
  ]
  length : 1
}

sync-key라는 1 레코드 만

queue가 맞고, type과 data가 세트가 된 데이터가 들어가 있다. 플럭스의 액션 노리

온라인이 되면 실행된다

steps, members

이 두 테이블에 저장된 데이터를 본 적이 없다.
members는 태스크의 공유용일까라고 생각했지만, UI상에서 공유하는 방법을 모른다

끝

Firebase 사용해 앱 쓰면 온라인·오프라인 대응해 주어 큐라든지 의식하지 않아서 좋았으므로, 스스로 할 때의 참고가 될 것 같았다.

색인이 키로만 흔들리기 때문에 여전히 localStorage의 연장선에서 사용하는 것입니다.

remote_id 등 클라이언트와 서버를 넘은 데이터 교환은 Web엔지니어로서는 별로 하지 않기 때문에, 데스크탑이나 스마트폰상에서의 설계는 배울 필요성이 강해지고 있는 것처럼 느꼈다. (ReactNative 또는 PWA의 맥락으로)