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());
});

和我的清单文件就像

{
  "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"
}

当在应用程序选项卡中单击“添加到主屏幕”表单时，可以使用此工作。但它不能像这样显示添加到主屏幕的弹出窗口。

请告知...提前致谢

Answer 1

浏览器管理何时显示应用安装横幅（又称“添加到主屏幕”提示）。我猜他们的基础是用户与应用程序的交互程度（这些启发式/标准因浏览器而异，也可能不时变化）。

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

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

Answer 2

如何尝试此博客中的步骤How to add “Add to Homescreen” popup in web app

引入了{p> Lighthouse by Google。

它是一种开源的自动化工具，可以提高您的质量   网络应用。您可以将其作为Chrome扩展程序或命令运行   线。你给Lighthouse一个你要审核的URL，它运行一个   对页面进行大量测试，然后生成报告   页面的效果如何。从这里你可以使用失败的测试   关于如何改进应用程序的指标。

有两种方法可以运行Lighthouse，作为Chrome扩展程序，或作为   命令行工具。 Chrome扩展程序提供了更加用户友好的功能   阅读报告的界面。命令行工具使您可以   将Lighthouse整合到持续集成系统中。

请按照博客中的步骤操作，并在SO post中建议。

第1步：创建服务工作者文件

在根文件夹中创建一个空白 service-worker.js 文件。并把   在关闭</html>标记之前，在html页面中的代码下方。

<script>
 if ('serviceWorker' in navigator) {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('service-worker.js')
      .then(function(reg){
        console.log("Yes, it did.");
     }).catch(function(err) {
        console.log("No it didn't. This happened:", err)
    });
 }
</script>

第2步：创建清单文件

在根文件夹中创建 manifest.json 文件。在您的。中添加以下标记   html页面标题部分

<link rel="manifest" href="/manifest.json">

步骤3：在清单文件中添加配置

以下是我们使用的配置。

{
  "short_name": "BetaPage",
  "name": "BetaPage",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/icons/launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/icons/launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/icons/launcher-icon-3x.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "assets/icons/launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/?utm_source=launcher"
}

在上面的代码中，您可以替换自己的值。

“添加到主屏幕”弹出窗口没有显示在我的ASP.Net网站上

2 个答案: