Vue+PWA初嘗試

前陣子在個(gè)項(xiàng)目做緩存的過(guò)程中,無(wú)意間發(fā)現(xiàn)PWA這個(gè)好東西席函,當(dāng)時(shí)比較忙沒(méi)來(lái)細(xì)細(xì)研究铐望,現(xiàn)在回過(guò)來(lái)頭來(lái)看看。

什么是PWA

介紹就不介紹了茂附,這里有更詳細(xì)的正蛙,直接開(kāi)始實(shí)驗(yàn)。

創(chuàng)建項(xiàng)目

使用vue-cli3來(lái)構(gòu)建項(xiàng)目基本的結(jié)構(gòu)营曼,在選擇配置項(xiàng)的時(shí)候把PWA support勾上乒验。


1559207702.png

配置項(xiàng)

首先我們需要配置一下webpack打包后的路徑,不然我們將會(huì)看到一片空白和一堆404的報(bào)錯(cuò)蒂阱。
在根目錄下創(chuàng)建vue.config.js,然后寫一些簡(jiǎn)單的配置锻全。

module.exports = {
    publicPath: './'
};

然后來(lái)到src里面找到registerServiceWorker.js文件狂塘,這個(gè)就是service workers的配置文件,可以對(duì)sw的各個(gè)生命周期進(jìn)修改,這次主要是簡(jiǎn)單的體驗(yàn)功能所以我并沒(méi)有修改

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        '準(zhǔn)備完成'
      )
    },
    registered () {
      console.log('注冊(cè)成功')
    },
    cached () {
      console.log('緩存')
    },
    updatefound () {
      console.log('正在下載新內(nèi)容.')
    },
    updated () {
      console.log('新內(nèi)容可用鳄厌;請(qǐng)刷新.')
    },
    offline () {
      console.log('找不到Internet連接荞胡。應(yīng)用程序正在脫機(jī)模式下運(yùn)行')
    },
    error (error) {
      console.error('服務(wù)工作者注冊(cè)過(guò)程中出錯(cuò):', error)
    }
  })
}

接下來(lái)進(jìn)入public文件加找到manifest.json文件,這個(gè)是為了實(shí)現(xiàn) PWA 應(yīng)用添加至桌面的功能了嚎,可以配置用的圖標(biāo)泪漂、名稱等信息。詳細(xì)可以看https://pwa.baidu.com/pwa/engage-retain-users/add-to-home-screen/introduction歪泳,打不開(kāi)的復(fù)制鏈接再打開(kāi)萝勤。

{
  "name": "PWA-DEMO",   //項(xiàng)目主名稱
  "short_name": "DEMO",   //項(xiàng)目小名
  "icons": [   //設(shè)置你需要的logo圖標(biāo),我這里隨便找了一張
    {
      "src": "./timg.jpg",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./timg.jpg",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",    //啟動(dòng)頁(yè)面
  "display": "standalone",      //啟動(dòng)過(guò)渡動(dòng)畫
  "background_color": "#000000",    //背景顏色
  "theme_color": "#4DBA87"    //導(dǎo)航欄顏色
}

然后

接下來(lái)打包呐伞,然后部署的服務(wù)器(sw為了安全起見(jiàn)要求在https環(huán)境下)敌卓,打開(kāi)。
因?yàn)檫M(jìn)本沒(méi)有修改任何的頁(yè)面代碼伶氢,所以長(zhǎng)這樣的趟径。


1559210648(1).png

打開(kāi)開(kāi)發(fā)者工具,到application下的service workers勾選Offline癣防,模擬一個(gè)斷網(wǎng)的情況舵抹。

1559210897(1).png

然后按F5刷新,你就會(huì)神奇的發(fā)現(xiàn)即使沒(méi)有網(wǎng)絡(luò)依然能夠正常的訪問(wèn)劣砍,這就是pwa的神奇之處。

最后附上git地址:https://gitee.com/HelpG/pwa-demo.git

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末扇救,一起剝皮案震驚了整個(gè)濱河市刑枝,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌迅腔,老刑警劉巖装畅,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異沧烈,居然都是意外死亡掠兄,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門锌雀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蚂夕,“玉大人,你說(shuō)我怎么就攤上這事腋逆⌒鲭梗” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵惩歉,是天一觀的道長(zhǎng)等脂。 經(jīng)常有香客問(wèn)我俏蛮,道長(zhǎng),這世上最難降的妖魔是什么上遥? 我笑而不...
    開(kāi)封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任搏屑,我火速辦了婚禮,結(jié)果婚禮上粉楚,老公的妹妹穿的比我還像新娘辣恋。我一直安慰自己,他們只是感情好解幼,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布抑党。 她就那樣靜靜地躺著,像睡著了一般撵摆。 火紅的嫁衣襯著肌膚如雪底靠。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天特铝,我揣著相機(jī)與錄音暑中,去河邊找鬼。 笑死鲫剿,一個(gè)胖子當(dāng)著我的面吹牛鳄逾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播灵莲,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼雕凹,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了政冻?” 一聲冷哼從身側(cè)響起枚抵,我...
    開(kāi)封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎明场,沒(méi)想到半個(gè)月后汽摹,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡苦锨,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年逼泣,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片舟舒。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡拉庶,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出魏蔗,到底是詐尸還是另有隱情砍的,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布莺治,位于F島的核電站廓鞠,受9級(jí)特大地震影響帚稠,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜床佳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一滋早、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧砌们,春花似錦杆麸、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至影兽,卻和暖如春揭斧,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背峻堰。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工讹开, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人捐名。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓旦万,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親镶蹋。 傳聞我的和親對(duì)象是個(gè)殘疾皇子成艘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361