Last active
July 29, 2018 15:23
-
-
Save sconstantinides/74965503446a6bf846a427bf2bf8de8b to your computer and use it in GitHub Desktop.
React PWA example
This file contains 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