Résoudre le cache de la page de l'application Web mobile Vue

Cet article présente principalement l'explication détaillée de la solution de mise en cache des pages d'applications Web mobiles basée sur Vue. Elle est d'une grande valeur pratique. Les amis qui en ont besoin peuvent s'y référer

Maintenant, les applications Web mobiles sont de plus en plus nombreuses. et plus populaires, et de nombreuses entreprises commencent à essayer d'utiliser des frameworks MVVM tels que angulaire, React et Vue pour développer des applications Web à architecture monopage. Mais lors du développement d'une web app, si vous souhaitez que l'expérience de navigation de la page soit proche de celle d'une application native, vous rencontrerez généralement ces deux problèmes :

• Identifier l'avant et l'arrière comportements

• Restaurer la page précédente en revenant en arrière

L'auteur a développé une bibliothèque de navigation vue-navigation basée sur vue et vue-router pour aider les développeurs résolvent ces problèmes. Ce qui suit est une solution au problème.

Reconnaître en avant et en arrière

Parlons d'abord de la première question. Contrairement aux applications natives, le navigateur présente principalement les limitations suivantes :

• Aucun événement avant et arrière n'est fourni

• Les développeurs ne sont pas autorisés à lire l'historique de navigation

• Les utilisateurs peuvent saisir manuellement l'adresse ou utiliser l'avant et l'arrière fournis par le navigateur pour modifier l'URL

La solution est de maintenir faites-le vous-même Un enregistrement de navigation, chaque fois que l'url change, en la comparant avec l'enregistrement de navigation enregistré, le comportement avant et arrière est jugé :

• Si l'url existe dans l'enregistrement de navigation, cela signifie revenir en arrière

• Si l'url n'existe pas dans l'historique de navigation, cela signifie avancer

• Quand l'url se termine à la fin de l'historique de navigation, cela signifie rafraîchir

De plus, le même itinéraire peut être autorisé à apparaître plusieurs fois dans le chemin de routage de l'application (par exemple, A->B-> A), ajoutez donc une valeur clé à chaque route pour distinguer différentes instances de la même route.

Cet historique de navigation doit être stocké dans sessionStorage, afin que l'historique de navigation puisse être restauré une fois que l'utilisateur l'a actualisé.

Restaurer la page précédente en revenant

Après avoir reconnu le comportement de retour, l'étape suivante consiste à restaurer la page précédente comme la page native.

Une solution consiste à continuer à stocker la page dans le DOM, et à ajouter le style display: none pour indiquer au navigateur de ne pas afficher l'élément. Cependant, s'il y a trop de pages en cache, le DOM deviendra. très volumineux, ce qui affectera les performances de la page, cet article ne traite pas de cette solution.

Une autre solution consiste à mettre en cache les données en mémoire. Les développeurs doivent stocker les données de la page et, lorsqu'ils reviennent à la page, restaurer la page en fonction des données. Cependant, les données stockées dans chaque page sont bloquées et un codage supplémentaire est généralement requis. Il serait préférable qu'il existe une solution de niveau inférieur capable de résoudre ce problème et d'être transparente pour les développeurs. J'ai donc essayé et développé vue-navigation. .

Dans la version vue-navigation 0.x, le keep-alive de Vue était utilisé pour mettre en cache la page. Cependant, keep-alive détermine le cache en fonction du nom ou de la balise du composant, il apporte donc de nombreuses restrictions. .

Après avoir lu le code source de keep-alive et compris son mécanisme de mise en cache, j'ai implémenté un composant de gestion de cache pour mettre en cache de manière flexible les sous-composants :

1. .

   Chaque fois que vous effectuez un rendu, obtenez d'abord le vnode du sous-composant (le dom virtuel de vue)

2. Calculez la clé de vnode et attribuez la valeur de clé à vnode pour éviter vue-router Réutiliser l'instance de composant

3. Déterminer si le nœud a été mis en cache en fonction de la valeur de la clé

1. Caché : attribuer l'instance mise en cache à composantInstance , afin que vue restaure le composant basé sur cette instance

2. Non mis en cache : stockez le vnode en mémoire, et vous pourrez le restaurer depuis la mémoire la prochaine fois que vous reviendrez à la page

De plus, vous devez ajouter une logique pour vider le cache lorsque les enregistrements de navigation que vous conservez changent, le cache inutile sera vidé en fonction des enregistrements de navigation (par exemple, le l'itinéraire actuel est : A->B- >C, l'utilisateur revient directement de C à A, puis B et C doivent être supprimés du cache).

Enfin

Bien qu'il soit développé sur la base de vue, l'idée reste la même, et la même chose peut être faite en utilisant d'autres frameworks.

Jetons un coup d'œil à vue et vue-navigation. Après avoir utilisé le plug-in, placez la vue du routeur sous navigation pour avoir la fonction de mise en cache.

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>

Enfin, tout le monde est invité à discuter ou à proposer de meilleures solutions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!