Lösen Sie den Seitencache der mobilen Web-App von Vue

In diesem Artikel wird hauptsächlich die auf Vue basierende Seiten-Caching-Lösung für mobile Web-Apps vorgestellt. Freunde, die sie benötigen, können darauf zurückgreifen.

Jetzt gibt es immer mehr mobile Web-Apps und immer beliebter, und viele Unternehmen versuchen, MVVM-Frameworks wie Angular, React und Vue zu verwenden, um Web-Apps mit Single-Page-Architektur zu entwickeln. Wenn Sie jedoch bei der Entwicklung einer Web-App möchten, dass das Navigationserlebnis der Seite dem einer nativen Anwendung nahe kommt, werden Sie im Allgemeinen auf diese beiden Probleme stoßen:

• Erkennung vorwärts und rückwärts Verhalten

• Stellen Sie beim Zurückgehen die vorherige Seite wieder her

Der Autor hat eine Navigationsbibliothek Vue-Navigation basierend auf Vue und Vue-Router entwickelt, um zu helfen Entwickler lösen diese Probleme. Im Folgenden finden Sie eine Lösung für das Problem.

Vorwärts und rückwärts erkennen

Lassen Sie uns zunächst über die erste Frage sprechen. Im Gegensatz zu nativen Apps weist der Browser hauptsächlich die folgenden Einschränkungen auf:

• Es werden keine Vorwärts- und Rückwärtsereignisse bereitgestellt

• Entwickler dürfen den Browserverlauf nicht lesen

• Benutzer können die Adresse manuell eingeben oder die vom Browser bereitgestellte Vorwärts- und Rückwärtsfunktion verwenden, um die URL zu ändern

Die Lösung besteht darin, sie beizubehalten es selbst Ein Browsing-Datensatz, jedes Mal, wenn sich die URL ändert, wird durch Vergleich mit dem aufgezeichneten Browsing-Datensatz das Vorwärts- und Rückwärtsverhalten beurteilt:

• Wenn die URL im Browsing-Datensatz vorhanden ist, es bedeutet zurückgehen

• Wenn die URL nicht im Browserverlauf vorhanden ist, bedeutet es vorwärts gehen

• Wenn die URL am Ende endet des Browserverlaufs bedeutet dies, dass er aktualisiert wird

Darüber hinaus darf dieselbe Route möglicherweise mehrmals im Routingpfad der Anwendung erscheinen (z. B. A->B->). A), also fügen Sie jeder Route einen Schlüsselwert hinzu, um verschiedene Instanzen derselben Route zu unterscheiden.

Dieser Browserverlauf muss in sessionStorage gespeichert werden, damit der Browserverlauf wiederhergestellt werden kann, nachdem der Benutzer ihn aktualisiert hat.

Beim Zurückgehen die vorherige Seite wiederherstellen

Nachdem das Zurückverhalten erkannt wurde, besteht der nächste Schritt darin, die vorherige Seite wie die native Seite wiederherzustellen.

Eine Lösung besteht darin, die Seite weiterhin im DOM zu speichern und den Stil display:none hinzuzufügen, um den Browser anzuweisen, das Element nicht zu rendern. Wenn jedoch zu viele zwischengespeicherte Seiten vorhanden sind, wird das DOM sehr groß, was sich auf die Leistung der Seite auswirkt. In diesem Artikel wird diese Lösung nicht behandelt.

Eine andere Lösung besteht darin, die Daten im Speicher zwischenzuspeichern. Entwickler müssen die Seitendaten speichern und bei der Rückkehr zur Seite die Seite basierend auf den Daten wiederherstellen. Allerdings sind die auf jeder Seite gespeicherten Daten blockiert und im Allgemeinen ist zusätzlicher Code erforderlich. Am besten wäre es, wenn es eine Lösung auf niedrigerer Ebene gäbe, die dieses Problem lösen und für Entwickler transparent sein könnte. Deshalb habe ich versucht, Vue-Navigation zu entwickeln. .

In der vue-navigation 0.x-Version wurde Vues Keep-Alive zum Zwischenspeichern der Seite verwendet. Keep-Alive bestimmt den Cache jedoch anhand des Namens oder Tags der Komponente, was viele Einschränkungen mit sich bringt . .

Nachdem ich den Quellcode von Keep-Alive gelesen und seinen Caching-Mechanismus verstanden hatte, implementierte ich eine Cache-Verwaltungskomponente, um Unterkomponenten flexibel zwischenzuspeichern. Die Implementierungsidee lautet wie folgt:

1. Besorgen Sie sich bei jedem Rendern zuerst den Vnode der Unterkomponente (Vues virtueller Dom)

2. Berechnen Sie den Schlüssel des Vnodes und weisen Sie den Schlüsselwert dem Vnode zu, um Vue-Router zu vermeiden Komponenteninstanz wiederverwenden

3. Bestimmen Sie anhand des Schlüsselwerts, ob der Knoten zwischengespeichert wurde

1. Zwischengespeichert: Weisen Sie die zwischengespeicherte Instanz der Komponenteninstanz zu , damit Vue die Komponente basierend auf dieser Instanz wiederherstellt

2. Nicht zwischengespeichert: Speichern Sie den Vnode im Speicher, und Sie können ihn aus dem Speicher wiederherstellen, wenn Sie das nächste Mal zur Seite zurückkehren

Darüber hinaus müssen Sie eine Logik zum Löschen des Caches hinzufügen. Wenn sich die von Ihnen verwalteten Browsing-Datensätze ändern, wird der unnötige Cache basierend auf den Browsing-Datensätzen geleert (z. B Die aktuelle Route ist: A->B- >C, der Benutzer kehrt direkt von C nach A zurück, dann müssen sowohl B als auch C aus dem Cache gelöscht werden.

Endlich

Obwohl es auf Basis von Vue entwickelt wurde, bleibt die Idee dieselbe und das Gleiche kann mit anderen Frameworks erreicht werden.

Werfen wir einen Blick auf Vue und Vue-Navigation. Nachdem Sie das Plug-in verwendet haben, platzieren Sie die Router-Ansicht unter Navigation, um die Caching-Funktion zu nutzen.

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>

Abschließend ist jeder willkommen, bessere Lösungen zu diskutieren oder anzubieten.

Das obige ist der detaillierte Inhalt vonLösen Sie den Seitencache der mobilen Web-App von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!