添加到主屏幕未显示PWA [英] add to home screen not showing up PWA

问题描述

我已经创建了一个渐进式Web应用程序. 很简单，只需一个index.html，一个带有图标图标的文件夹"images"，一个sw.js以及一个styles.css

I've created a Progressive Web App. It's simple, just an index.html, a folder "images" with favicon etc, a sw.js et a styles.css

我来自manifest.json的代码

My code from manifest.json

{
"lang" : "en",
"name" : "Test",
"short_name" : "Test",
"icons" :   [
  {
  "src": "images/android-chrome-192x192.png",
  "sizes": "192x192",
  "type": "image/png"
},
{
  "src": "images/android-chrome-144x144.png",
  "sizes": "144x144",
  "type": "image/png"
}
],
"theme_color" : "#116b20",
"background_color" : "#1a1a1a",
"scope" : "1",
"start_url" : "/test",
"display" : "standalone",
"orientation" : "natural"
   }

和sw.js

self.addEventListener('install', function(event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
caches.open('static').then(function(cache) {
 cache.addAll(['/test/', '/test/index.html', '/test/manifest.json']);
  })
  );
});
self.addEventListener('activate', function(event) {
 console.log('[Service Worker] Activating Service Worker ....', event);
});
self.addEventListener('fetch', function(event) {
  event.respondWith(
caches.match(event.request).then(function(response) {
  if (response) {
    return response;
  } else {
    return fetch(event.request).then(function(res) {
      return caches.open('dynamic').then(function(cache) {
        cache.put(event.request.url, res.clone());
        return res;
      });
    });
  }
})
  );
});

所以...现在，当我从带有chrome的智能手机访问该站点时，一切显示正确，选项卡颜色很好，一切看起来都很好，等等.但是我没有添加到家里"的横幅屏幕". 通过缺点，当我进入chrome的设置，然后单击添加到主屏幕"，然后验证并转到添加的快捷方式，该站点将作为应用程序启动，并带有启动屏幕"等.

So... for now, when I go to the site from my smartphone with chrome, everything is displayed correctly, the tab color is good, everythings looks good etc. But I do not have the banner "add to the home screen". By cons when I go in the settings of chrome, and I click on "Add to the home screen" and I validate and then I go to the added shortcut, the site is launched as an app, with the "splash screen" etc.

当我从计算机上访问该站点时，在应用程序"和清单中看到调试器，我有一个小链接添加到主屏幕" 你知道这可能来自哪里吗?

And when I go on the site from my computer and I watch the debugger in "Application" and manifest, I have the little link "Add to the home screen" Do you know where this may come from ?

感谢帮助！

我进步了一点 我修改了我的组织，创建了一个子域，现在有一个类似这样的URL: https://subreferreder> https://subreferreder"> .一切都在子域的根目录中，在代码中，链接是相对的(例如:"img/name.png"). 我的服务人员没有任何错误，当我从PC上打开Chrome浏览器时，转到开发工具->应用程序->清单标签，然后单击添加到主屏幕"，即添加站点的横幅应用程序看起来不错 当我验证时，效果很好. 这就是我使用Chrome开发者工具->应用程序->服务人员标签

I have advanced a little I modified a little my organization, I created a subdomain, I now have a URL like this: https://subdomain.example.com. Everything is at the root of the subdomain, in the code, the links are in relative (e.g.: "img / name.png"). I do not have any errors in the service worker, when I go on Chrome from my pc, I go to dev tools -> Application -> Manifest tab, and I click on "Add to home screen", the banner to add the site to applications appears well and when I validate, it works well. That's what I have when I go on Chrome dev tools -> Application -> Service worker tab

但是在我的智能手机上，如果有人有主意，我仍然没有将横幅广告添加到主屏幕上.

But on my smartphone, I still don't have the banner offering add to home screen, if someone has an idea...

推荐答案

您的网站应位于https中，并带有证书，有效的清单以及在chromes应用程序标签中显示的有效服务人员，所有这些都使您的网站符合基本PWA的条件将其添加为可安装的网站(它是由Google即时签署的.APK文件创建的)

Your site should be in https with a certificate, valid manifest along with a valid service worker showing in chromes application tab, all this makes your site qualified as basic PWA to add it as installable site (it gets created with a google on the fly signed .APK file)

当https，证书或服务工作者出现问题时(大多数情况是这是原因)，仍然会在主屏幕上添加一个图标，并将其作为不带地址栏的应用程序打开.不同之处在于，它只是书签的一种链接.这不是WebApk在chrome中生成的.apk文件.在这种情况下，Chrome不会显示安装横幅.

When there is issue with https, certificate or service worker (most case this is the reason ) still an icon will be added to the home screen and will open as app without address bar. Difference is, it’s just a bookmark kind of link. It’s not a .apk file generated by WebApk in chrome. On such scenarios, chrome doesn’t shows the install banner.

其他情况可能是，它可能来回了一次而没有引起您的注意，或者它在中断时重新加载了页面.根据用户的第一个拒绝，chrome不会再显示.您可以尝试使用其他设备，但仍会发生相同的情况，这是您的PWA组件之一，如第一部分所述，配置不正确.

Other case might be, it might have come and gone once without you noticin it or it reloaded the page on ur interruption. One first decline by user, chrome doesn’t show again. You can try from a different device and still same tho g happens, it’s one of ur PWA component not configured correctly as mentioned in first para.

此处和此处是Google在安装标语上的一些官方标准.

Here and here are some official criteria from Google on install banners.

这篇关于添加到主屏幕未显示PWA的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！