前几天写了一篇文章关于如何实现一个简单版的pwa应用，端午撸了一个简易版知乎日报pwa。
关于如何写一个pwa，这里就不多介绍了，请移步这里。应用使用vue+vuex+axios，API这里，这里做了跨域处理，可以直接访问，但是返回的图片链接却无法访问（forbidden），暂时没有解决这个问题。
应用构建
使用vue作为前端框架，由于有些数据共享问题，所以使用了vuex来做状态管理。由于是移动端，这里使用rem来做适配，只需要在项目初始化的时候设定全局字体大小即可（当然这个字体是很大的，你需要在组件中重新定义相应的字体大小）。
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
// 页面宽度发生变化时动态生成根字体尺寸
window.onresize = function () {
var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth > 750) deviceWidth = 750; // Iphone6Plus的屏幕尺寸
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
}
页面主要三部分，头部，内容区以及侧边栏。
- 侧边栏主要是实现一个点击头部按钮滑出的动画效果，并没有做手势效果。
slider.png
- 头部就是一些常见的操作，不多只有最左侧的有效，为了弹出侧边栏，或者返回新闻列表页
head.png
红色区块点击弹出侧边栏，黑色区块这是返回首页
head.png
当然如果进入详情页变成箭头返回按钮，由于没有使用路由所以只能点击这里返回。
- 内容区分为一个轮播图和内容列表。
content.png
没有请求到图片，将就点了。
坑与填坑
- 请求借口返回的信息有些链接是基于http的所以这里需要转成https直接正则替换即可
- 内容详情返回的是html字符串以及css链接，渲染html字符串直接使用指令v-html即可，但是由于样式库加载过慢导致页面乱，所以这里用一个粗暴的方法，先隐藏内容，等css请求回来之后再显示。css的地址需要跨域所以采用fetch请求，我们只需要请求返回结果即可，而不用返回具体值：
fetch(cssUrl.replace(/http/g,'https'), {mode:'no-cors'})
.then(res => {
that.cssLoaded = true;
})
- 在调用vuex的store时，使用对象解构赋值（es7），所以先安装
babel-preset-stage-3，然后.babelrc文件要配置下
"presets": [
["latest", {
"es2015": { "modules": false }
}],
"stage-3"
]
pwa查看
由于pwa基于https，所以这里使用ngrok做代理，便于我们查看，当然你可以把做好的应用直接放到github上来查看。
关于ngrok的使用直接看官网即可，基础使用一看就懂https://ngrok.com。
实现效果
在手机上使用google浏览器打开，并添加到桌面
image.png
添加到手机桌面，左侧是原生App， 右侧是pwa
Screenshot_2017-05-31-14-46-56.jpg
配置的启动页
Screenshot_2017-05-31-14-47-12.jpg
打开之后
Screenshot_2017-05-31-15-55-13.jpg
我们可以看到，打开之后将浏览器的头部隐藏了，非常像一个原生APP。
断网之后
Screenshot_2017-05-31-14-48-04.jpg
由于没有缓存信息，所以页面为空，但头部依然有，而且可以打开侧边栏。我们知道网页都可以添加到桌面，但是断网之后， 就成了这样
Screenshot_2017-05-31-15-57-52.jpg
项目地址https://github.com/Stevenzwzhai/zhihu-daily
演示地址https://stevenzwzhai.github.io/zhihu-daily/
注：修复图片防盗链接，但是由于使用第三方缓存，所以可能会加载有点慢。
