javascript - "ADD TO HOME SCREEN"弹出窗口未显示在我的 ASP.Net 站点上

Question

我正在尝试使用我的 Asp.net 项目制作“添加到主屏幕”横幅我的 Index.js 是

// Make sure we are accessing over https, if not redirect
if ((!location.port || location.port === "80") && location.protocol !== "https:" && location.host !== "localhost") {
    location.protocol = "https:";
}

if (navigator.serviceWorker) {
    navigator.serviceWorker.register('sw.js').then(function (registration) {
        console.log('ServiceWorker registration successful with scope:', registration.scope);
    }).catch(function (error) {
        console.log('ServiceWorker registration failed:', error);
    });
}

我的 Sw.js 是

console.log('I am a Service Worker!');
self.addEventListener('install', function () {
    self.skipWaiting();
});

self.addEventListener('activate', function (event) {
    event.waitUntil(clients.claim());
});

我的 list 文件是这样的

{
  "name": "App_Name",
  "short_name": "APP",
  "icons": [
		{
        "src": "120x120.png",
        "type": "image/png",
        "sizes": "128x128"
      }, 
	  {
        "src": "152x152.png",
        "type": "image/png",
        "sizes": "152x152"
      }, 
	  {
        "src": "144x144.png",
        "type": "image/png",
        "sizes": "144x144"
      }, 
	  {
        "src": "192x192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "192x192.png",
        "type": "image/png",
        "sizes": "256x256"
      },
      {
        "src": "192x192.png",
        "type": "image/png",
        "sizes": "512x512"
      }
	  ],
  "start_url": "Welcome.aspx?launcher=true",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#aac73c ",
  "theme_color": "#63528a"
}

在“应用程序”选项卡中从 Devtool 中单击“添加到主屏幕”时，此方法有效。但它不能像这样显示添加到主屏幕的弹出窗口。

请告知...提前致谢

Answer 1

浏览器管理何时显示应用程序安装横幅(又名“添加到主屏幕”提示)。我猜他们是根据用户与应用程序交互的程度来确定的(这些启发式/标准因浏览器而异，并且可能会不时更改)。

出于开发目的，只要它在单击 DevTools 的“添加到主屏幕”时有效，您就可以确信它也适用于其他设备。

还有一种方法可以绕过这些浏览器试探法并立即显示应用安装横幅。这隐藏在 Chrome 中的标志后面，因此请转到 chrome://flags 并查找“绕过用户参与检查”，然后启用该标志。