@ideasio/add-to-homescreen-react
Version:
A React component providing add-to-home-screen functionality for progressive webapps on different platforms and browsers.
64 lines (57 loc) • 3.9 kB
HTML
<html lang="en">
<head>
<title>Add-to-Homescreen React Basic Integration Example</title>
<meta charset="UTF-8">
<meta content="Example for a simple integration of the Add-to-homescreen React component." name="description">
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="Add-to-homescreen React Basic Integration Example" name="application-name">
<meta content="Add-to-homescreen React Basic Integration Example" name="apple-mobile-web-app-title">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="/" name="msapplication-starturl">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<meta content="#000000" name="theme-color">
<meta content="default" name="apple-mobile-web-app-status-bar-style">
<link href="images/logos/ios/ios-appicon-120-120.png" rel="apple-touch-icon">
<link href="images/logos/ios/ios-appicon-152-152.png" rel="apple-touch-icon" sizes="152x152">
<link href="images/logos/ios/ios-appicon-180-180.png" rel="apple-touch-icon" sizes="180x180">
<link href="images/logos/ios/ios-appicon-120-120.png" rel="apple-touch-icon" sizes="120x120">
<link href="images/logos/ios/ios-launchimage-640-960.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) splash screen-->
<link href="images/logos/ios/ios-launchimage-640-960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) splash screen-->
<link href="images/logos/ios/ios-launchimage-768-1024.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) splash screen-->
<link href="images/logos/ios/ios-launchimage-768-1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) splash screen-->
<link href="images/logos/ios/ios-launchimage-1536-2048.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) splash screen-->
<link href="images/logos/ios/ios-launchimage-2048-1536.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 6/7/8 -->
<link href="images/logos/ios/ios-launchimage-750-1334.png" media="(device-width: 375px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
<!-- iPhone 6 Plus/7 Plus/8 Plus -->
<link href="images/logos/ios/ios-launchimage-1242-2208.png" media="(device-width: 414px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image"/>
<link href="images/logos/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="images/logos/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="images/logos/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
<link href="images/logos/favicon.ico" rel="shortcut icon">
<link href="manifest.json" rel="manifest">
</head>
<body>
<script type="application/javascript">
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('serviceWorker.js', { scope: '/' }).then(function (registration) {
// Registration was successful
console.debug('ServiceWorker registration successful with scope: ', registration.scope);
}, function (err) {
// registration failed :(
console.debug('ServiceWorker registration failed: ', err);
});
});
}
</script>
<div id="ath-react-basic-integration-example"></div>
</body>
</html>