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

我想使添加到主屏幕旗帜，我的Asp.net项目我Index.js是“添加到主屏幕”弹出窗口没有出现在我的ASP.Net网站

// 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": [ 
 
\t \t { 
 
     "src": "120x120.png", 
 
     "type": "image/png", 
 
     "sizes": "128x128" 
 
     }, 
 
\t { 
 
     "src": "152x152.png", 
 
     "type": "image/png", 
 
     "sizes": "152x152" 
 
     }, 
 
\t { 
 
     "src": "144x144.png", 
 
     "type": "image/png", 
 
     "sizes": "144x144" 
 
     }, 
 
\t { 
 
     "src": "192x192.png", 
 
     "type": "image/png", 
 
     "sizes": "192x192" 
 
     }, 
 
     { 
 
     "src": "192x192.png", 
 
     "type": "image/png", 
 
     "sizes": "256x256" 
 
     }, 
 
     { 
 
     "src": "192x192.png", 
 
     "type": "image/png", 
 
     "sizes": "512x512" 
 
     } 
 
\t ], 
 
    "start_url": "Welcome.aspx?launcher=true", 
 
    "scope": "/", 
 
    "display": "standalone", 
 
    "orientation": "portrait", 
 
    "background_color": "#aac73c ", 
 
    "theme_color": "#63528a" 
 
}

这作品时，点击“添加到主屏幕”的应用程序选项卡形式Devtool。但它不能像这样显示添加到主屏幕的Popup。

请指教...在此先感谢

来源

2017-08-29 TouchStarDev

浏览器管理时，显示应用程式安装横幅（又名“添加到主屏幕”的提示）。我猜他们是基于用户与应用程序进行了多少交互（这些启发式/标准对于每个浏览器不同，也可能会不时变化）。

对于开发目的，只要在点击DevTools的“添加到主屏幕”时工作，您可以确信它也可以在其他设备上工作。

还有一种方法可以绕过这些浏览器启发式检查，并立即显示App Install Banner。这隐藏在Chrome中的国旗后面，因此请转至chrome://flags并查找“绕过用户参与检查”，并启用该标志。

来源

2017-08-30 06:50:22

已启用“通过用户参与检查”。从铬旗，我想我错过了我的编码中的一些步骤。 – TouchStarDev

如何试图在这个博客How to add “Add to Homescreen” popup in web app

Lighthouse by Google的步骤进行了介绍。

它是一个开源的自动化工具，用于提高您的网络应用程序的质量。您可以将其作为Chrome扩展程序或从命令一行运行。您给了Lighthouse一个您想要审核的URL，它会对该页面执行一次测试攻击，然后它会生成一个关于页面做得如何的报告。从这里您可以使用失败的测试作为指标，说明您可以如何改进您的应用。

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

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

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

创建一个空白服务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" 
}

在上面的代码中，你可以更换自己的值。

来源

2017-08-30 11:44:21

是的，我应用了这些所有步骤，但它只能从铬devtool没有显示弹出窗口工作。 – TouchStarDev

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

回答

相关问题