为什么我的'添加到主屏幕'Web App Install Banner没有显示在我的Web应用程序中 [英] Why is my 'add to home screen' Web App Install Banner not showing up in my web app

问题描述

我已经创建了一个服务工作者和 manifest.json 文件，以便为Chrome浏览器用户显示添加到主屏幕Web应用安装横幅。

它没有按预期工作。

这是我的 manifest.json

code $ file

$ $
$ name $$ My
$ short $ ：mysite，
start_url：./?utm_source=homescreen，
图标：[{
src：assets / cacheable / images / shortcut / 120x120 .png，
sizes：128x128，
type：image / png
}，{
src：assets / cacheable / images /shortcut/142x142.png，
sizes：142x142，
type：image / png
}，{
src：assets /cacheable/images/shortcut/192x192.png，
sizes：192x192，
type：image / png
}，{
src ：assets / cacheable / images / shortcut / 192x192.png，
sizes：384x384，
type：image / png
}]，
orientation：portrait，
background_color：#fff，
display：standalone，
theme_color：#fff
}


如果我忘记添加任何内容，请让我知道？
<首先，让我们来检查一下你的清单是否满足显示Web App横幅的要求。

>要求
$ b 显示Web应用安装横幅的完整（ current ）要求为*：

• 拥有一个Web应用清单文件：
  
  
  
  
  • 短名称
  
  
  • 一个名称（用于
    横幅提示中）
  
  
  • a 144x144 png图标
  
  
  • 加载的start_url
  
  
  
  • 通过HTTPS提供服务（使用服务工作人员的要求）。
    
  • 至少访问两次，访问次数至少为5分钟。
  
  
  
  
  

  Reference

  都是有效的。让我们继续进行测试。
  
  
  

  测试

  
  
  

  安装正确，您可以尝试以下步骤：

  
  
  1. 打开Chrome开发者工具，
  
  
  2. 转到清单标签
  
  
  3. 点击添加到应用面板
  主屏幕。
  

  提示现在应显示在浏览器的顶部，询问您是否要将url添加到您的东西（在Chrome桌面上）。

  
  
  

  疑难解答
  
  

  在您的控制台中出现以下错误：
  
  

  
  

  未检测到匹配的服务工作人员。您可能需要重新加载页面，或检查当前页面的服务工作人员是否也控制清单中的开始URL

  
  

  然后请确保1.您的服务人员运行正常且没有错误，2.您的 start_url 与您的网站的加载的实际网址匹配。否则，您将永远无法获得提示！

  
  
  

  另外，
  
  

  请注意，用户（和您！）也可以通过（Android）Chrome菜单手动添加到主屏幕。不需要等待提示！我添加了很多我每天使用的网站到我的主屏幕，并且我几乎没有看到横幅！

  
  
  

  *请注意，这些要求可能会从不时（他们之前有！）。 2017年即将推出的添加到主屏幕更新已经公布这里

  
  
  

  **还请注意，这些要求与原生应用安装提示有很大不同。

  
  

  I've created a service-worker and manifest.json file in order to display an 'add to home screen' Web App Install Banner for Chrome Browser Users.

  It is not working as intended.

  Here is my manifest.json file

  {
    "name": "MySite",
    "short_name": "Mysite",
    "start_url": "./?utm_source=homescreen",
    "icons": [{
        "src": "assets/cacheable/images/shortcut/120x120.png",
        "sizes": "128x128",
        "type": "image/png"
      }, {
        "src": "assets/cacheable/images/shortcut/142x142.png",
        "sizes": "142x142",
        "type": "image/png"
      }, {
        "src": "assets/cacheable/images/shortcut/192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      }, {
        "src": "assets/cacheable/images/shortcut/192x192.png",
        "sizes": "384x384",
        "type": "image/png"
      }],
    "orientation": "portrait" ,
    "background_color": "#fff",
    "display": "standalone",
    "theme_color": "#fff"
  }
  

  Please let me know if I forgot to add anything?

  解决方案

  First, let's check if your manifest fulfills the requirements for showing Web App Install Banners.

  Requirements

  Full (current) requirements for showing Web App Install Banners are*:

  • Have a web app manifest file with:
    • a short_name
    • a name (used in the banner prompt)
    • a 144x144 png icon
    • a start_url that loads
  • Is served over HTTPS (a requirement for using service worker).
  • Is visited at least twice, with at least five minutes between visits.

  Reference

  Okay, so for now let's assume this is all valid. Let's move on to testing.

  Testing

  To test if you've installed it correctly, you can try the following steps:

  1. Open Chrome DevTools,
  2. Go to the Application panel
  3. Go to the Manifest tab
  4. Click Add to homescreen.

  A prompt should now show on top of your browser asking if you want to add the url to your things (on Chrome desktop).

  Troubleshooting

  If after testing you are getting the following error in your console:

  No matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

  Then please make sure that 1. Your service worker is functioning properly and without errors, and 2. Your start_url matches an actual url of your website that loads. Else, you will never get the prompt to show!

  Additionally,

  Do note that users (and you!) can also add to the home screen manually through the the (Android) Chrome menu. It is not required to wait for the prompt! I add a lot of websites I tend to use daily to my homescreen, and I hardly ever see a banner!

  * Do note that these requirements could change from time to time (they have before!). An update to 'Add to home screen' coming in 2017 has already been announced here

  ** Also note that these requirements differ significantly from native app install prompts.**

  这篇关于为什么我的'添加到主屏幕'Web App Install Banner没有显示在我的Web应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！