w***@foxmail.com
w***@foxmail.com
  • 发布:2019-10-31 10:34
  • 更新:2021-03-17 16:11
  • 阅读:1469

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

分类:uni-app

需求

一个已部署的 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 负责人:无 分享
已邀请:
billibit

billibit

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

  • 8***@qq.com

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

    2021-09-19 00:03

TADPOLE

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调用时需要延时一下,二级页面无需延时,可直接获取

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