client pwa
This commit is contained in:
parent
04c99188b8
commit
f48498e0db
8 changed files with 97 additions and 5 deletions
BIN
crates/client/assets/favicon.ico
Normal file
BIN
crates/client/assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
crates/client/assets/icon-1024.png
Normal file
BIN
crates/client/assets/icon-1024.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
BIN
crates/client/assets/icon-256.png
Normal file
BIN
crates/client/assets/icon-256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
crates/client/assets/icon_ios_touch_192.png
Normal file
BIN
crates/client/assets/icon_ios_touch_192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
28
crates/client/assets/manifest.json
Normal file
28
crates/client/assets/manifest.json
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"name": "wxbox",
|
||||||
|
"short_name": "wxbox",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "./assets/icon-256.png",
|
||||||
|
"sizes": "256x256",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "./assets/maskable_icon_x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "./assets/icon-1024.png",
|
||||||
|
"sizes": "1024x1024",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"lang": "en-US",
|
||||||
|
"id": "/index.html",
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "white",
|
||||||
|
"theme_color": "white"
|
||||||
|
}
|
||||||
BIN
crates/client/assets/maskable_icon_x512.png
Normal file
BIN
crates/client/assets/maskable_icon_x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
25
crates/client/assets/sw.js
Normal file
25
crates/client/assets/sw.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
var cacheName = 'egui-template-pwa';
|
||||||
|
var filesToCache = [
|
||||||
|
'./',
|
||||||
|
'./index.html',
|
||||||
|
'./eframe_template.js',
|
||||||
|
'./eframe_template_bg.wasm',
|
||||||
|
];
|
||||||
|
|
||||||
|
/* Start the service worker and cache all of the app's content */
|
||||||
|
self.addEventListener('install', function (e) {
|
||||||
|
e.waitUntil(
|
||||||
|
caches.open(cacheName).then(function (cache) {
|
||||||
|
return cache.addAll(filesToCache);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Serve cached content when offline */
|
||||||
|
self.addEventListener('fetch', function (e) {
|
||||||
|
e.respondWith(
|
||||||
|
caches.match(e.request).then(function (response) {
|
||||||
|
return response || fetch(e.request);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
@ -8,6 +8,28 @@
|
||||||
<head>
|
<head>
|
||||||
<!-- change this to your project name -->
|
<!-- change this to your project name -->
|
||||||
<title>wxbox</title>
|
<title>wxbox</title>
|
||||||
|
|
||||||
|
<!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
|
||||||
|
<link data-trunk rel="rust" data-wasm-opt="2" />
|
||||||
|
<!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
|
||||||
|
<base data-trunk-public-url />
|
||||||
|
|
||||||
|
<link data-trunk rel="icon" href="assets/favicon.ico">
|
||||||
|
|
||||||
|
|
||||||
|
<link data-trunk rel="copy-file" href="assets/sw.js"/>
|
||||||
|
<link data-trunk rel="copy-file" href="assets/manifest.json"/>
|
||||||
|
<link data-trunk rel="copy-file" href="assets/icon-1024.png" data-target-path="assets"/>
|
||||||
|
<link data-trunk rel="copy-file" href="assets/icon-256.png" data-target-path="assets"/>
|
||||||
|
<link data-trunk rel="copy-file" href="assets/icon_ios_touch_192.png" data-target-path="assets"/>
|
||||||
|
<link data-trunk rel="copy-file" href="assets/maskable_icon_x512.png" data-target-path="assets"/>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="manifest" href="manifest.json">
|
||||||
|
<link rel="apple-touch-icon" href="assets/icon_ios_touch_192.png">
|
||||||
|
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
|
||||||
|
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#404040">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
html {
|
html {
|
||||||
/* Remove touch delay: */
|
/* Remove touch delay: */
|
||||||
|
|
@ -17,14 +39,14 @@
|
||||||
body {
|
body {
|
||||||
/* Light mode background color for what is not covered by the egui canvas,
|
/* Light mode background color for what is not covered by the egui canvas,
|
||||||
or where the egui canvas is translucent. */
|
or where the egui canvas is translucent. */
|
||||||
background: #909090;
|
background: #fcfcfd;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
body {
|
body {
|
||||||
/* Dark mode background color for what is not covered by the egui canvas,
|
/* Dark mode background color for what is not covered by the egui canvas,
|
||||||
or where the egui canvas is translucent. */
|
or where the egui canvas is translucent. */
|
||||||
background: #404040;
|
background: #111113;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -33,7 +55,6 @@
|
||||||
body {
|
body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 0 !important;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -47,7 +68,13 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
@supports (-webkit-touch-callout: none) {
|
||||||
|
height: calc(100% - 26px);
|
||||||
|
}
|
||||||
|
@supports not (-webkit-touch-callout: none) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.centered {
|
.centered {
|
||||||
|
|
@ -109,6 +136,18 @@
|
||||||
<div class="lds-dual-ring"></div>
|
<div class="lds-dual-ring"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
|
||||||
|
<!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files -->
|
||||||
|
<script>
|
||||||
|
// We disable caching during development so that we always view the latest version.
|
||||||
|
if ('serviceWorker' in navigator && window.location.hash !== "#dev") {
|
||||||
|
window.addEventListener('load', function () {
|
||||||
|
navigator.serviceWorker.register('sw.js');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
<!-- Powered by egui: https://github.com/emilk/egui/ -->
|
||||||
Loading…
Add table
Reference in a new issue