离线应用

阅读本文，你将了解：

• 如何处理前端静态资源包；
• 如何设置离线应用的访问地址；
• 如何控制版本更新。

离线应用，就是把前端静态资源文件放置到客户端本地，提高访问速度的同时，也节省流量。当前离线应用功能只在移动客户端上提供。

压缩包规范

发布离线应用，需要对前端资源包进行压缩，格式规定为zip。除了格式要求，资源的目录也同样有要求，以下面例子为例：

正确的做法是，选中mobile文件夹进行压缩，而不是全选 mobile 内所有文件进行压缩。压缩包生成后，上传即可。

离线包外部备用地址

除了在平台上传资源包外，还可以设置离线包外部备用地址，地址为一个在线可访问的资源地址，压缩包的规范需要保持一致。当设置了离线包外部备用地址时，客户端会优先使用该地址下载离线资源。

为了提高资源包的下载速度，可以配合 CDN 来设置该备用地址。

启动地址

压缩包上传成功后，还需要设置应用的启动地址。

当应用上架后被首次打开，客户端会根据应用的设置，把离线资源包下载到本地，并进行解压。所以离线应用在首次打开都会比较慢，因为多了一个下载及解压资源的过程。为了能在解压后，找到对应的应用，客户端制定了一套 URL 规范，根据上一步生成的压缩包，启动地址应该是这样填写：

local://mobile/index.html

URL 解析说明：

• local:// 特定协议，客户端会以离线应用的方式处理；
• mobile 压缩包解压后的一级目录，如果是多层级的，都可以拼上去；
• index.html 应用的入口文件。

前端 API 地址

因为离线应用是以file://协议打开，如下:

file://offline-app/app_id/version/mobile/index.html

所以，在离线应用中，Ajax 请求的 api 地址，切勿使用相对路径，请使用全路径。

iOS WKWebView 的问题

基于WKWebView的安全机制，离线应用以file://协议访问资源，而Ajax请求是走http的，这种情况下，会被认定为跨域。解决跨域的方式有很多，例如后台做CORS处理。

但是这里还存在一个问题，就是cookie。因为 cookie 本身也是有同源的限制，所以在跨域的情况下，cookie 无法被正常传递。所以，我们推荐使用其他的方式进行用户身份认证，例如使用jwt(json web token)。

更新机制

离线应用的更新，就不会像以http打开的应用方便。

如果需要更新离线应用，需要在管理后台上架新的应用版本，然后上传新的离线资源包。当应用上架后，在客户端首次打开，客户端会检测到应用有更新，就会再次下载并解压离线资源包，完成后，应用将正常打开。

上架新版本后，可以在客户端切换底部 tab 来触发同步更新。