Detailed description of the vue-based mobile web app page cache solution, vueapp

Detailed description of the vue-based mobile web app page cache solution, vueapp

Nowadays, mobile web apps are becoming more and more popular. Many companies are trying to use angular, react, vue, and other MVVM frameworks to develop web apps with a single-page architecture. However, when developing a web app, if you want the page navigation experience to be close to that of the native app, you will generally encounter these two problems:

• Identify forward and backward Behavior
• Restore the previous page when you move back

The author developed a navigation library vue-navigation Based on vue and vue-router to help developers solve these problems. The following are the solutions to these problems.

Recognize forward and backward

Let's talk about the first question first. Unlike native apps, browsers have the following restrictions:

• No forward and backward events are provided
• Developers are not allowed to read browsing records.
• You can manually enter the address or use the forward and backward directions provided by the browser to change the url.

The solution is to maintain a browsing record by yourself. Each time the url changes, you can compare it with the recorded browsing record to determine the forward and backward behavior:

• The url exists in the browsing record and is backward.
• The url does not exist in the browser record.
• The url is refreshed at the end of the browsing record.

In addition, the application's route path may allow the same route to appear multiple times (for example, A-> B-> ), therefore, add a key value for 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 refresh.

Restore the previous page when you move back

After identifying the bounce behavior, the next step is to restore the previous page as native.

One solution is to store the page in the DOM and add the display: none style to tell the browser not to render the element. However, when the cached page has more DOM, the page performance will be affected. This solution is not discussed in this article.

Another solution is to cache data to the memory. The developer needs to store the data on the page. when the data is returned to the page, the page is restored based on the data. However, in this case, the data stored on each page cannot be obtained, and additional encoding is generally required. If there is a lower-layer solution that can solve this problem and is transparent to developers, it would be better, therefore, we tried and developed vue-navigation.

In vue-navigation 0. in Version x, the keep-alive of vue is used to cache pages. However, keep-alive determines the cache based on the component name or tag. Therefore, many restrictions are imposed.

By reading the source code of keep-alive and learning about its caching mechanism, we have implemented a cache management component to flexibly cache sub-components. The implementation idea is as follows:

1. Each time you render a sub-component, obtain the vnode (Virtual dom of vue) of the sub-component)
2. Calculate the vnode key and assign the key value to the vnode to prevent vue-router from reusing component instances.
3. Determine whether the node is cached based on the key value
   1. Cached: the cached instance is assigned to componentInstance, so that vue can restore components based on this instance.
   2. Uncached: The vnode is stored in the memory. It can be recovered from the memory the next time it returns to the page.

In addition, you also need to add a logic to clear the cache. When the browser records you maintain change, you can clear the unwanted cache based on the browser records (for example, the current route is: a-> B-> C. If A user directly returns data from C to A, both B and C must be deleted from the cache ).

Last

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

We recommend that you use Alibaba Cloud vue and vue-navigation. After using the plug-in, you can put the router-view under navigation to have the cache function.

Main. js

Import Vue from 'vue 'import router from '. /router '// vue-router instance import Navigation from 'vue-navigation' vue. use (Navigation, {router}) // start your application...

App. vue

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

Finally, you are welcome to discuss or provide better solutions.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.