-
-
Save r17x/d7e8f03827b390ca2cfdb8494b73b69d to your computer and use it in GitHub Desktop.
React PWA example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- The usual suspects --> | |
| <meta charset="utf-8"> | |
| <meta name="description" | |
| content="My app is awesome because..."> | |
| <title>My awesome app</title> | |
| <link rel="shortcut icon" | |
| href="%PUBLIC_URL%/favicon.ico"> | |
| <!-- Use viewport-fit=cover to fill the iPhone X notch and also prevent content going under the status bar (if it's translucent) --> | |
| <!-- More info: https://css-tricks.com/the-notch-and-css/ --> | |
| <meta name="viewport" | |
| content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"> | |
| <!-- More PWA settings are in the manifest: https://gist.github.com/sconstantinides/8181934ecf82acde62589bac379f6676 --> | |
| <link rel="manifest" | |
| href="%PUBLIC_URL%/manifest.json"> | |
| <!-- Android: Define the nav bar color --> | |
| <!-- More info: https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/#color_browser_elements --> | |
| <meta name="theme-color" | |
| content="#32324B"> | |
| <!-- iOS specific styles --> | |
| <meta name="apple-mobile-web-app-capable" | |
| content="yes"> | |
| <!-- Possible values include default, black, or black-translucent; only black-translucent is truly full screen --> | |
| <!-- More info: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html --> | |
| <meta name="apple-mobile-web-app-status-bar-style" | |
| content="black-translucent"> | |
| <!-- Home screen icon --> | |
| <link rel="apple-touch-icon" | |
| href="%PUBLIC_URL%/images/appIcon.png"> | |
| <!-- iOS startup images --> | |
| <!-- More info and Sketch template: https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210 --> | |
| <!-- iPhone SE --> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-640x1136.png" | |
| media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-640x1136-landscape.png" | |
| media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"> | |
| <!-- iPhone 6/7/8 --> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-750x1294.png" | |
| media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-750x1294-landscape.png" | |
| media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"> | |
| <!-- iPhone 6+/7+/8+ --> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-1242x2148.png" | |
| media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-1242x2148-landscape.png" | |
| media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"> | |
| <!-- iPhone X --> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-1125x2436.png" | |
| media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-1125x2436-landscape.png" | |
| media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"> | |
| <!-- iPad 3/4/Pro 9.7" --> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-1536x2048.png" | |
| media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)"> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-1536x2048-landscape.png" | |
| media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)"> | |
| <!-- iPad Pro 10.5" --> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-1668x2224.png" | |
| media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)"> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-1668x2224-landscape.png" | |
| media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)"> | |
| <!-- iPad Pro 12.9" --> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-2048x2732.png" | |
| media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)"> | |
| <link rel="apple-touch-startup-image" | |
| href="%PUBLIC_URL%/images/launch-2048x2732-landscape.png" | |
| media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)"> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment