詳細(xì)信息
當(dāng)前位置: 首頁(yè)> 詳細(xì)信息
Design Lab | 如何設(shè)置網(wǎng)站的PWA應(yīng)用發(fā)布Web APP
專欄:Design Lab
發(fā)布日期:2020-02-25
閱讀量:5574
作者:今科科技

PWA是什么?
PWA(Progreesive Web Apps),由谷歌最早提出的一種漸進(jìn)式增強(qiáng)型的網(wǎng)頁(yè)應(yīng)用Web App概念。PWA也被稱為“遠(yuǎn)古小程序”,小程序本質(zhì)上是網(wǎng)頁(yè),需要橫跨手機(jī)系統(tǒng)和App兩個(gè)平臺(tái)限制;而PWA在系統(tǒng)層面將網(wǎng)頁(yè)打包成App,具有跨平臺(tái)的通用性和兼容性,讓網(wǎng)頁(yè)App具備原生App的功能特性。

1553043448564017112.png


PWA有什么優(yōu)點(diǎn)?

1. 可靠:離線或者網(wǎng)絡(luò)環(huán)境較差的情況下也能工作;

2. 快速:網(wǎng)頁(yè)加載速度快,而加載慢會(huì)導(dǎo)致用戶放棄瀏覽網(wǎng)頁(yè);

3. 便捷:直接添加在手機(jī)主屏幕,無(wú)需從應(yīng)用程序商店下載安裝;

4. 沉浸式體驗(yàn):提供APP般使用體驗(yàn),頁(yè)面簡(jiǎn)潔、少?gòu)V告,還擁有后臺(tái)運(yùn)行和推送通知的能力;
(在Android 系統(tǒng)可以設(shè)置全屏顯示,iOS則由于支持度問(wèn)題不可以全屏顯示。)


愛用建站如何進(jìn)行PWA設(shè)置?

1. 進(jìn)入【愛用建站】,輸入賬號(hào)密碼登錄;

2. 點(diǎn)擊【智能網(wǎng)站】下的【立即管理】;

1552979571097097024.png


3. 點(diǎn)擊【Design Lab】進(jìn)入可視化設(shè)計(jì)器;

1556610199753084013.png


4.此時(shí)為桌面端,點(diǎn)擊切換為【移動(dòng)端】;


5. 點(diǎn)擊【系統(tǒng)】-【PWA設(shè)置】,填寫PWA名稱、短名稱、PWA描述、上傳
PWA圖標(biāo)后,點(diǎn)擊【提交內(nèi)容】后【保存】。

1552979549410045124.png


如何將PWA網(wǎng)站添加到移動(dòng)端和PC端?

一.移動(dòng)端將PWA網(wǎng)站添加到主屏幕

TIPS:支持iOS 11.3、Android系統(tǒng)。

(一)iOS系統(tǒng):

1. 蘋果手機(jī)端打開 Safari 瀏覽器,訪問(wèn)一個(gè)網(wǎng)頁(yè),比如愛用建站平臺(tái)(https://m.iyong.com/),將該網(wǎng)頁(yè)【添加到主屏幕】;

1553042444525093134.png


2. 點(diǎn)擊【添加】;

1552979574352003600.png


3.手機(jī)主屏幕生成【愛用建站】PWA應(yīng)用,點(diǎn)擊即可快速訪問(wèn)【愛用建站】。

1552984230691079360.png


(二)Android系統(tǒng)
1.安卓手機(jī)端打開Google瀏覽器,訪問(wèn)一個(gè)網(wǎng)頁(yè),比如愛用建站平臺(tái)(https://m.iyong.com/),將該網(wǎng)頁(yè)【添加到主屏幕】;

1553042430529024869.png


2.點(diǎn)擊【添加】;

1552983979747094008.png


3.手機(jī)主屏幕生成【愛用建站】PWA應(yīng)用,點(diǎn)擊即可快速訪問(wèn)【愛用建站】;

1552984230691079360.png


4.可點(diǎn)擊【全屏顯示】,瀏覽效果更佳。

1553042422260090789.png


二.
PC端將PWA網(wǎng)站添加到桌面

TIPS:推薦使用Google Chrome 64或以上版本。

1.更新Google Chrome版本。打開Google,點(diǎn)擊瀏覽器右上角省略號(hào)圖標(biāo),點(diǎn)擊【幫助】-【關(guān)于Google Chrome】進(jìn)行版本升級(jí),之后重啟瀏覽器完成更新。

1552981382513083513.png


2. 在網(wǎng)址欄輸入“chrome://flags”,搜索找到“Desktop PWAs”的選項(xiàng),點(diǎn)擊下拉框?qū)ⅰ癉efault”改為“Enabled”。Google就具備了將PWA 添加到桌面的特性;

1552979551272096625.png


3. 訪問(wèn)一個(gè)網(wǎng)頁(yè),比如愛用建站平臺(tái)(https://www.iyong.com/),點(diǎn)擊右上角省略號(hào),點(diǎn)擊【更多工具】-【創(chuàng)建快捷方式】;

1552979572554079622.png


4. 在彈框中點(diǎn)擊【創(chuàng)建】;

1552979550115027573.png


5. PWA網(wǎng)站即成功添加到桌面。

1552979573709029108.png



上一頁(yè):Design Lab | 【預(yù)約系統(tǒng)】如何添加預(yù)約系統(tǒng)?
下一頁(yè):Design Lab | 【樣式】如何編輯設(shè)置網(wǎng)站頂部、內(nèi)容區(qū)、底部?

本文由今科科技用戶上傳并發(fā)布,今科科技僅提供信息發(fā)布平臺(tái)。文章代表作者個(gè)人觀點(diǎn),不代表今科科技立場(chǎng)。未經(jīng)作者許可,不得轉(zhuǎn)載,有涉嫌抄襲的內(nèi)容,請(qǐng)通過(guò) 反饋中心 進(jìn)行舉報(bào)。


售前咨詢:0760-2332 0168  
售后客服:400  830  7686



1998~2024,今科26年專注于企業(yè)信息化服務(wù)

立 即 注 冊(cè) / 咨 詢
上 線 您 的 網(wǎng) 站