第三方网站返回hybrid app H5页面缓存问题应对策略
最近负责公司各产品线购买模块的开发,各项功能如期开发完成后测试那边反馈回来一个问题:IOS手机在点击支付宝购买后,跳转到支付宝网站时不输入支付密码,直接点返回,返回到我们自己的APP购买界面发现页面显示内容是第一次进入购买页面时候的设备信息,不能完整的还原新设备的购买界面,安卓手机不存在这个问题。经排查,原来是苹果手机的缓存策略导致,第一次点击购买的时候,参数已经注入到页面,post请求后正确跳转到第三方支付宝网站,不购买直接返回,由于苹果手机缓存了之前的购买页面,导致返回的时候不再发送post请求去服务器请求数据,只是get了缓存的一个页面,导致页面信息不对。
这个问题比较棘手,因为我们已经使用了cookies存储页面数据来解决从第三方网站返回时候页面参数丢失的问题,当没有页面参数传入的时候就去cookie里面取,这种方法对安卓手机是管用的,因为安卓手机是缓存的链接,但是对于IOS的缓存策略,已经不会再去发送post请求取参数了,因此我们需要单独针对IOS的移动设备做解决方案。.
经尝试,决定使用sessionStorage来规避IOS页面被缓存的问题。正请求使用SessionStorage来存储参数,然后和缓存的历史页面参数做对比,不一致则location.reload(true)强制刷新。关键代码如下:
beforeCreate() {
let ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1) {
try {
let key = '_purchase_page_params_',
deviceId = PAGE_PARAMS.deviceId;
if (history.length > 1) {//当从第三方页面返回
if (!deviceId) { //若没有获取到设备id,则强制刷新
location.reload(true);
} else {
let storageParams = null,
str = sessionStorage.getItem(key) || '';
if (str) {
storageParams = JSON.parse(str);
}
if (storageParams && storageParams.deviceId !== deviceId) {//对比参数,不一致则强制刷新
location.reload(true);
}
}
} else {
sessionStorage.setItem(key, JSON.stringify(PAGE_PARAMS));
}
} catch (e) {
console.error(e.message);
}
}
}
经测试,解决此问题。
第三方网站返回hybrid app H5页面缓存问题应对策略的更多相关文章
- hybrid App h5二级页面返回的时候保持与一级页面浏览的位置一致
最近在开发公司hybrid app的时候,需要将原本原生的配置中心模块统一变更为H5,做完之后从测试那里反馈回来这样一个问题,当滑到页面底部或中部的时候进入子页面进行设置,返回的时候页面应该定位到离开 ...
- APP H5页面显示优化
在开发移动端APP页面时,对各操作系统各种型号的手机进行适配是必须的.然鹅,上周在开发完一个落地页后,被测试给打了回来,其中列出了一个在我看来很小的问题:单击进入页面的时候,页面还没加载完的时候字体显 ...
- 手机app/h5页面http请求抓包调试
1.抓包机器跟客户端手机连上同一wifi热点,最好是第三者提供的移动wifi,公司内网wifi网络访问有限制. 2.设置手机客户端http代理 三者关系图示:
- Hybrid App中原生页面 VS H5页面(分享)
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...
- springboot和redis处理页面缓存
页面缓存是应对高并发的一个比较常见的方案,当请求页面的时候,会先查询redis缓存中是否存在,若存在则直接从缓存中返回页面,否则会通过代码逻辑去渲染页面,并将渲染后的页面缓存到redis中,然后返回. ...
- hybrid app初体验,和react-native一起飞
第一次启动了react-native的示例,今天主要把其中遇到的坑与解决的办法分享给大家.如有疏漏.错误还望指正. 首先还是要从hybrid app这个概念说起(如果对于这个过程不感兴趣的同学,可以直 ...
- Hybrid APP基础篇(三)->Hybrid APP之Native和H5页面交互原理
本文已经不维护,新地址: http://www.cnblogs.com/dailc/p/8097598.html 说明 Hybrid模式原生和H5交互原理 目录 前言 参考来源 前置技术要求 楔子 A ...
- Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Nativ ...
- Hybrid APP之Native和H5页面交互原理
Hybrid APP之Native和H5页面交互原理 Hybrid APP的关键是原生页面与H5页面直接的交互,如下图,痛过JSBridge,H5页面可以调用Native的api,Native也可调用 ...
随机推荐
- 题解 P1074 【靶形数独 】
这是一神题!!! 可能是因为我太弱了,题解都看不太懂QWQ 不过感谢wng老师的提醒,我写出了这个样的的代码. 分析: 这道题是一个搜索(dfs).很神奇很暴力的题 首先,你需要看懂题目.(可以先去玩 ...
- CCF CSP 201403-3 命令行选项
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201403-3 命令行选项 问题描述 请你写一个命令行分析程序,用以分析给定的命令行里包含哪些 ...
- CCF CSP 201412-3 集合竞价
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201412-3 集合竞价 问题描述 某股票交易所请你编写一个程序,根据开盘前客户提交的订单来确 ...
- Java学习(Map接口)
一.概述: 我们通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同,如下图. 1. Collection中的集合,元素是孤立存在的(理解为单身), ...
- swftools中的pdf2swf转换Error overflow ID 65535 解决办法
近几日因为项目需要在线转换pdf到swf实现电子期刊阅读,用到了这个工具,版本是:swftools-0.9.2.tar.gz 当然也遇到了很头疼的问题,那就是在转换pdf中色彩图形比较复杂的页时会抛出 ...
- Codeforces Round #334 (Div. 1) B. Moodular Arithmetic
B - Moodular Arithmetic 题目大意:题意:告诉你p和k,其中(0<=k<=p-1),x属于{0,1,2,3,....,p-1},f函数要满足f(k*x%p)=k*f( ...
- JAVAEE——SSH项目实战05:用户注册、登陆校验拦截器、员工拜访客户功能和MD5加密
作者: kent鹏 转载请注明出处: http://www.cnblogs.com/xieyupeng/p/7170519.html 一.用户注册 显示错误信息到页面上的另一种方法: public ...
- Bomb HDU 3555 dp状态转移
题目:http://acm.hdu.edu.cn/showproblem.php?pid=3555 题意: 给出一个正整数N,求出1~N中含有数字“49”的数的个数 思路: 采用数位dp的状态转移方程 ...
- window.open()/剪切板ZeroClipboard
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- android 定时, 延时 任务
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 倒计时类 用 倒计时定时器CountDownTimer 延迟类 CountDownT ...