오프라인 모드 지원 (PWA)

[mome0320]

설명

온라인일 때 곡 데이터를 캐싱하고
만약에 오프라인 상태일 때 기존 캐싱 데이터를 불러와서 보여주는 방식

다만 로그인 정보, 편집 상세 정보 등 곡 외 다른 정보는 캐싱 제외

기대 효과

만약에 휴대폰 데이터가 없는 상황일 때 간단하게 열어서 곡이 뭐가 수록이 되어있는 지 등 대략 확인 가능해서 편리하게 이용 가능할 것으로 기대.

구현 방식 (가설):

ServiceWorker를 활용하여 캐싱 데이터 또는 LocalStorage 활용하여 오프라인 상태일 때 사용하도록 함.

관련 사례

https://pokedex.org/
이 사이트도 일종의 정보성 사이트이나 PWA임
오프라인일 때도 정보를 보여줌.

관련 참조

https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c

https://medium.com/@louisjaphethkouassi/make-your-pwa-work-offline-with-a-service-worker-f95f16d93029

https://kit.svelte.dev/docs/service-workers

[hotsixman]

여기 에서 말씀드렸다시피 현재는 localStorage를 사용하는 방식이 트래픽적인 면에서 효율적이지 못합니다.
하지만 오프라인 모드를 지원하는 건 굉장히 좋은 아이디어 같습니다. 아직 변경사항이 많은 개발 초기이기때문에 당장은 도입하지 못하지만, 계획중인 기능들이 완성되고 안정화되면 도입해보곘습니다.

[mome0320]

로컬스토리지에 저장하는 방식을 버리려고 하는 건 사실 트래픽 때문도 있습니다. 기존 방식은 곡 db가 업데이트 되면 모든 곡 데이터를 다시 불러와서 로컬스토리지에 저장하기때문에, 사소한 데이터 하나만 변경되어도 모든 곡 데이터를 다시 불러오기 때문에 트래픽 낭비가 심합니다.
추후에 localStorage에 곡 데이터가 아예 없을 때만 곡 데이터를 불러와 저장하고, 이후에는 개별 song/[songNo] 페이지에 접속하면 localStorage의 데이터를 업데이트 하는 방식을 사용하면 좋을 것 같습니다.
#92 (comment) 내용 인용 및 답글

트래픽 낭비는 생각해보니 문제점이긴 합니다.
매번 데이터 약간 달라질 때 마다 전체를 로드하는 방식은 트레픽 적 문제가 있다고 생각합니다.

다만 걱정되는 게 최초 시에 전체 곡 불러오기 후 만약에 클릭 시 데이터 업데이트라면 추후에 원본과 캐싱의 일관성이 떨어질 수도 있을 걸로 예상이 됩니다.

ex) 클릭 시 그 곡을 갱신 방식일 시 클릭 안하는 신곡들도 존재하므로 다수 신규 곡이 나오면 신규 곡 데이터가 갱신 안될 수도 있음.

일단 계획 초기 단계긴 하지만 구현 시
캐시 업데이트 시간 기준으로 그 후에 업데이트 된 곡 리스트만 로드하는 등에 대한 보완책이 필요할 거 같습니다.

물론 제 해결책이 그렇게 좋은 건 아니라서 다른 좋은 방법이 있으면 그런 방법으로 사용하셔도 괜찮을 거 같습니다.