Vue 모바일 웹 앱 페이지 캐시 해결

이 글은 Vue 기반의 모바일 웹 앱 페이지 캐싱 솔루션에 대한 자세한 설명을 주로 소개합니다. 실용적인 가치가 매우 높습니다. 필요한 친구들이 참고할 수 있습니다.

이제 모바일 웹 앱이 점점 더 대중화되고 있습니다. 많은 회사에서는 단일 페이지 아키텍처 웹 앱을 개발하기 위해 각도 및 반응, vue 및 기타 MVVM 프레임워크를 사용하기 시작했습니다. 그러나 웹 앱을 개발할 때 페이지의 탐색 경험을 기본 애플리케이션에 가깝게 하려는 경우 일반적으로 다음 두 가지 문제에 직면하게 됩니다.

• 앞으로 및 뒤로 동작 식별

• 이전 페이지 복원 돌아갈 때

저자는 개발자가 이러한 문제를 해결할 수 있도록 vue와 vue-router를 기반으로 네비게이션 라이브러리 vue-navigation을 개발했습니다.

앞뒤 인식

첫 번째 질문부터 먼저 이야기해 보겠습니다. 기본 앱과 달리 브라우저에는 주로 다음과 같은 제한 사항이 있습니다.

• 앞으로 및 뒤로 이벤트를 제공하지 않습니다.

• 개발자가 검색 기록을 읽는 것을 허용하지 않습니다.

• 사용자가 수동으로 주소를 입력하거나 브라우저를 사용할 수 있습니다. URL 변경을 위한 정방향 및 역방향 제공

해결 방법은 URL이 변경될 때마다 기록된 탐색 기록과 비교하여 순방향 및 역방향 동작을 결정하는 것입니다.

• url 검색 기록에 url이 있으면 뒤로 가는 것을 의미합니다. 해당 URL이 검색 기록에 없으면 앞으로 가는 것을 의미합니다(예: A->B->A). 동일한 경로의 다른 인스턴스를 구별하기 위해 각 경로에 대한 키 값입니다.

이 검색 기록은 사용자가 새로 고친 후 검색 기록을 복원할 수 있도록 sessionStorage에 저장되어야 합니다.

• 뒤로 갈 때 이전 페이지 복원

• 뒤로 가는 동작을 확인한 후 다음 단계는 이전 페이지를 기본 페이지처럼 복원하는 것입니다.

한 가지 해결책은 DOM에 페이지를 계속 저장하고 스타일 표시를 추가하는 것입니다. 없음은 브라우저에 요소를 렌더링하지 않도록 지시합니다. 그러나 캐시된 페이지가 너무 많으면 DOM이 매우 커지고 영향을 미칩니다. 이 문서에서는 이 계획에 대해 논의하지 않습니다.

또 다른 해결책은 데이터를 메모리에 캐시하는 것입니다. 개발자는 페이지 데이터를 저장하고 페이지로 돌아올 때 데이터를 기반으로 페이지를 복원해야 합니다. 그러나 각 페이지에 저장된 데이터는 일반적으로 차단되어 있으며 추가 코딩이 필요합니다. 이 문제를 해결하고 개발자에게 투명하게 할 수 있는 하위 수준 솔루션이 있으면 가장 좋을 것이므로 vue-navigation을 시도하고 개발했습니다.

vue-navigation 0.x 버전에서는 Vue의 keep-alive를 사용하여 페이지를 캐시했지만, keep-alive는 컴포넌트의 이름이나 태그를 기준으로 캐시하기로 했기 때문에 많은 제약이 있었습니다.

Keep-alive의 소스 코드를 읽고 캐싱 메커니즘을 이해한 후 하위 구성 요소를 유연하게 캐시하기 위한 캐시 관리 구성 요소를 구현했습니다. 구현 아이디어는 다음과 같습니다.

렌더링할 때마다 먼저 가져옵니다. 하위 구성 요소의 vnode(Vue의 가상 돔)

vnode의 키를 계산하고 vue-router가 구성 요소 인스턴스를 재사용하는 것을 방지하기 위해 키 값을 vnode에 할당합니다

노드가 캐시되었는지 확인

1. Cached: 캐시된 인스턴스를 구성 요소 인스턴스에 할당하여 vue가 이 인스턴스를 기반으로 구성 요소를 복원합니다

2. Uncached: vnode를 메모리에 저장하고 메모리에서 복원할 수 있습니다. 다음에 페이지를 다시 방문할 때

3. 또한, 검색 기록이 변경되면 검색 기록을 기반으로 불필요한 캐시가 삭제됩니다(예: 현재 경로는 A->B->C입니다. 사용자는 C에서 A로 직접 돌아간 다음 B와 C를 모두 캐시에서 삭제해야 합니다.
1. 드디어

vue를 기반으로 개발되었지만 아이디어는 그대로이고, 다른 프레임워크를 사용해도 같은 작업이 가능합니다.

2. vue와 vue-navigation을 사용하는 것이 더 좋습니다. 플러그인을 사용한 후, 라우터 뷰를 네비게이션 아래에 배치하면 캐싱 기능을 사용할 수 있습니다.

main.js

import Vue from 'vue'
import router from './router' // vue-router 实例
import Navigation from 'vue-navigation'
Vue.use(Navigation, {router})
// 启动你的应用...

App.vue

<template>
 <navigation>
  <router-view></router-view>
 </navigation>
</template>

마지막으로, 모두가 더 나은 솔루션에 대해 토론하거나 제공할 수 있습니다.

위 내용은 Vue 모바일 웹 앱 페이지 캐시 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!