今天就跟大家聊聊有關(guān)漸進(jìn)式Web應(yīng)用PWA該如何入門(mén)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
成都創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比措美網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式措美網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋措美地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴(lài)。
最近關(guān)于漸進(jìn)式Web應(yīng)用有好多討論，有一些人還在質(zhì)疑漸進(jìn)式Web應(yīng)用是否就是移動(dòng)端未來(lái)。
移動(dòng)端Web應(yīng)用有很多優(yōu)秀的概念讓人應(yīng)接不暇，但好在編寫(xiě)一個(gè)漸進(jìn)式Web應(yīng)用不是一個(gè)很困難的事情。在這篇文章里將向你介紹如何把一個(gè)普通的網(wǎng)站轉(zhuǎn)換成漸進(jìn)式Web應(yīng)用。你可以按照這篇文章一步一步地做，做完之后你的網(wǎng)站將可以實(shí)現(xiàn)離線訪問(wèn)，并且可以在桌面上創(chuàng)建該網(wǎng)站的圖標(biāo)。那么下面即將開(kāi)始入門(mén)教程。
漸進(jìn)式Web應(yīng)用是一種全新的Web技術(shù)，讓W(xué)eb應(yīng)用和原生APP的體驗(yàn)相近或一致。
漸進(jìn)式Web應(yīng)用它可以橫跨Web技術(shù)及Native APP開(kāi)發(fā)的解決方案，對(duì)于開(kāi)發(fā)者的優(yōu)勢(shì)如下：
你只需要關(guān)心W3C的Web標(biāo)準(zhǔn)，不用關(guān)心各種Native APP的代碼。
用戶可以在安裝應(yīng)用之前先試用。
在漸進(jìn)式Web應(yīng)用中，你不需要使用各種應(yīng)用商店來(lái)分發(fā)應(yīng)用，也不用關(guān)心應(yīng)用發(fā)布時(shí)奇怪的審核標(biāo)準(zhǔn)以及應(yīng)用內(nèi)購(gòu)的平臺(tái)抽成。另外，應(yīng)用程序更新是自動(dòng)進(jìn)行的，無(wú)需用戶交互，所以整體的使用體驗(yàn)對(duì)于用戶來(lái)講更為的平滑。
漸進(jìn)式Web應(yīng)用的“安裝”過(guò)程很快，只需要在主屏幕上添加一個(gè)圖標(biāo)即可。
漸進(jìn)式Web應(yīng)用啟動(dòng)時(shí)可以顯示一個(gè)好看的啟動(dòng)畫(huà)面。
你可以在漸進(jìn)式Web應(yīng)用中提供具有全屏體驗(yàn)的應(yīng)用。
通過(guò)系統(tǒng)通知等形式提高用戶的粘性。
漸進(jìn)式Web應(yīng)用將會(huì)在本地緩存必要的文件，所以漸進(jìn)式Web應(yīng)用會(huì)比普通的Web應(yīng)用的性能更好。?
輕量級(jí)安裝——你只需要緩存幾百KB的數(shù)據(jù)即可。
所有的數(shù)據(jù)傳輸必須使用安全的HTTPS連接
漸進(jìn)式Web應(yīng)用可以離線緩存數(shù)據(jù)，并且會(huì)在重新連接互聯(lián)網(wǎng)時(shí)重新同步數(shù)據(jù)。
漸進(jìn)式Web應(yīng)用才剛剛開(kāi)始發(fā)展，但實(shí)際上在國(guó)內(nèi)，有些網(wǎng)站已經(jīng)實(shí)際開(kāi)始PWA的實(shí)踐了，例如：微博、豆瓣、淘寶等平臺(tái)。可能這時(shí)候聰明的你可能就會(huì)產(chǎn)生疑問(wèn)，那這個(gè)PWA不就是和微信小程序一樣嗎，對(duì)是這樣，二者的目的是一致的，就是在移動(dòng)端為用戶提供足夠輕量且與原生應(yīng)用使用體驗(yàn)相近的“輕”應(yīng)用。
但就目前來(lái)講，PWA是Google主推的一項(xiàng)技術(shù)標(biāo)準(zhǔn)，F(xiàn)ireFox，Chrome以及一些基于Blink的瀏覽器已經(jīng)支持漸進(jìn)式Web應(yīng)用了，Edge上對(duì)漸進(jìn)式Web應(yīng)用的支持還在開(kāi)發(fā)。Apple公司也表示會(huì)考慮在自己Safari支持PWA。然而這項(xiàng)功能已經(jīng)進(jìn)入了WebKit內(nèi)核的五年計(jì)劃中。長(zhǎng)期來(lái)看，對(duì)瀏覽器兼容性的支持方面應(yīng)該已經(jīng)不算太大問(wèn)題了。況且在現(xiàn)階段，在不支持漸進(jìn)式Web應(yīng)用的瀏覽器中，你的應(yīng)用也只是無(wú)法使用漸進(jìn)式Web應(yīng)用的離線功能而已，除此之外的功能均可以正常使用。
而在微信這邊，憑借龐大的用戶基數(shù)和體量能否與PWA分庭抗禮乃至笑到最后目前還不得而知。
大多數(shù)教程都講述的是如何在Chrome上從零開(kāi)始制作一個(gè)類(lèi)似原生界面的應(yīng)用。然而在這篇教程中，我們并不打算做一個(gè)單頁(yè)面應(yīng)用程序，所以在這我們也不必了解諸如Material Design等知識(shí)。那么下面我們就直接看示例吧。
你可以從GitHub中獲取本教程對(duì)應(yīng)的示例代碼。
本示例中提供了一個(gè)有四個(gè)網(wǎng)頁(yè)的網(wǎng)站，一個(gè)CSS文件和一個(gè)JavaScript文件。這個(gè)網(wǎng)站可以在所有的現(xiàn)代瀏覽器上正常工作（IE10+）。如果你的瀏覽器支持漸進(jìn)式Web應(yīng)用，用戶可以在離線狀態(tài)下將會(huì)直接訪問(wèn)緩存中的頁(yè)面。
要想運(yùn)行此示例，請(qǐng)確保你已經(jīng)安裝了Node.js。并請(qǐng)打開(kāi)命令行，使用以下命令來(lái)運(yùn)行該示例：
node ./server.js [port]
以上命令中，[port]是可選部分，默認(rèn)為8888。使用 Ctrl + C 即可停止Web服務(wù)器。
打開(kāi)基于Blink內(nèi)核的瀏覽器（Opera，Vivaldi，Chrome），然后在地址欄中輸入http://localhost:8888/（注意端口號(hào)是否正確），即可訪問(wèn)該示例。你可以打開(kāi)開(kāi)發(fā)者工具（F12 或者 Cmd/Ctrl + Shift + I）來(lái)查看控制臺(tái)信息。
查看首頁(yè)，也可以在頁(yè)面上點(diǎn)擊一下，然后使用以下方法進(jìn)入離線模式：
選中Network標(biāo)簽或者Application -> Service Workers 標(biāo)簽下的“離線”選項(xiàng)。重新訪問(wèn)之前訪問(wèn)過(guò)的網(wǎng)頁(yè)，之前網(wǎng)頁(yè)仍然會(huì)加載：
除了在PC瀏覽器訪問(wèn)外，你也可以在移動(dòng)設(shè)備上訪問(wèn)該示例。使用USB線纜將你的移動(dòng)設(shè)備連接到電腦上，然后從右上角三個(gè)點(diǎn)菜單中打開(kāi)More tools - Remote devices標(biāo)簽
點(diǎn)擊左側(cè)的Settings菜單，然后添加一條端口映射（Port Forwarding）的規(guī)則，將8888映射為localhost:8888，現(xiàn)在你可以直接在手機(jī)打開(kāi)Chrome然后訪問(wèn)http://localhost:8888 。
你可以使用瀏覽器的“添加到主屏幕”功能將當(dāng)前網(wǎng)頁(yè)添加到主屏幕，在你訪問(wèn)了幾個(gè)頁(yè)面之后，瀏覽器會(huì)將這個(gè)Web應(yīng)用“安裝”到你的設(shè)備上。瀏覽幾個(gè)頁(yè)面，關(guān)閉Chrome并將設(shè)備與電腦斷開(kāi)連接，點(diǎn)擊桌面上生成的圖標(biāo)，你會(huì)看到一個(gè)Splash頁(yè)面，并且你可以繼續(xù)瀏覽之前瀏覽過(guò)的頁(yè)面。
看完上述內(nèi)容，你們對(duì)漸進(jìn)式Web應(yīng)用PWA該如何入門(mén)有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
重慶分公司
重慶分公司
