前幾天寫了一篇文章關(guān)于如何實現(xiàn)一個簡單版的pwa應(yīng)用幢哨，端午擼了一個簡易版知乎日報pwa赡勘。
關(guān)于如何寫一個pwa，這里就不多介紹了嘱么，請移步這里狮含。應(yīng)用使用vue+vuex+axios，API這里曼振，這里做了跨域處理几迄，可以直接訪問，但是返回的圖片鏈接卻無法訪問（forbidden）冰评，暫時沒有解決這個問題映胁。
應(yīng)用構(gòu)建
使用vue作為前端框架，由于有些數(shù)據(jù)共享問題甲雅，所以使用了vuex來做狀態(tài)管理解孙。由于是移動端，這里使用rem來做適配抛人，只需要在項目初始化的時候設(shè)定全局字體大小即可（當然這個字體是很大的弛姜，你需要在組件中重新定義相應(yīng)的字體大小）妖枚。
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
// 頁面寬度發(fā)生變化時動態(tài)生成根字體尺寸
window.onresize = function () {
var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth > 750) deviceWidth = 750; // Iphone6Plus的屏幕尺寸
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
}
頁面主要三部分廷臼，頭部，內(nèi)容區(qū)以及側(cè)邊欄。
- 側(cè)邊欄主要是實現(xiàn)一個點擊頭部按鈕滑出的動畫效果荠商，并沒有做手勢效果寂恬。
- 頭部就是一些常見的操作，不多只有最左側(cè)的有效莱没，為了彈出側(cè)邊欄初肉，或者返回新聞列表頁
紅色區(qū)塊點擊彈出側(cè)邊欄，黑色區(qū)塊這是返回首頁
當然如果進入詳情頁變成箭頭返回按鈕饰躲，由于沒有使用路由所以只能點擊這里返回牙咏。
- 內(nèi)容區(qū)分為一個輪播圖和內(nèi)容列表。
沒有請求到圖片属铁，將就點了眠寿。
坑與填坑
- 請求借口返回的信息有些鏈接是基于http的所以這里需要轉(zhuǎn)成https直接正則替換即可
- 內(nèi)容詳情返回的是html字符串以及css鏈接，渲染html字符串直接使用指令v-html即可焦蘑，但是由于樣式庫加載過慢導(dǎo)致頁面亂盯拱，所以這里用一個粗暴的方法，先隱藏內(nèi)容例嘱，等css請求回來之后再顯示狡逢。css的地址需要跨域所以采用fetch請求，我們只需要請求返回結(jié)果即可拼卵，而不用返回具體值：
fetch(cssUrl.replace(/http/g,'https'), {mode:'no-cors'})
.then(res => {
that.cssLoaded = true;
})
- 在調(diào)用vuex的store時奢浑，使用對象解構(gòu)賦值（es7），所以先安裝
babel-preset-stage-3腋腮，然后.babelrc文件要配置下
"presets": [
["latest", {
"es2015": { "modules": false }
}],
"stage-3"
]
pwa查看
由于pwa基于https雀彼，所以這里使用ngrok做代理，便于我們查看即寡，當然你可以把做好的應(yīng)用直接放到github上來查看徊哑。
關(guān)于ngrok的使用直接看官網(wǎng)即可，基礎(chǔ)使用一看就懂https://ngrok.com聪富。
實現(xiàn)效果
在手機上使用google瀏覽器打開莺丑，并添加到桌面
添加到手機桌面，左側(cè)是原生App墩蔓， 右側(cè)是pwa
配置的啟動頁
打開之后
我們可以看到梢莽，打開之后將瀏覽器的頭部隱藏了，非常像一個原生APP奸披。
斷網(wǎng)之后
由于沒有緩存信息昏名，所以頁面為空，但頭部依然有阵面，而且可以打開側(cè)邊欄葡粒。我們知道網(wǎng)頁都可以添加到桌面份殿，但是斷網(wǎng)之后， 就成了這樣
項目地址https://github.com/Stevenzwzhai/zhihu-daily
演示地址https://stevenzwzhai.github.io/zhihu-daily/
注：修復(fù)圖片防盜鏈接嗽交，但是由于使用第三方緩存，所以可能會加載有點慢颂斜。
