markus8585.github.io/index.html at master · markus8585/markus8585.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
  <style>
		.ad2hs-prompt {
		  background-color: rgb(59, 134, 196); /* Blue */
		  border: none;
		  display: none;
		  color: white;
		  padding: 15px 32px;
		  text-align: center;
		  text-decoration: none;
		  font-size: 16px;
		  position: absolute;
		  margin: 0 1rem 1rem;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  width: calc(100% - 32px);
		}

		.ios-prompt {
		  background-color: #fcfcfc;
		  border: 1px solid #666;
		  display: none;
		  padding: 0.8rem 1rem 0 0.5rem;
		  text-decoration: none;
		  font-size: 16px;
		  color: #555;
		  position: absolute;
		  margin: 0 auto 1rem;
		  left: 1rem;
		  right: 1rem;
		  bottom: 0;
		}
	  </style>

	<link rel="stylesheet" href="styles.css"></head>
	<body>
	  <app-root></app-root>

	  <button type="button" class="ad2hs-prompt">Install Web App</button>
	  <div class="ios-prompt">
		<span style="color: rgb(187, 187, 187); float: right; margin-top: -14px; margin-right: -11px;">&times;</span>
		<img src="assets/imgs/add2home.svg" style="float: left; height: 80px; width: auto; margin-top: -8px; margin-right: 1rem;">
		<p style="margin-top: -3px; line-height: 1.3rem;">To install this Web App in your iPhone/iPad press <img src="assets/imgs/share.svg" style="display: inline-block; margin-top: 4px; margin-bottom: -4px; height: 20px; width: auto;"> and then Add to Home Screen.</p>
	  </div>

	<script type="text/javascript" src="runtime.js"></script>
	<script type="text/javascript" src="polyfills.js"></script>
	<script type="text/javascript" src="main.js"></script>

	<script type="text/javascript">
		if ('serviceWorker' in navigator) {
		  navigator.serviceWorker.register('service-worker.js')
			.then(() => console.log('service worker installed'))
			.catch(err => console.error('Error', err));
		}
		function addToHomeScreen() {
		  let a2hsBtn = document.querySelector(".ad2hs-prompt");  // hide our user interface that shows our A2HS button
		  a2hsBtn.style.display = 'none';  // Show the prompt
		  deferredPrompt.prompt();  // Wait for the user to respond to the prompt
		  deferredPrompt.userChoice
			.then(function(choiceResult){
		  if (choiceResult.outcome === 'accepted') {
			console.log('User accepted the A2HS prompt');
		  } else {
			console.log('User dismissed the A2HS prompt');
		  }
		  deferredPrompt = null;
		});}
		function showAddToHomeScreen() {
		  let a2hsBtn = document.querySelector(".ad2hs-prompt");
		  a2hsBtn.style.display = "block";
		  a2hsBtn.addEventListener("click", addToHomeScreen);
		}
		let deferredPrompt;
		window.addEventListener('beforeinstallprompt', function (e) {
		  // Prevent Chrome 67 and earlier from automatically showing the prompt
		  e.preventDefault();
		  // Stash the event so it can be triggered later.
		  deferredPrompt = e;
		  showAddToHomeScreen();
		});

		function showIosInstall() {
		  let iosPrompt = document.querySelector(".ios-prompt");
		  iosPrompt.style.display = "block";
		  iosPrompt.addEventListener("click", () => {
			iosPrompt.style.display = "none";
		  });
		}

		// Detects if device is on iOS
		const isIos = () => {
		  const userAgent = window.navigator.userAgent.toLowerCase();
		  return /iphone|ipad|ipod/.test( userAgent );
		}
		// Detects if device is in standalone mode
		const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
		// Checks if should display install popup notification:
		if (isIos() && !isInStandaloneMode()) {
		  // this.setState({ showInstallMessage: true });
		  showIosInstall();
		}
	  </script>
  </body>
</html>