pwa가 db가 아닌 api 캐시를 고려하는 것이 잘못되었습니까?

pwa가 db가 아닌 api 캐시를 고려하는 것이 잘못되었습니까?

나는 특정한 독서기 같은 앱을 만들고 있다.

메인 페이지 call api/books 다음과 같은 각 책 정보가 포함된 json 배열 목록 및 수신

[ {  id: server_db_id,  title: "title test",  sum: 10 , date: ... }
]

요청 후 캐시되므로 도서 목록을 indexedDB, localStorage 또는 기타 스토리지에 저장하지 않습니다.특정 책이 하나 필요하시면 API 북 리스트를 다시 불러서 필터링만 하면 됩니다.그거 나쁜 디자인인가요?(200개 이상 예약)

사용자가 책을 열었을 때, 이것은/api/book/book_id또한 캐시된 책이기도 합니다. 열린 책 응답은 책 줄의 json 목록입니다. 예를 들어 다음과 같습니다.

[
 {  
  id: ...
  content: "This is line...lore ipsum..."
  ....
 }
]

vue 데이터 변수 안에 API 응답을 넣었더니 컴포넌트가 correcty로 표시됩니다.

내 손으로 오프라인 상태를 유지하기 위해 어떤 종류의 핸들러도 사용하지 않습니다.사용자가 이미 이 책을 열었는지 확인하기 위해 API에 전화를 걸어 오류가 발생했는지, 응답자 본문에 내용이 있는지 확인합니다.

잘못된 결정인가요, 나쁜 결정인가요, 아니면 멍청한 결정인가요?이것이 쿼터 제한 api 또는 다른 종류의 제한에 해당합니까?pwa의 "gods"는 나에게 손가락을 들어 "WAAAT"라고 말한다. (인덱스를 사용하지 않는다.)처음에 DB는 모델 처리가 필요하기 때문에 가능하면 작업을 쉽게 하고 싶습니다.)

나 자신도 이것을 연구하다가, 그 순간, 나는 이 방법을 사용하기로 결정했다.cache자산의 경우,js, css, html같은 루트를 기반으로 합니다.

그리고 데이터에 관한 한, 예를 들어, json요구 등모델이나 스키마가 실제로 필요하지 않은 indexedDB(또는 이와 동등한 데이터베이스)에 저장하는 것이 가장 좋습니다.

Jake Archibald의 IndexedDB-Promise 라이브러리 https://github.com/jakearchibald/idb를 참조하십시오. 쉽게 이해할 수 있습니다.

비록 제이크와 애디 둘 다 그것이 디팩토 규칙이 아니라고 말하지만, 그래서 궁극적으로 무엇이 당신에게 최선인지 결정할 수 있다.

자세한 설명은 이쪽을 참조해 주십시오.

• https://developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
• https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c

앞으로 나아갈 방법에 대한 더 나은 결정을 내리는 데 도움이 되었습니다.

권장 사항

• PWA 트레이닝 확인 : https://developers.google.com/web/ilt/pwa
• 워크박스: https://developers.google.com/web/tools/workbox (이것에 의해, 개발의 속도가 큰 도움이 되었습니다.
• 코드랩: https://codelabs.developers.google.com/ (PWA 검색)

여기 가이드는 당신이 필요한 모든 것을 잘 안내해 줍니다.

PWA에 행운이 있기를

무작위 사고(편집)

다만, 지금까지의 예와 가이드의 일부에 근거하고 있기 때문에, 데이터 스토리지는 보다 즉석에서 처리됩니다.예를 들어 PWA가 API를 호출하는 경우 애플리케이션 또는 서비스 워커의 캐시된 데이터를 관리할 수 있는 두 가지 방법이 있습니다. 예를 들어 JSON을 얻기 위한 API 호출이 앱에서 실패하면 인덱스된 데이터로 되돌릴 수 있습니다.DB는 당신의 앱이 API를 처음 호출했을 때 미리 캐시되었기를 바랍니다.

또는 를 사용할 수 있습니다.self.addEventListener('fetch', (event) => { ad-hoc stuff here })자산 또는 데이터 요청을 대조하여 캐시 또는 인덱스된 응답을 하이잭할 수 있습니다.DB 응답.따라서 앱에서 오프라인 데이터를 처리할 필요가 없습니다.

첫 번째 방법은 불안하기 때문에 서비스 워커의 경우 모두 addEventListener 접근방식을 채택합니다.그 이유는 서비스 워커의 목적과 앱이 그것에 대해 걱정할 필요가 없기 때문입니다.

언급URL : https://stackoverflow.com/questions/51335678/pwa-wrong-to-consider-api-cache-instead-of-db