一个知乎日报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';
    }

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

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

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

红色区块点击弹出侧边栏，黑色区块这是返回首页

当然如果进入详情页变成箭头返回按钮，由于没有使用路由所以只能点击这里返回。
3. 内容区分为一个轮播图和内容列表。

没有请求到图片，将就点了。

坑与填坑

1. 请求借口返回的信息有些链接是基于http的所以这里需要转成https直接正则替换即可
2. 内容详情返回的是html字符串以及css链接，渲染html字符串直接使用指令v-html即可，但是由于样式库加载过慢导致页面乱，所以这里用一个粗暴的方法，先隐藏内容，等css请求回来之后再显示。css的地址需要跨域所以采用fetch请求，我们只需要请求返回结果即可，而不用返回具体值：

		fetch(cssUrl.replace(/http/g,'https'), {mode:'no-cors'})
			.then(res => {
				that.cssLoaded = true;
			})

3. 在调用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浏览器打开，并添加到桌面

添加到手机桌面，左侧是原生App， 右侧是pwa

配置的启动页

打开之后

我们可以看到，打开之后将浏览器的头部隐藏了，非常像一个原生APP。
断网之后

由于没有缓存信息，所以页面为空，但头部依然有，而且可以打开侧边栏。我们知道网页都可以添加到桌面，但是断网之后， 就成了这样

项目地址https://github.com/Stevenzwzhai/zhihu-daily
演示地址https://stevenzwzhai.github.io/zhihu-daily/

注：修复图片防盗链接，但是由于使用第三方缓存，所以可能会加载有点慢。