您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

pwa的https与离线app

发布时间：2020-06-07 10:46:51编辑：雪饮阅读（）

https环境下的pwa

前面有讲过pwa只在https环境下和localhost环境下有作用，而localhost上我们已经测试过了。那么要了解https环境下的pwa表现就要先和非https环境做表现，下图是昨天截图的非https环境下pwa



可见非https环境下无论是cache storage或者service workers都是不存在的

为了实现https环境，前天尝试了github的web服务和gitee的web服务，发现其实本质都一样由于不支持绝对路径引用(github测试结果)，而vue的webpack编译出来默认都是绝对路径，也没有那个心思再去折腾了，这两个折腾过程中太浪费时间（网络极不稳定），过程中还出现各种问题，没有心情后就申请了阿里云的ssl证书，然后不管了，昨天玩了一天。

今天发现还是还是没有通过。。。

幸好老弟提醒宝塔可以一键生成，以前也曾用过，要注册就放弃了。这次可能正好我的账号绑定了宝塔。（万恶懒为首）

那么得到https证书后，我们将之前测试对比的两个接口协议也修改为https

created() {
  this.$axios.get('https://vue.gaojiupan.cn/api/getthumimages/0').
  then(res=>{
    console.log(res);
  });

  this.$axios.get('https://vue.gaojiupan.cn/api/getnewslist').
  then(res=>{
    console.log(res);
  })

},

 

然后再次上传到https环境中，再次请求可以看到pwa再次生效了



离线app

 

为了演示离线app，需要用到爱莫助手（这里以安卓为例），在官网下载安卓版安装后用安卓版扫码官网功能页里面的二维码后点击下面的镜像然后在手机端同意下即可查看手机端的实时操作界面了。



这里以安卓端的谷歌浏览器为例，访问该页面稍等片刻浏览器通过我们编译出来的manifest.json识别到了该应用，则就提示可以保存到主屏幕



 



点击这里即可保存



下面这个截图是红米的截图，因为上面本来操作的是vivo x20 plus结果到这里添加不成功，具体原因不明。



然后再接着测试联网功能,因为用chrome创建的，所以禁用chrome网络



然后打开该app



照样可以访问，这就是pwa的app特性

 Pc端的离线app

在pc端，我们只需要点击这里的加号图标即可





补充

关于上面vivo x20 plus无法将这里的“My App”添加到主屏幕，事后我再次研究了一下，我试图开启vpn然后更新google chrome到最新版，然后再次尝试添加，在通知栏貌似有一个启动关联应用的权限提示被禁止，并有一个google play服务正在下载，然后我把取消了禁止并等待google play服务下载完成后，再去google chrome中尝试，发现稍等片刻就添加成功了。