Vue 프로그레시브 웹 애플리케이션 처리 방법

Vue 프로그레시브 웹 애플리케이션 처리 방법

기본적인 CRUD REST API와 기본적인 Vue 프런트엔드가 있습니다.API 엔드포인트가 있다고 칩시다./users모든 사용자 및 프런트엔드 페이지 URL 반환/users는, 취득한 유저의 리스트를 나타내고 있습니다.

오프라인 기능을 제공하고 CLI 설정을 통해 Vue 앱에 대한 PWA 지원을 추가하고 싶습니다.

PWA는 클라이언트와 서버 사이의 인스턴스라고 알고 있습니다.클라이언트는 서비스 워커에게 요구를 송신하고, 새로운 API 콜을 발신할지, 이전에 캐시된 데이터를 반환할지 결정합니다.

따라서 내 사용자 페이지에서 사용자 목록을 가져올 수 있습니다.mountedPWA를 지원하지 않으면 사용자를 Vuex 스토어에 글로벌하게 저장하여 다른 페이지에서 액세스할 수도 있습니다.

여러 가지 질문이 떠오릅니다.

• 캐시된 데이터를 로드하는 시기와 새로운 API 요청을 하는 시점이 언제입니까?인터넷 접속만이 유일한 기준입니까?(여기 기재되어 있는 바와 같이 https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures#caching_strategies_supported_by_sw-toolbox )
• 실시간 데이터가 변경되어 대기 중인 요청이 여러 오류와 함께 응답하는 경우 캐시된 데이터로 작업하는 방법.
• 캐시 스토리지는 브라우저 및 디바이스 OS에 의해 제한됩니다.iOS가 스토리지를 50MB로 제한한다고 가정해 보겠습니다. 어떻게 대처해야 할까요?일부 이미지가 있는 문서는 쉽게 제한을 초과할 수 있습니다.그럼 캐싱할 내용과 캐싱하지 않을 내용을 결정해야 합니까?

• 런타임 캐싱의 예를 본 적이 있습니다.

  {urlpattern: 'api url', 핸들러: '예: networkfirst', 옵션}

서비스 워커의 설정에서는, 그러한 캐싱을 하드 코드 할 필요가 있습니까?많은 API 엔드포인트가 상당히 복잡해질 수 있습니다.

누군가 PWA가 어떻게 작동하고 어떻게 대처해야 하는지 설명해 준다면 정말 좋을 것이다.Vue 앱에 필요한 작업, 대량의 데이터 저장 방법 및 오류 사례 처리 방법

언급URL : https://stackoverflow.com/questions/59662835/how-to-deal-with-vue-progressive-web-apps