对一个离线版网站的项目总结

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设计的一款占用空间少的数据库。它尤其适合于需要基于浏览器的可离线使用的存储方案的移动应用。**

我们的做法是在http模块加一个拦截器， 每一个请求通过时，将其url作为主键，将其返回值和状态码存储到PouchDB中。具体代码如下：

this.db.put({

    _id: request.getUrl(),  // 使用url作为id

    response: {

    body: preProcess(response.json()),  // 存储返回值

    options: {status: response.status}  // 存储http状态码

    }

})

我们加入拦截器之后，必须设法触发所有的请求，这样才能保证pouchDB存储了所有的http请求。那这个工作量如何呢？

如果一个商品列表页面有十个商品， 那么有10个链接通往商品详情页面，如果每个商品详情页面又有3个请求去拉取该商品各部分信息。那么仅仅这两个页面就有10 + 10 * 3共40个不同的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

···

我们发现如果想要将系统所有可能的http请求触发一遍几乎是不可能，即使强行人工去做，也可能存在遗漏。在这种情况下，我们对一些数据和接口做了处理。比如商品列表接口本来要返回200件商品，我们只返回10件商品，具体办法是将商品列表请求指向本地商品json数据。

  getBrandClass: vue.resource('./static/data/brands{/brand}/all-classes.json'),

  allClasses: vue.resource('./static/data/all-classes/all-classes.json'),

更改一些接口返回的数据，使得整体的工作量可控。

其他减小工作量的举措：

• 车系列表中有40多种车，但只会随机跳转到两个车辆详情页面

• 无论选择购车城市在哪儿，都按照在北京处理（往后传递的参数都是北京）。

• 其他类似处理

最后，pouchDB总共缓存了200+请求数据， 本地大概有十几个json数据集。

对技术方案的思考

在将一个网站整体静态化的过程中，使用直接缓存所有http请求的方式使得几乎不需要对代码做出更改，改代码的工作主要是去除登录验证，以及部分参数处理逻辑。

但http请求往往具有相关性，比如列表页返回列表项的id为[1, 2, 3]，那么详情页面使用的参数肯定是[1, 2, 3]。这样的话如果列表页面返回的数据变了，详情页等后续页面的缓存数据也就全失效了。我们的解决方案是开发过程中不去管pouchDB，还是直接使用线上数据和本地json数据集。所有的开发完成之后，并且需求不再变动之后才会让QA或其他负责人去遍历所有页面和各种http请求组合，做数据缓存的工作。

打包

开发完成之后， 使用Cordova打成iPad上能使用的包，但有一点需要注意的是cordova使用的浏览器内核版本，低版本的内核性能较差，在列表滚动和跳转的时候感受到了明显的掉帧，最终升级内核版本解决了这个问题。

--END--