vue モバイル Web アプリのページ キャッシュを解決する

この記事では、主に Vue に基づくモバイル Web アプリのページ キャッシュ ソリューションについて詳しく説明します。必要な方は参考にしてください。

現在、モバイル Web アプリはますます普及しています。多くの企業が、単一ページ アーキテクチャの Web アプリを開発するために、angular や React、vue などの MVVM フレームワークを使用しようと試み始めています。しかし、Web アプリを開発する場合、ページのナビゲーション エクスペリエンスをネイティブ アプリケーションに近づけたい場合は、通常、次の 2 つの問題に遭遇します:

• 前方動作と後方動作の識別

• 前のページを復元する戻るとき

著者は、開発者がこれらの問題を解決できるように、vue と vue-router に基づいたナビゲーション ライブラリ vue-navigation を開発しました。

前方と後方を認識する

まずは最初の質問について話しましょう。ネイティブ アプリとは異なり、ブラウザには主に次の制限があります:

• は前後イベントを提供しません

• は開発者が閲覧履歴を読み取ることを許可しません

• ユーザーはアドレスを手動で入力するか、ブラウザを使用できますURL を変更するための前方と後方を提供します

解決策は、URL が変更されるたびに、閲覧記録を自分で保持し、記録された閲覧記録と比較して、前方および後方の動作を決定することです:

• url閲覧履歴にURLが存在する場合は戻ることを意味します。 閲覧履歴にURLが存在しない場合は進むことを意味します（例：A->B->A）。同じルートの異なるインスタンスを区別するために各ルートにキー値を追加します。

この閲覧履歴は、ユーザーが更新した後に閲覧履歴を復元できるように、sessionStorage に保存する必要があります。

• 戻るときに前のページを復元する

• 戻る動作を特定したら、次のステップは、ネイティブのページと同じように前のページを復元することです。

1 つの解決策は、引き続き DOM にページを保存し、スタイル表示: none を追加して、ブラウザーに要素をレンダリングしないよう指示することです。ただし、キャッシュされたページが多すぎると、DOM が非常に大きくなり、この記事では、この計画については説明しません。

もう 1 つの解決策は、データをメモリにキャッシュし、ページに戻ったときにそのデータに基づいてページを復元する必要があります。ただし、各ページに保存されているデータはブロックされており、通常は追加のコーディングが必要です。この問題を解決でき、開発者にとって透過的なソリューションがあれば最善であると考え、 vue-navigation を試して開発しました。

vue-navigation 0.x バージョンでは、Vue のキープアライブを使用してページをキャッシュしていましたが、キープアライブはコンポーネントの名前またはタグに基づいてキャッシュすることを決定したため、多くの制限が生じました。

キープアライブのソースコードを読んでそのキャッシュメカニズムを理解した後、サブコンポーネントを柔軟にキャッシュするためのキャッシュ管理コンポーネントを実装しました。実装のアイデアは次のとおりです:

レンダリングするたびに、最初にキャッシュを取得します。サブコンポーネント (vue の仮想 dom) の vnode

vue-router がコンポーネントインスタンスを再利用するのを避けるために、vnode のキーを計算し、そのキーの値を vnode に割り当てます

ノードがキー値に基づいてキャッシュされます

1. Cached: キャッシュされたインスタンスをcomponentInstanceに割り当てます。これにより、vueはこのインスタンスに基づいてコンポーネントを復元します

2. Uncached: vnodeをメモリに保存し、メモリから復元できます次回そのページに戻ったとき
さらに、保持している閲覧記録が変更された場合、その閲覧記録に基づいて不要なキャッシュをクリアするロジックを追加する必要があります。現在のルートは: A->B->C です。ユーザーは C から A に直接戻り、その後 B と C の両方をキャッシュから削除する必要があります)。

1. 最後に

2. vueをベースに開発していますが、考え方は同じで、他のフレームワークでも同じことができます。
   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 モバイル Web アプリのページ キャッシュを解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。