Question

我正在使用Android手机，我已经将网站设计为网络应用程序。

即。您将Web应用程序添加到主屏幕，Android将其作为Web应用程序将其全屏加载等等。

我正在使用缓存清单，因此它也会在用户离线时加载。

但我发现在加载网络应用时会有一点延迟，可能是2或3秒，屏幕只是白色。

在Android上，是否可以在此处添加启动画面，以便用户知道正在加载网络应用？

Answer 1

从Chrome M47开始，从主屏幕启动时，会自动将闪屏应用于所有网络应用。启动画面可以通过应用程序清单文件进行配置，但标准仍处于开发阶段。 Splashscreens是Chrome for Android特有的功能，在使用旧版Android浏览器时无法使用。

您可以在此处详细了解可用的启动画面设置： https://developers.google.com/web/updates/2015/10/splashscreen http://www.w3.org/TR/appmanifest/

Answer 2

您需要将manifest.json添加到堆栈中，并将其链接到头部，就像任何标准链接或元标记一样。

创建manifest.json：

{  
"short_name": "Voice Memos",  
"name": "Voice Memos",  
"start_url": "./?utm_source=web_app_manifest",  
"icons": [  
{  
  "src": "/images/icon-192x192.png",  
  "sizes": "192x192",  
  "type": "image/png"  
},  
{  
  "src": "/images/icon-256x256.png",  
  "sizes": "256x256",  
  "type": "image/png"  
},  
{  
  "src": "/images/icon-384x384.png",  
  "sizes": "384x384",  
  "type": "image/png"  
},  
{  
  "src": "/images/icon-512x512.png",  
  "sizes": "512x512",  
  "type": "image/png"  
}
],  
"background_color": "#FAFAFA",
"theme_color": "#512DA8", 
"display": "standalone",  
"orientation": "portrait"  
}

添加文件的链接： <link rel="manifest" href="manifest.json">

你还需要启用它：

`    <!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Your app name">
<link rel="icon" sizes="192x192" href="apple-touch-icon-192x192.png">`

另一个答案中的链接还有更多信息： https://stackoverflow.com/a/34376716/1876722

如何拥有一个网站启动画面（网络应用程序）

2 个答案: