Question

我创建了一个渐进式Web应用程序。它很简单，只是一个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的设置时，我点击“添加到主屏幕”并验证，然后我转到添加的快捷方式，该网站作为应用程序启动，具有“启动画面”等。

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

感谢您的帮助！

编辑：

我先进了一点我修改了一个我的组织，我创建了一个子域，我现在有一个这样的URL：https://subdomain.example.com。一切都在子域的根，在代码中，链接是相对的（例如：“img / name.png”）。我在服务工作者中没有任何错误，当我从我的电脑上浏览Chrome时，我会去开发工具 - ＆gt;申请 - ＆gt;清单选项卡，我点击“添加到主屏幕”，将网站添加到应用程序的横幅显示得很好当我验证时，它运作良好。当我使用Chrome开发工具时，这就是我所拥有的 - ＆gt;申请 - ＆gt;服务工作者选项卡

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

Answer 1

您的网站应该是https，其中包含证书，有效的清单以及在chromes应用程序标签中显示的有效服务工作人员，这一切都使您的网站成为基本PWA，将其添加为可安装的网站（它是通过Google创建的苍蝇签名.APK文件）

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

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

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

Answer 2

您是否检查了Google开发者网站上的所有条件？

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

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

添加到主屏幕不显示PWA

2 个答案: