- 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.