安卓嵌入式混合开发，使用webview加载vue页面，使用keep-alive缓存的问题。

Floria ·

更新时间:2024-09-20

· 658 次阅读

问题描述

在嵌入式开发android app时，使用webview来加载vue开发的web应用，如果只是单纯的使用keep-alive来缓存页面数据。会导致，用户token过期，或是用户退出登录，缓存的页面数据还在，哪怕换个用户登录，页面的数据居然还是上一个用户登录后留下的数据，这个bug怎么能行？

怎么解决？

第一步：前端肯定从keep-alive入手

由这种不控制缓存页面的方式，修改为


// ++++++++++++++++++++
computed: {
    key() {
      return this.$route.path;
    },
    cachedViews() {
      return this.$store.state.app.cachedViews;
    },
  },

通过include来控制需要缓存的页面组件。在页面切换的地方，触发在vuex保存cachedViews的方法。

vuex中的app.js模块：

const state = {
  cachedViews: [], // 缓存view，keepalive是AppMain组件下的
};
const mutations = {
  SET_LANGUAGE: (state, language) => {
    state.language = language;
    Cookies.set("language", language);
  },
  ADD_CACHED_VIEW: (state, view) => {
    if (state.cachedViews.includes(view.name)) return;
    state.cachedViews.push(view.name);
  },
  DEL_CACHED_VIEW: (state, view) => {
    for (const i of state.cachedViews) {
      if (i === view.name) {
        const index = state.cachedViews.indexOf(i);
        state.cachedViews.splice(index, 1);
        break;
      }
    }
  },
  DEL_ALL_CACHED_VIEWS: (state) => {
    state.cachedViews = [];
  },
};
const actions = {
  // 添加缓存view
  addCachedView({ commit }, view) {
    commit("ADD_CACHED_VIEW", view);
  },
  // 删除缓存view
  delCachedView({ commit, state }, view) {
    return new Promise((resolve) => {
      commit("DEL_CACHED_VIEW", view);
      resolve([...state.cachedViews]);
    });
  },
  // 清空缓存view
  delAllCachedViews({ commit, state }) {
    return new Promise((resolve) => {
      commit("DEL_ALL_CACHED_VIEWS");
      resolve([...state.cachedViews]);
    });
  },
};
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

重点1：在用户token失效，或是退出登录的时候，需要清除页面缓存。调用方法dispatch("app/delAllCachedViews"）来清除缓存。

修改完上面的之后，在浏览器，移动端浏览器，使用就正常的。

但是在安卓嵌入式开发的页面，webview加载的，就是不行。每次切换页面，都会触发加载数据，调用api接口。

重点2，解决办法是，Android端，需要配置webview的配置项。这是第二次在这个配置项这里遇到问题。

WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
//缓存模式如下：
//LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
//LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。
//LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
//LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。

将webview的缓存模式，修改为LOAD_CACHE_ELSE_NETWORK，只要本地有，就使用本地缓存。
然后让安卓端，在退出app的时候，清除掉缓存。
这样就可以实现，用户进入app后，可以享用缓存带来的优秀的体验效果。也可以让用户在退出后再次登录的时候，也会及时的去加载最新的数据。

备注：
我们当前这个嵌入式app, 就安全是一个安卓的壳，套了一个我前端开发的webapp页面。所以，才采用这种方式来解决问题。

还是那句，具体场景，具体分析。

参考：
1、这是一份全面 & 详细的Webview使用攻略
https://www.jianshu.com/p/3c94ae673e2a

进行webveiw的相关的设置，可以查看这个文档。