“添加到主屏幕”弹出窗口没有出现在我的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。
请指教...在此先感谢
浏览器管理时,显示应用程式安装横幅(又名“添加到主屏幕”的提示)。我猜他们是基于用户与应用程序进行了多少交互(这些启发式/标准对于每个浏览器不同,也可能会不时变化)。
对于开发目的,只要在点击DevTools的“添加到主屏幕”时工作,您可以确信它也可以在其他设备上工作。
还有一种方法可以绕过这些浏览器启发式检查,并立即显示App Install Banner。这隐藏在Chrome中的国旗后面,因此请转至chrome://flags
并查找“绕过用户参与检查”,并启用该标志。
如何试图在这个博客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"
}
在上面的代码中,你可以更换自己的值。
是的,我应用了这些所有步骤,但它只能从铬devtool没有显示弹出窗口工作。 – TouchStarDev
已启用“通过用户参与检查”。从铬旗,我想我错过了我的编码中的一些步骤。 – TouchStarDev