添加到主屏幕不显示 PWA

Question

我创建了一个渐进式 Web 应用程序。很简单，只是一个 index.html，一个带有图标等的文件夹 "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 访问网站时，一切都显示正确，选项卡颜色很好，一切看起来都不错等等。但我没有横幅 "add to the home screen"。通过缺点，当我进入 chrome 的设置时，我单击 "Add to the home screen" 并验证，然后转到添加的快捷方式，该站点作为应用程序启动，带有 "splash screen"等

当我从我的电脑上访问该站点并在 "Application" 中查看调试器并显示时，我有一点 link "Add to the home screen" 你知道这可能来自哪里吗？

感谢帮助！

编辑：

我进步了一点我稍微修改了我的组织，我创建了一个子域，我现在有一个像这样的 URL：https://subdomain.example.com。一切都在子域的根目录下，在代码中，links 是相对的（例如："img / name.png"）。我在服务工作人员中没有任何错误，当我从我的电脑继续 Chrome 时，我转到开发工具 -> 应用程序 -> 清单选项卡，然后单击 "Add to home screen"，标题为将站点添加到应用程序看起来很好当我验证时，它运行良好。这就是我继续 Chrome 开发工具 -> 应用程序 -> 服务工作者选项卡

时所拥有的

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

Answer 1

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

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

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

Answer 2

您的网站应该在 https 中，带有证书、有效清单以及显示在 chrome 应用程序选项卡中的有效服务人员，所有这些都使您的网站符合基本 PWA 的条件，可以将其添加为可安装网站（它是用 google 即时签名的 .APK 文件创建的）

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

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

Here and here 是 Google 在安装横幅上的一些官方标准。

添加到主屏幕不显示 PWA

add to home screen not showing up PWA

service-worker

progressive-web-apps

manifest.json