- Progressive Web Application Development by Example
- Chris Love
- 278字
- 2021-08-05 10:33:18
The application title is set with another META tag
This is similar to the name and short name manifest properties I'll discuss in detail in the the web manifest section. If no META value is supplied, the title element value is used:
<meta name="apple-mobile-web-app-title" content="2048 PWA">
Check the output in the following screenshot:

Next, you should control how your web app appears to the user. iOS allows you to either launch the app in the browser or as a standalone mode. Standalone mode removes the browser, but retains the iOS status bar across the top of the screen. Check the following code for this:
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
When in standalone mode, there is no address bar, so you may need to adjust your UI to allow customers to copy URLs and go back to previous screens. The navigation concerns are the same that native application designers negotiate, and every application has different requirements.
The status bar can also be styled with the apple-mobile-web-app-bar-style value. This value is only used when your app is launched in standalone mode. You can change the default grey to either black or translucent black.
Unfortunately, you cannot theme the color to match your application theme or hide it altogether:

If you have done everything according to Apple's specifications, when a user launches the 2048 game, it should consume the entire screen, as demonstrated in the preceding screenshot.
Apple may have paved the way for a more intimate relationship with web brands on iOS, but their approach was never a common standard. This has changed in the era of progressive web apps as the W3C standardized, which is a meta data format to describe your web app to the platform.
- Application Development with Qt Creator(Second Edition)
- 解析QUIC/HTTP3:未來互聯(lián)網(wǎng)的基石
- Truffle Quick Start Guide
- 社交電商運(yùn)營(yíng)策略、技巧與實(shí)操
- Hands-On Chatbot Development with Alexa Skills and Amazon Lex
- 網(wǎng)絡(luò)故障現(xiàn)場(chǎng)處理實(shí)踐(第4版)
- 智慧城市中的移動(dòng)互聯(lián)網(wǎng)技術(shù)
- 無(wú)人機(jī)通信
- 計(jì)算機(jī)網(wǎng)絡(luò)與通信(第2版)
- Android UI Design
- 網(wǎng)絡(luò)工程實(shí)施技術(shù)與方案大全
- 網(wǎng)絡(luò)利他行為研究:積極心理學(xué)的視角
- 無(wú)線傳感器網(wǎng)絡(luò)定位技術(shù)
- 大型企業(yè)微服務(wù)架構(gòu)實(shí)踐與運(yùn)營(yíng)
- 沖擊:5G如何改變世界