一个知乎日报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. 侧边栏主要是实现一个点击头部按钮滑出的动画效果，并无作手势效果。

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

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

固然若是进入详情页变成箭头返回按钮，因为没有使用路由因此只能点击这里返回。

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

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

坑与填坑

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;
            })

1. 在调用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/

注：修复图片防盗连接，可是因为使用第三方缓存，因此可能会加载有点慢。