一個知乎日報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/

注：修復圖片防盜連接，可是因爲使用第三方緩存，因此可能會加載有點慢。