添加到主屏幕不显示PWA

Question

我创建了一个Progressive Web App.它很简单,只是一个index.html,一个带有favicon等的文件夹"images",一个sw.js和一个styles.css

我的代码来自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的设置时,我点击"添加到主屏幕"并验证,然后我转到添加的快捷方式,该网站作为应用程序启动,具有"启动画面"等.

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

感谢帮助 !

编辑:

我已经改进了一点我修改了一点我的组织,我创建了一个子域,我现在有一个这样的URL:https://subdomain.example.com.一切都在子域的根,在代码中,链接是相对的(例如:"img/name.png").我在服务工作者中没有任何错误,当我从我的电脑上浏览Chrome时,我去开发工具 - >应用程序 - >清单选项卡,然后点击"添加到主屏幕",添加网站的横幅应用程序看起来很好,当我验证时,它运作良好.当我使用Chrome开发工具 - >应用程序 - >服务工作者选项卡时,这就是我所拥有的

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

Answer 1

您的站点应该是https,带有证书,有效的清单以及在chromes应用程序选项卡中显示的有效服务工作者,所有这些都使您的站点符合基本PWA的要求,将其添加为可安装的站点(它是通过google签名创建的.APK文件)

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

其他情况可能是,它可能已经过去一次没有你注意到它或它在你的中断重新加载页面.用户首次下降,Chrome不再显示.您可以尝试从不同的设备,但仍然发生相同的事情,它是您的PWA组件之一未正确配置,如第一段中所述.

这里和这里有一些官方的标准,从谷歌上安装横幅.