一个知乎日报pwa

前几天写了一篇文章关于如何实现一个简单版的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';
    }

页面主要三部分，头部，内容区以及侧边栏。

侧边栏主要是实现一个点击头部按钮滑出的动画效果，并没有做手势效果。

一个知乎日报pwa

头部就是一些常见的操作，不多只有最左侧的有效，为了弹出侧边栏，或者返回新闻列表页

一个知乎日报pwa
红色区块点击弹出侧边栏，黑色区块这是返回首页

一个知乎日报pwa
当然如果进入详情页变成箭头返回按钮，由于没有使用路由所以只能点击这里返回。

内容区分为一个轮播图和内容列表。

一个知乎日报pwa
没有请求到图片，将就点了。

坑与填坑

请求借口返回的信息有些链接是基于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浏览器打开，并添加到桌面