Created
March 2, 2023 01:13
-
-
Save sebastian-hsu/a53baf6f4cad899244c9736627a02261 to your computer and use it in GitHub Desktop.
flutter webapp index.html with client ID and loader (remember to modify client id, title, description as you want)
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> | |
<head> | |
<!-- | |
If you are serving your web app in a path other than the root, change the | |
href value below to reflect the base path you are serving from. | |
The path provided below has to start and end with a slash "/" in order for | |
it to work correctly. | |
For more details: | |
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base | |
This is a placeholder for base href that will be replaced by the value of | |
the `--base-href` argument provided to `flutter build`. | |
--> | |
<base href="$FLUTTER_BASE_HREF"> | |
<meta charset="UTF-8"> | |
<meta content="IE=Edge" http-equiv="X-UA-Compatible"> | |
<meta name="description" content="your-description"> | |
<!-- iOS meta tags & icons --> | |
<meta name="apple-mobile-web-app-capable" content="yes"> | |
<meta name="apple-mobile-web-app-status-bar-style" content="black"> | |
<meta name="apple-mobile-web-app-title" content="your-title"> | |
<link rel="apple-touch-icon" href="icons/Icon-192.png"> | |
<!-- Favicon --> | |
<link rel="icon" type="image/png" href="favicon.png"/> | |
<title>Your Wonderful Title</title> | |
<link rel="manifest" href="manifest.json"> | |
<meta name="google-signin-client_id" content="your-client-id"> | |
<style> | |
.loading { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
margin: 0; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
-ms-transform: translate(-50%, -50%); | |
transform: translate(-50%, -50%); | |
} | |
.loader { | |
border: 16px solid #f3f3f3; | |
border-radius: 50%; | |
border: 15px solid ; | |
border-top: 16px solid blue; | |
border-right: 16px solid white; | |
border-bottom: 16px solid blue; | |
border-left: 16px solid white; | |
width: 120px; | |
height: 120px; | |
-webkit-animation: spin 2s linear infinite; | |
animation: spin 2s linear infinite; | |
} | |
@-webkit-keyframes spin { | |
0% { | |
-webkit-transform: rotate(0deg); | |
} | |
100% { | |
-webkit-transform: rotate(360deg); | |
} | |
} | |
@keyframes spin { | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(360deg); | |
} | |
} | |
</style> | |
<body> | |
<div class="loading"> | |
<div class="loader"></div> | |
</div> | |
<!-- This script installs service_worker.js to provide PWA functionality to | |
application. For more information, see: | |
https://developers.google.com/web/fundamentals/primers/service-workers --> | |
<script> | |
var serviceWorkerVersion = null; | |
var scriptLoaded = false; | |
function loadMainDartJs() { | |
if (scriptLoaded) { | |
return; | |
} | |
scriptLoaded = true; | |
var scriptTag = document.createElement('script'); | |
scriptTag.src = 'main.dart.js'; | |
scriptTag.type = 'application/javascript'; | |
document.body.append(scriptTag); | |
} | |
if ('serviceWorker' in navigator) { | |
// Service workers are supported. Use them. | |
window.addEventListener('load', function () { | |
// Wait for registration to finish before dropping the <script> tag. | |
// Otherwise, the browser will load the script multiple times, | |
// potentially different versions. | |
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion; | |
navigator.serviceWorker.register(serviceWorkerUrl) | |
.then((reg) => { | |
function waitForActivation(serviceWorker) { | |
serviceWorker.addEventListener('statechange', () => { | |
if (serviceWorker.state == 'activated') { | |
console.log('Installed new service worker.'); | |
loadMainDartJs(); | |
} | |
}); | |
} | |
if (!reg.active && (reg.installing || reg.waiting)) { | |
// No active web worker and we have installed or are installing | |
// one for the first time. Simply wait for it to activate. | |
waitForActivation(reg.installing || reg.waiting); | |
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) { | |
// When the app updates the serviceWorkerVersion changes, so we | |
// need to ask the service worker to update. | |
console.log('New service worker available.'); | |
reg.update(); | |
waitForActivation(reg.installing); | |
} else { | |
// Existing service worker is still good. | |
console.log('Loading app from service worker.'); | |
loadMainDartJs(); | |
} | |
}); | |
// If service worker doesn't succeed in a reasonable amount of time, | |
// fallback to plaint <script> tag. | |
setTimeout(() => { | |
if (!scriptLoaded) { | |
console.warn( | |
'Failed to load app from service worker. Falling back to plain <script> tag.', | |
); | |
loadMainDartJs(); | |
} | |
}, 4000); | |
}); | |
} else { | |
// Service workers not supported. Just drop the <script> tag. | |
loadMainDartJs(); | |
} | |
</script> | |
<script type="text/javascript" defer> | |
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script") | |
;r.type="text/javascript" | |
;r.integrity="sha384-UcvEbHmT0LE2ZB30Y3FmY3Nfw6puAKXz/LpCFuoywywYikMOr/519Uu1yNq2nL9w" | |
;r.crossOrigin="anonymous";r.async=true | |
;r.src="https://cdn.amplitude.com/libs/amplitude-8.12.0-min.gz.js" | |
;r.onload=function(){if(!e.amplitude.runQueuedFunctions){ | |
console.log("[Amplitude] Error: could not load SDK")}} | |
;var s=t.getElementsByTagName("script")[0];s.parentNode.insertBefore(r,s) | |
;function i(e,t){e.prototype[t]=function(){ | |
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}} | |
var o=function(){this._q=[];return this} | |
;var a=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove"] | |
;for(var c=0;c<a.length;c++){i(o,a[c])}n.Identify=o;var u=function(){this._q=[] | |
;return this} | |
;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"] | |
;for(var p=0;p<l.length;p++){i(u,l[p])}n.Revenue=u | |
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","enableTracking","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId","getDeviceId","getUserId","setMinTimeBetweenSessionsMillis","setEventUploadThreshold","setUseDynamicConfig","setServerZone","setServerUrl","sendEvents","setLibrary","setTransport"] | |
;function v(e){function t(t){e[t]=function(){ | |
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}} | |
for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){ | |
e=(!e||e.length===0?"$default_instance":e).toLowerCase() | |
;if(!Object.prototype.hasOwnProperty.call(n._iq,e)){n._iq[e]={_q:[]};v(n._iq[e]) | |
}return n._iq[e]};e.amplitude=n})(window,document); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment