Design Lab | 如何设置网站的PWA应用发布Web APP
专栏:DESIGN LAB
发布日期:2019-03-19
阅读量:11926
作者:爱用建站

PWA是什么?
PWA(Progreesive Web Apps),由谷歌最早提出的一种渐进式增强型的网页应用Web App概念。PWA也被称为“远古小程序”,小程序本质上是网页,需要横跨手机系统和App两个平台限制;而PWA在系统层面将网页打包成App,具有跨平台的通用性和兼容性,让网页App具备原生App的功能特性。

1553043448564017112.png


PWA有什么优点?

1. 可靠:离线或者网络环境较差的情况下也能工作;

2. 快速:网页加载速度快,而加载慢会导致用户放弃浏览网页;

3. 便捷:直接添加在手机主屏幕,无需从应用程序商店下载安装;

4. 沉浸式体验:提供APP般使用体验,页面简洁、少广告,还拥有后台运行和推送通知的能力;
(在Android 系统可以设置全屏显示,iOS则由于支持度问题不可以全屏显示。)


爱用建站如何进行PWA设置

1. 进入【爱用建站】,输入账号密码登录;

2. 点击【智能网站】下的【立即管理】;

1552979571097097024.png


3. 点击【Design Lab】进入可视化设计器;

1556610199753084013.png


4.此时为桌面端,点击切换为【移动端】;


5. 点击【系统】-【PWA设置】,填写PWA名称、短名称、PWA描述、上传
PWA图标后,点击【提交内容】后【保存】。

1552979549410045124.png


如何将PWA网站添加到移动端和PC端?

一.移动端将PWA网站添加到主屏幕

TIPS:支持iOS 11.3、Android系统。

(一)iOS系统:

1. 苹果手机端打开 Safari 浏览器,访问一个网页,比如爱用建站平台(https://m.iyong.com/),将该网页【添加到主屏幕】;

1553042444525093134.png


2. 点击【添加】;

1552979574352003600.png


3.手机主屏幕生成【爱用建站】PWA应用,点击即可快速访问【爱用建站】。

1552984230691079360.png


(二)Android系统
1.安卓手机端打开Google浏览器,访问一个网页,比如爱用建站平台(https://m.iyong.com/),将该网页【添加到主屏幕】;

1553042430529024869.png


2.点击【添加】;

1552983979747094008.png


3.手机主屏幕生成【爱用建站】PWA应用,点击即可快速访问【爱用建站】;

1552984230691079360.png


4.可点击【全屏显示】,浏览效果更佳。

1553042422260090789.png


二.
PC端将PWA网站添加到桌面

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

1.更新Google Chrome版本。打开Google,点击浏览器右上角省略号图标,点击【帮助】-【关于Google Chrome】进行版本升级,之后重启浏览器完成更新。

1552981382513083513.png


2. 在网址栏输入“chrome://flags”,搜索找到“Desktop PWAs”的选项,点击下拉框将“Default”改为“Enabled”。Google就具备了将PWA 添加到桌面的特性;

1552979551272096625.png


3. 访问一个网页,比如爱用建站平台(https://www.iyong.com/),点击右上角省略号,点击【更多工具】-【创建快捷方式】;

1552979572554079622.png


4. 在弹框中点击【创建】;

1552979550115027573.png


5. PWA网站即成功添加到桌面。

1552979573709029108.png

上一页:Design Lab | 【电子图册】如何添加电子图册功能?
下一页:Design Lab | 【样式】如何编辑设置网站顶部、内容区、底部?
最新评论
    本文由爱用建站平台用户上传并发布,爱用建站仅提供信息发布平台。文章仅代表作者个人观点,不代表爱用建站立场。未经作者许可,不得转载。有涉嫌抄袭的内容,请通过 反馈中心 进行举报。

    如有投稿需求,可点击立即投稿
    免费建站
    品牌营销
    免费小程序

    精彩资讯

    更多>>
    网站建设

    热点关注

    更多>>

    点击开启品牌新篇章