Solve vue mobile web app page cache

This article mainly introduces the detailed solution of mobile web app page caching based on vue. It is of great practical value. Friends in need can refer to it

Now mobile web apps are becoming more and more popular, and many companies Start trying to use MVVM frameworks such as angular, react, and vue to develop single-page architecture web apps. But when developing a web app, if you want the navigation experience of the page to be close to that of a native application, you will generally encounter these two problems:

• Identify forward and backward behaviors

• Restore the previous page when going back

The author developed a navigation library vue-navigation based on vue and vue-router to help developers solve these problems. The following is a solution to the problem.

Identification forward and backward

Let’s talk about the first question first. Unlike native apps, the browser mainly has the following limitations:

• No forward and backward events are provided

• Developers are not allowed Read browsing history

• Users can manually enter the address, or use the forward and backward provided by the browser to change the url

The solution is to maintain it yourself A browsing record, every time the url changes, it is compared with the recorded browsing record to determine the forward and backward behavior:

• If the url exists in the browsing record, it means going back

• If the url does not exist in the browsing history, it means moving forward

• The url is refreshing at the end of the browsing history

In addition, the same route may be allowed to appear multiple times in the application's routing path (for example, A->B->A), so add a key value to each route to distinguish different instances of the same route.

This browsing record needs to be stored in sessionStorage, so that the browsing record can be restored after the user refreshes it.

Restore the previous page when going back

After identifying the back behavior, the next step is to restore the previous page like the native one.

One solution is to continue to store the page in the DOM, and add the style display: none to tell the browser not to render the element. However, if there are too many cached pages, the DOM will become very large, which will affect the performance of the page. , this article does not discuss this solution.

Another solution is to cache the data in memory. Developers need to store the page data, and when returning to the page, restore the page based on the data. However, the data stored in each page is blocked, and additional coding is generally required. It would be best if there was a lower-level solution that could solve this problem and be transparent to developers, so I tried and developed vue-navigation. .

In the vue-navigation 0.x version, Vue’s keep-alive was used to cache the page, but keep-alive decided to cache based on the name or tag of the component, so it brought many restrictions. .

After reading the source code of keep-alive and understanding its caching mechanism, I implemented a cache management component to flexibly cache sub-components. The implementation idea is as follows:

1. Every time you render, first get the vnode of the subcomponent (vue's virtual dom)

2. Calculate the key of vnode, and assign the key value to vnode to avoid vue-router Reuse component instance

3. Determine whether the node has been cached based on the key value

1. Cached: assign the cached instance to componentInstance , so that vue will restore the component based on this instance

2. Uncached: Store the vnode in memory, and you can restore it from memory the next time you return to the page

In addition, you need to add a logic to clear the cache. When the browsing records you maintain change, clear the unnecessary cache according to the browsing records (for example, the current route is: A->B- >C, the user returns directly from C to A, then both B and C need to be deleted from the cache).

Finally

Although it is developed based on vue, the idea remains the same, and the same thing can be done using other frameworks.

Let’s take a look at vue and vue-navigation. After using the plug-in, place the router-view under navigation to have the caching function.

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>

Finally, everyone is welcome to discuss or provide better solutions.

The above is the detailed content of Solve vue mobile web app page cache. For more information, please follow other related articles on the PHP Chinese website!