网页的PWA安装按钮迟迟不出来

• 抖音：https://v.douyin.com/itneomd/

• B站：https://www.bilibili.com/video/BV1LX4y1n7Jc/

demo预览：

https://sunzsh.github.io/html-demos/pwa.html

代码：

https://github.com/sunzsh/st-html-demo/blob/master/pwa.html

https://github.com/sunzsh/st-html-demo/blob/master/manifest.json

按说我在这引用了这个manifest文件

他在网页上

这就应该有安装PWA应用的按钮了

但是呢他这不出来

然后那天研究了半天我发现啊

其实就是

他们对这个图标尺寸

要求最少是144像素

所以呢

我这提前准备好了一个144像素的哈

我把它换成这个图标

打开啊

这就有了

所以很简单一个很普通的网页

加上这个manifest文件

至少要求这些属性

然后呢页面就会有这个添加的按钮了

顺便咱们再说一下

怎么在页面里用代码来触发这个东西

啊首先呢我们先加一个button

普通的button就行，就叫添加

然后呢在这写一个onclick

（事件）内容我们先空着哈然后我们再去

收集一个event

利用这个listiner呢window.addEventListener

叫beforeinstallprompt

这个

然后呢

把这个e收集起来

我们现在全局声明一个变量

要用pwaEvent

然后呢pwaEvent等于这个e

然后我们在这里边用

pwaEvent.prompt()

prompt

好我们再试一下

大家看这样就可以了

然后呢

有时候呢这个按钮需要隐藏起来

我们可以让他默认

没有这个按钮，对吧！

display等于none

然后呢我们再加一个ID吧

#btn

然后我们在这里边它默认是隐藏的嘛

我们在这里边

监听到可以加这个

PW应用的时候把它再显示出来

就btn.style.display="block"

再试一下大家看这回就有了

然后呢我们换一个浏览器啊

比如说Safari

看一看就没有

这个按钮

然后我们还可以呢

监听用户是不是点了安装了我们

在这

用pwaEvent把它

.userChoice

这个，.then(

我们打印这个东西就行了

来试一下

打开这个outcome

我们打印它点outcome

再试一下

打开这dismiss的

然后如果点击安装呢

输出accept

最后再给大家补充一下

关于刚才说那个图标尺寸的问题

在哪发现的呢

就是如果你发现

你这个按钮迟迟不显示哈

你可以打开这个application

然后选这个manifest

打卡我先把这个图标改回来

成这个一二十八六

好我们再刷新一下

打开这块会有提示

具体什么地方没有满足

所以你就照着他提示去修改就可以了