feat: fix ios white status bar + add iOS splash screen (#2108)
* Fix iOS statusbar #2 add theme-color mea tag * change default to black * Update template.html * return to 'default' * Update template.html * Add splash screen * Update template.html * Update template.html * fix: filter splash files in service worker * perf: zopfli-optimize splash pngs * fix: wrong cache Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>
hellojaccc
GitHub
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="{process.env.LOCALE}" dir="{process.env.LOCALE_DIRECTION}">
|
||||
<head>
|
||||
<meta charset='utf-8' >
|
||||
<meta name="viewport" content="width=device-width, viewport-fit=cover">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta id='theThemeColor' name='theme-color' content='#4169e1' >
|
||||
<meta name="description" content="{intl.appDescription}" >
|
||||
|
||||
|
|
@ -15,8 +15,19 @@
|
|||
https://developers.google.com/web/fundamentals/native-hardware/fullscreen/ -->
|
||||
<meta name="mobile-web-app-capable" content="yes" >
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-title" content="{intl.appName}" >
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" >
|
||||
<meta name="apple-mobile-web-app-title" content="{intl.appName}">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<!-- splashscreen for iOS -->
|
||||
<link href="/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
||||
<link href="/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
||||
<link href="/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
|
||||
<link href="/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
|
||||
<link href="/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
||||
<link href="/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
|
||||
<link href="/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
||||
<link href="/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
||||
<link href="/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
||||
<link href="/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
||||
|
||||
<!-- inline CSS -->
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,10 @@ const ON_DEMAND_CACHE = [
|
|||
{
|
||||
regex: /TwemojiCountryFlags\.woff2/,
|
||||
cache: ASSETS
|
||||
},
|
||||
{
|
||||
regex: /_splash\.png$/,
|
||||
cache: ASSETS
|
||||
}
|
||||
]
|
||||
|
||||
|
|
@ -39,6 +43,7 @@ const assets = __assets__
|
|||
.filter(filename => !/emoji-.*?\.json$/.test(filename)) // useless to cache; it already goes in IndexedDB
|
||||
.filter(filename => !/screenshot-.*?\.png/.test(filename)) // only used during PWA installation, don't bother caching
|
||||
.filter(filename => !/TwemojiCountryFlags\.woff2/.test(filename)) // cache on-demand
|
||||
.filter(filename => !/_splash\.png$/.test(filename)) // only used for iOS PWA splash screen, cache on-demand
|
||||
|
||||
// `shell` is an array of all the files generated by webpack
|
||||
// also contains '/index.html' for some reason
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 19 KiB |