添加到主屏幕不显示 PWA

Question

我创建了一个渐进式网络应用程序。 很简单，只是一个 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 中，并带有证书、有效清单以及显示在 chrome 应用程序选项卡中的有效服务人员，所有这些都使您的网站有资格作为基本 PWA 将其添加为可安装网站（它是使用 google 创建的苍蝇签名的 .APK 文件）

当 https、证书或 service worker 出现问题（大多数情况下是这个原因）时，仍然会在主屏幕上添加一个图标，并作为没有地址栏的应用程序打开。不同之处在于，它只是一种书签类型的链接。它不是 chrome 中 WebApk 生成的 .apk 文件。在这种情况下，chrome 不会显示安装横幅。

其他情况可能是，它可能在你没有注意到的情况下来来去去，或者它在你中断时重新加载了页面。用户第一次拒绝，chrome 不再显示。您可以从不同的设备尝试，但仍然会发生相同的情况，这是您的 PWA 组件之一，如第一段所述，未正确配置。

Here 和 here 是谷歌关于安装横幅的一些官方标准。

Answer 2

您是否检查了谷歌开发者网站上的所有标准？

https://developers.google.com/web/fundamentals/app-install-banners/

现在我在您的帖子中没有看到任何提到 HTTPS 的内容 - 这可能是罪魁祸首。