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

    }

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

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

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

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

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

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

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

坑与填坑

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

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

配置的启动页

打开之后

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

断网之后

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

项目地址https://github.com/Stevenzwzhai/zhihu-daily

演示地址https://stevenzwzhai.github.io/zhihu-daily/

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