做 App + H5 混合应用的请进，想听听看看

[karott7]

公司是做 app 的，然后有些复杂的或者活动页面会用 H5 做，然后嵌套在 app 里。
想知道有多少人选择离线包方案，相比于打开 webview 加载 H5 使用 HTTP 缓存策略，你们觉得哪种方案更好？

- 离线包方案：将整个 H5 资源包打包到服务器，启动 app 进入首页时空闲期间下载离线包
- webview + http 缓存方案就不解释了

[StarainX]

使用 H5 的优势之一是可以实时更新吧， 下载离线包的更新策略不大好控制
多数还是偏向于 webview + http 缓存的模式吧

[wu67]

webview + h5, 可以不更新 app 就能直接改页面, 前提是你们没有用到 native js. 这种情况下体验比较接近原生应用.

[stefanieewu]

所谓离线包不就是提前下载打包出来的资源么？跟 webview + http 缓存方案有啥区别？

[RightHand]

都离线包了为啥不做原生 app 呢，h5 就是为了时效性才用的

[karott7]

@RightHand @StarainX @stefanieewu @wu67
我公司做的 app 是面向手机低端用户，他们手机不太好，网络也差，所以就经常首次加载白屏，我那时候技术不行，不会用 http 缓存以及解决首屏加载时白屏问题，所以当时就选择了离线包方案。
- 离线包方案也还行，进入 app 首页就全量加载所有 H5 资源，用户网络不好也能加载页面。缺点是随着 H5 项目增大，我觉得每次全量加载浪费带宽流量，当然也可以做增量，但这不是重新实现 http 缓存么；你要真说用户网络很差提前加载页面，但现在页面都要请求，有页面没请求响应不也一样么
- 使用 http 缓存我觉得应该是很好的方案，index.html 设置 no-store ，css/js/image 等其他资源设置比较长的有效期，用户按需加载，我觉得对于绝大多数情况表现都好；对于某些场景，可以在页面空闲时间预加载其他页面资源

就是跟同事就这两个方案意见不一，来看看大家怎么选的

[okakuyang]

当然是离线包好控制了。离线包是一个压缩文件，比 http 请求几十次要稳定的多。

[july1995]

歪个楼请教个问题，大家用 app 嵌套 h5 的时候，你们在移动端怎么调试的？

[stardust21]

可以进入首页后按 url 列表下载资源，然后本地有资源的情况容器拦截请求直接返回本地资源，本地没有的走在线加载，这样就不需要打一个全量包了。

[kop1989smurf]

@karott7 #5 离线方案的优势是预加载，预部署。要靠业务来维护预加载的逻辑。如果是每次 application 的 onCreate 都全量重新异步加载，那其实这就不叫什么“离线”。顶多算是异步方案。

http 缓存机制的问题就是不可控。
比如你 app 的 launcher 需要一个新的静态 html 广告，这时候如果是纯 http 缓存机制就会吃瘪。

@july1995 #7 这个调试指的是 ui 方面还是业务方面？
ui 方面可以直接通过 chrome/safari 真机调试，恕不赘述。

业务方面，且是 Vue 或 React 的话，建议 js 这边模拟一个 JSBridge ，先通过模拟的 JSBridge 调通，再走真机。否则“编译”过的 js 在真机上确实不好调试。

[karott7]

@stardust21 你这个想法其实就是 http cache 的逻辑，http 缓存都是存在你的手机或者浏览器本地，https://stackoverflow.com/questions/61824427/where-is-the-storage-location-of-the-browsers-http-cache-disk-or-memory

[karott7]

@kop1989smurf
1. 先说 app 需要新的静态 html 广告的问题，我觉得这个属于特殊场景，我也不是做客户端的，不过启动广告一般都是用 cdn 提速加载吧，靠默认的加载肯定不满足需求，另外这中广告如果是图片的话走缓存的话也就第一次加载慢点，后面都是缓存
2. 说下 http 缓存机制不可控在哪？请举例

[karott7]

@july1995 我是全局设置一个元素和一个状态，请求后的数据如果要看，就打印成 json 放在当前页面后面

[Bijiabo]

有点好奇如何比较好的定义“空闲期间”，希望能够给一些思路

[kop1989smurf]

@karott7 #11
“启动广告一般都是用 cdn 提速加载吧，靠默认的加载肯定不满足需求，另外这中广告如果是图片的话走缓存的话也就第一次加载慢点，后面都是缓存”

你已经把离线 html 的优势都忽略了，我不太明白你还让我举例什么。

换句话说就是：
依赖 http 缓存机制，能够实现预加载（未使用，先缓存）么？
不能的话，就会导致首次使用体验不好。
于此同时，过期控制等等其实两种方法都存在，只不过一个在业务代码中，一个在 header 里。

但话说回来，既然对性能不敏感，争论离线 html ，还是信赖 http 缓存机制，有什么意义呢？

[kop1989smurf]

@Bijiabo #13
本帖的“空闲期间”其实非常宽泛，可以是任何时候。因为用离线 html 的初衷就是要预加载。
你现在下的，是下一次活动，或者下一次版本更新的内容。所以完全可以无视 ui 状态静默下载。

至于说紧急更新校验，可以放在 app 的类似 onLaunch 事件中。或者首个页面的 onCreate 中。

[lisongeee]

> index.html 设置 no-store ，css/js/image

应该是 index.html 使用协商缓存，css/js/image 的 url 带上 hash 使用永久强缓存

[kop1989smurf]

@karott7 #11 而且你一会说是老手机，弱网环境，一会又说首次加载不重要，我就有点不理解了。

[karott7]

@Bijiabo 其实也没有确切的定义，我会在进入首页后用 setTimeout(preload, 500) 去加载其他页面资源，比如使用 import ，vite 会给你生成 <link rel="modulepreload" src="" />

[kop1989smurf]

当然，还有第三种选择：Service Worker
但我个人并没有实践过，而且也与本文的焦点不重合，恕不赘述。
https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers

[karott7]

@kop1989smurf
1. 首先不是来争论哪个方案绝对胜利的，我只是表达 http 缓存方案大多数情况下完全满足需求，像首屏广告这样没有请求的静态资源走离线包提前获取很合理。

2. 没说首次加载不重要，对于 spa 应用，页面都是懒加载，首屏资源体积如果控制得好，几百 kb 一般用户加载也不慢，我只是觉得和服务器有交互的页面没必要走离线包

先睡了，明天再讨论