第三方網站返回hybrid app H5頁面緩存問題應對策略

　　最近負責公司各產品線購買模塊的開發，各項功能如期開發完成後測試那邊反饋回來一個問題：IOS手機在點擊支付寶購買後，跳轉到支付寶網站時不輸入支付密碼，直接點返回，返回到咱們本身的APP購買界面發現頁面顯示內容是第一次進入購買頁面時候的設備信息，不能完整的還原新設備的購買界面，安卓手機不存在這個問題。經排查，原來是蘋果手機的緩存策略致使，第一次點擊購買的時候，參數已經注入到頁面，post請求後正確跳轉到第三方支付寶網站，不購買直接返回，因爲蘋果手機緩存了以前的購買頁面，致使返回的時候再也不發送post請求去服務器請求數據，只是get了緩存的一個頁面，致使頁面信息不對。

　　這個問題比較棘手，由於咱們已經使用了cookies存儲頁面數據來解決從第三方網站返回時候頁面參數丟失的問題，當沒有頁面參數傳入的時候就去cookie裏面取，這種方法對安卓手機是管用的，由於安卓手機是緩存的連接，可是對於IOS的緩存策略，已經不會再去發送post請求取參數了，所以咱們須要單獨針對IOS的移動設備作解決方案。.

　　經嘗試，決定使用sessionStorage來規避IOS頁面被緩存的問題。正請求使用SessionStorage來存儲參數，而後和緩存的歷史頁面參數作對比，不一致則location.reload(true)強制刷新。關鍵代碼以下：

 1 beforeCreate() {
 2             let ua = navigator.userAgent.toLowerCase();
 3             if (ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1) {
 4                 try {
 5                     let key = '_purchase_page_params_',
 6                         deviceId = PAGE_PARAMS.deviceId;
 7                     if (history.length > 1) {//當從第三方頁面返回
 8                         if (!deviceId) {  //若沒有獲取到設備id，則強制刷新
 9                             location.reload(true);
10                         } else {
11                             let storageParams = null,
12                                 str = sessionStorage.getItem(key) || '';
13                             if (str) {
14                                 storageParams = JSON.parse(str);
15                             }
16                             if (storageParams && storageParams.deviceId !== deviceId) {//對比參數，不一致則強制刷新
17                                 location.reload(true);
18                             }
19                         }
20                     } else {
21                         sessionStorage.setItem(key, JSON.stringify(PAGE_PARAMS));
22                     }
23                 } catch (e) {
24                     console.error(e.message);
25                 }
26             }
27         }

經測試，解決此問題。