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

问题描述

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

怎么解决？

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

 <keep-alive> <router-view :key="key" /> </keep-alive> 

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

<keep-alive :include="cachedViews"> <router-view :key="key" /> </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的相关的设置，可以查看这个文档。