2018年3月到4月在做一个车展项目，该项目实际上是将该公司线上购车网站转换成离线版，打包到ipad上，最终使得车展的参会者能够在iPad上体验线上购车和购买售后套餐的流程。
由于我们已经有了线上版本，那么把代码拷贝过来，并将数据缓存到本地上就好了。将线上数据缓存到本地是本次项目的难点。
图片、视频、字体等资源
对于一些静态资源文件，如js、css、image等直接下载到本地，并改写路径即可。
使用gsed重写部分文件路径。
例如我们对字体进行了这样的处理，在dist/static/js目录下的文件中找到对字体文件的使用，将路径改掉：
gsed -i -E 's#\/\w+-ec.woff#static/font\0#g' dist/static/js/*.js;
mkdir dist/static/font;
mv dist/*-ec* dist/static/font
后端数据
** PouchDB是受 Apache CouchDB启发为Web设计的一款占用空间少的数据库。它尤其适合于需要基于浏览器的可离线使用的存储方案的移动应用。**
this.db.put({
_id: request.getUrl(), // 使用url作为id
response: {
body: preProcess(response.json()), // 存储返回值
options: {status: response.status} // 存储http状态码
}
})
get /products
get /products/1
get /products/2
get /products/3
get /products/4
···
get /products/10
get /products/1/price
get /products/2/price
get /products/3/price
get /products/4/price
···
getBrandClass: vue.resource('./static/data/brands{/brand}/all-classes.json'),
allClasses: vue.resource('./static/data/all-classes/all-classes.json'),
更改一些接口返回的数据，使得整体的工作量可控。
其他减小工作量的举措：
-
车系列表中有40多种车，但只会随机跳转到两个车辆详情页面
-
无论选择购车城市在哪儿，都按照在北京处理（往后传递的参数都是北京）。
-
其他类似处理
最后，pouchDB总共缓存了200+请求数据， 本地大概有十几个json数据集。
对技术方案的思考
打包
开发完成之后， 使用Cordova打成iPad上能使用的包，但有一点需要注意的是cordova使用的浏览器内核版本，低版本的内核性能较差，在列表滚动和跳转的时候感受到了明显的掉帧，最终升级内核版本解决了这个问题。
--END--