【报Bug】PWA 单页面网页应用，在 Dcloud 各产品下的踩坑与探索与问题

分类：uni-app

wap2app HTML5+ 5+App开发 uniapp

需求

一个已部署的 PWA 单页面网页应用，我想将它封装成 App 客户端，并使用一些 plus Api 来扩展它的一些功能。

在 wap2app 下

几乎秒开，但网络断开后，PWA 应用无法实现离线，程序会简单粗暴地弹出网络错误对话框。

在 5+app 下

5+app 中，离线后 PWA 应用可正常显示。但，若直接将首页页面地址填为 PWA 应用的 URL，冷启动速度会在五秒以上（Redmi K20），若将首页页面选为一个本地页面，然后在此页面中通过 5+api 打开一个新的 webview，冷启动速度将会变为 2-3 秒。但这样界面会经过启动图->本地webview->PWA 三个界面，并且有闪烁。

在 Uniapp 下

冷启动速度会在五秒以上，且安装包 10M+。

结果

目前 wap2app 表现是最好的，但是致命缺陷是无法离线，所以，目前只能考虑使用 5+app 作为解决方案了。希望官方可以优化一下 wap2app，让其可以兼容 PWA 应用……

2019-10-31 10:34 负责人:无分享

2 个回复

billibit

请问我有一个已有的uni-app, 怎么加入PWA 支持呢？有简单的代码用来说明一下最好啦。谢谢！

8***@qq.com

找到一个uni-app兼容PWA的文章，https://www.zklighting.ltd/?p=1214

2021-09-19 00:03

TADPOLE

加载延迟可能与使用Webview组件相关。
经过Android平台测试，通过plus的API打开webview则没有此问题。而且，PWA特性完美支持。

示例代码如下：

            let wv = plus.webview.create("", "custom-webview", {  
                top: uni.getSystemInfoSync().statusBarHeight +  
                    44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值  
            });  
            wv.loadURL("https://cn.vuejs.org/");  
            var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()  
            currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭  
            setTimeout(function() {  
                console.log(wv.getStyle())  
            }, 1000); //如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取

该问题目前已经被锁定, 无法添加新回复

【报Bug】PWA 单页面网页应用，在 Dcloud 各产品下的踩坑与探索与问题

需求

在 wap2app 下

在 5+app 下

在 Uniapp 下

结果

2 个回复

公告

相关问题

【报Bug】PWA 单页面网页应用，在 Dcloud 各产品下的踩坑与探索与问题

需求

在 wap2app 下

在 5+app 下

在 Uniapp 下

结果

与内容相关的链接

2 个回复

公告

相关问题