pwa項(xiàng)目初探
pwa簡(jiǎn)介
PWA（Progressive Web App）是一種理念，使用多種技術(shù)來增強(qiáng)web app的功能病毡，可以讓網(wǎng)站的體驗(yàn)變得更好雷滋，能夠模擬一些原生功能平绩，比如通知推送恭垦。在移動(dòng)端利用標(biāo)準(zhǔn)化框架快毛，讓網(wǎng)頁應(yīng)用呈現(xiàn)和原生應(yīng)用相似的體驗(yàn)
pwa優(yōu)點(diǎn)
1、可以添加至主屏幕番挺，點(diǎn)擊主屏幕圖標(biāo)可以實(shí)現(xiàn)啟動(dòng)動(dòng)畫以及隱藏地址欄
2唠帝、實(shí)現(xiàn)離線緩存功能，即使用戶手機(jī)沒有網(wǎng)絡(luò)玄柏，依然可以使用一些離線功能
3襟衰、實(shí)現(xiàn)了消息推送
pwa特點(diǎn)
1、運(yùn)行于瀏覽器后臺(tái)禁荸，不受頁面刷新的影響右蒲，可以監(jiān)聽和截?cái)r作用域范圍內(nèi)所有頁面的 HTTP 請(qǐng)求。
2赶熟、網(wǎng)站必須使用 HTTPS。除了使用本地開發(fā)環(huán)境調(diào)試時(shí)(如域名使用 localhost)
3陷嘴、單獨(dú)的作用域范圍映砖，單獨(dú)的運(yùn)行環(huán)境和執(zhí)行線程
4、不能操作頁面 DOM灾挨。但可以通過事件機(jī)制來處理
5邑退、事件驅(qū)動(dòng)型服務(wù)線程
項(xiàng)目
基于vue-cli4.2竹宋，vue，ts開發(fā)的一款pwa應(yīng)用地技。
代碼ui借用了文章：[browse-exp開發(fā)到部署詳細(xì)介紹](https://github.com/HolyZheng/BrowseExp/blob/master/document.md)蜈七，在此特別感謝
因?yàn)榇宋恼虏皇墙坛蹋跃唧w編碼細(xì)節(jié)可以閱讀源碼莫矗，代碼很少
運(yùn)行項(xiàng)目
1飒硅、clone 代碼
2、`cnpm install` 或者 `npm install`
3作谚、`npm run serve`
4三娩、然后就可以瀏覽器本地訪問效果了
5、要完全體驗(yàn)pwa妹懒，需要部署到https的服務(wù)器上雀监，因?yàn)閿?shù)據(jù)是本地用json模擬的，所以可以直接部署眨唬，`npm run build` 后將product中的文件上傳到服務(wù)器会前，然后直接訪問路徑下的index.html即可
驗(yàn)收pwa是否生效(必須是https)
1、推薦瀏覽器谷歌匾竿，版本大于70瓦宜，本人測(cè)試瀏覽器版本 80.0.3987.132（正式版本） （64 位）
2、在瀏覽器中打開部署的網(wǎng)站搂橙，如果完成應(yīng)該會(huì)看到如下圖
pwa001.png
3歉提、如果上面已經(jīng)顯示正常，那么你應(yīng)該可以看到下圖的效果
pwa002.jpg
4区转、點(diǎn)擊“瀏覽我們的實(shí)驗(yàn)吧”中打開苔巨，此時(shí)電腦桌面應(yīng)該可以看到下圖效果，瀏覽器會(huì)在左面生成一個(gè)快捷圖標(biāo)
pwa003.png
5废离、然后斷開網(wǎng)絡(luò)侄泽，點(diǎn)擊上面生成的圖標(biāo)，此時(shí)就像沒有斷開網(wǎng)絡(luò)一樣蜻韭，可以看到如下圖
pwa004.png
最后是文章的代碼鏈接
有興趣的朋友可以 clone
