Files
flipper/desktop/static/index.web.html
Lorenzo Blasa c6d5eb3334 Flipper as PWA
Summary:
^

Reference: https://docs.google.com/document/d/1flQJUzTe4AuQz3QCpvbloQycenHsu7ZxbKScov7K7ao

Reviewed By: passy

Differential Revision: D45693382

fbshipit-source-id: 5a2e6c213a7e7e2cf9cd5f3033cff3e5291a2a92
2023-05-16 04:32:47 -07:00

142 lines
3.8 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="icon.png">
<link rel="apple-touch-icon" href="/icon.png">
<link rel="stylesheet" href="style.css">
<link rel="manifest" href="manifest.json">
<link id="flipper-theme-import" rel="stylesheet">
<title>Flipper</title>
<script>
window.flipperConfig = {
theme: 'light',
entryPoint: 'bundle.js',
debug: false,
}
</script>
<style>
#loading {
-webkit-app-region: drag;
z-index: 999999;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 50px;
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #525252;
text-align: center;
}
.__infinity-dev-box-error {
background-color: red;
font-family: monospace;
font-size: 12px;
z-index: 10;
bottom: 0;
left: 0;
position: absolute;
}
</style>
</head>
<body>
<div id="root">
<div id="loading">
Loading...
</div>
</div>
<div class="__infinity-dev-box __infinity-dev-box-error" hidden />
<script>
(function () {
// FIXME: needed to make Metro work
window.global = window;
let suppressErrors = false;
function openError(text) {
if (suppressErrors) {
return;
}
let box = document.getElementById('loading');
if (box) {
box.innerText = text;
}
else {
box = document.querySelector('.__infinity-dev-box-error');
box.removeAttribute('hidden');
box.innerText = text;
box.appendChild(closeButton);
}
}
window.flipperShowError = openError;
window.flipperHideError = () => {
const box = document.querySelector('.__infinity-dev-box-error');
box.setAttribute('hidden', true);
}
const closeButton = document.createElement('button');
closeButton.addEventListener('click', window.flipperHideError);
closeButton.textContent = 'X';
// load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
try {
if (window.flipperConfig.theme === 'dark') {
document.getElementById('flipper-theme-import').href = "themes/dark.css";
} else {
document.getElementById('flipper-theme-import').href = "themes/light.css";
}
} catch (e) {
console.error("Failed to initialize theme", e);
document.getElementById('flipper-theme-import').href = "themes/light.css";
}
function init() {
const script = document.createElement('script');
script.src = window.flipperConfig.entryPoint;
script.onerror = (e) => {
openError('Script failure. Check Chrome console for more info.');
};
document.body.appendChild(script);
}
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js')
.then(() => {
console.log('Flipper Service Worker has been registered');
})
.catch((e) => {
console.error('Flipper failed to register Service Worker', e);
});
}
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt.
e.preventDefault();
// Stash the event so it can be triggered later.
global.PWAppInstallationEvent = e;
});
init();
})();
</script>
</body>
</html>