# 离线应用

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

# 压缩包的规范

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

离线资源

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

# 启动地址

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

当应用上架后被首次打开,客户端会根据应用的设置,把离线资源包下载到本地,并进行解压。所以离线应用在首次打开都会比较慢,因为多了一个下载及解压资源的过程。为了能在解压后,找到对应的应用,客户端制定了一套 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 来触发同步更新。