安卓嵌入式混合開發，使用webview加載vue頁面，使用keep-alive緩存的問題。

問題描述

在嵌入式開發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的相關的設置，可以查看這個文檔。