Prepare for PWA and add more resolutions
This commit is contained in:
32
index.html
32
index.html
@ -2,8 +2,19 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
<title>Bitfielder</title>
|
<title>Bitfielder</title>
|
||||||
|
|
||||||
|
<!-- PWA Meta Tags -->
|
||||||
|
<link rel="manifest" href="/manifest.json">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
|
<meta name="apple-mobile-web-app-title" content="Bitfielder">
|
||||||
|
<link rel="apple-touch-icon" href="/icon-192.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">
|
||||||
<meta name="description" content="Bitfielder is a live bitfield shader editor for creating visual patterns using bitwise operations.">
|
<meta name="description" content="Bitfielder is a live bitfield shader editor for creating visual patterns using bitwise operations.">
|
||||||
<meta name="author" content="BuboBubo">
|
<meta name="author" content="BuboBubo">
|
||||||
<meta name="keywords" content="shader, bitfield, visual, patterns, programming, interactive, editor">
|
<meta name="keywords" content="shader, bitfield, visual, patterns, programming, interactive, editor">
|
||||||
@ -761,6 +772,8 @@
|
|||||||
<option value="2">Half (2x)</option>
|
<option value="2">Half (2x)</option>
|
||||||
<option value="4">Quarter (4x)</option>
|
<option value="4">Quarter (4x)</option>
|
||||||
<option value="8">Eighth (8x)</option>
|
<option value="8">Eighth (8x)</option>
|
||||||
|
<option value="16">Sixteenth (16x)</option>
|
||||||
|
<option value="32">Thirty-second (32x)</option>
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
<label style="color: #ccc; font-size: 12px; margin-right: 10px;">
|
<label style="color: #ccc; font-size: 12px; margin-right: 10px;">
|
||||||
@ -817,6 +830,8 @@
|
|||||||
<option value="2">Half (2x)</option>
|
<option value="2">Half (2x)</option>
|
||||||
<option value="4">Quarter (4x)</option>
|
<option value="4">Quarter (4x)</option>
|
||||||
<option value="8">Eighth (8x)</option>
|
<option value="8">Eighth (8x)</option>
|
||||||
|
<option value="16">Sixteenth (16x)</option>
|
||||||
|
<option value="32">Thirty-second (32x)</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="mobile-menu-item">
|
<div class="mobile-menu-item">
|
||||||
@ -972,5 +987,20 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
|
||||||
|
<!-- PWA Service Worker Registration -->
|
||||||
|
<script>
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
navigator.serviceWorker.register('/sw.js')
|
||||||
|
.then(registration => {
|
||||||
|
console.log('SW registered: ', registration);
|
||||||
|
})
|
||||||
|
.catch(registrationError => {
|
||||||
|
console.log('SW registration failed: ', registrationError);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
BIN
public/icon-192.png
Normal file
BIN
public/icon-192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
public/icon-512.png
Normal file
BIN
public/icon-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
40
public/manifest.json
Normal file
40
public/manifest.json
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"name": "Bitfielder - Bitfield Shader Editor",
|
||||||
|
"short_name": "Bitfielder",
|
||||||
|
"description": "Interactive bitfield shader editor for creating visual patterns using bitwise operations",
|
||||||
|
"start_url": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#000000",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"orientation": "any",
|
||||||
|
"scope": "/",
|
||||||
|
"categories": ["graphics", "developer", "productivity"],
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/icon-192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/icon-512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"screenshots": [
|
||||||
|
{
|
||||||
|
"src": "/screenshot-desktop.png",
|
||||||
|
"sizes": "1280x720",
|
||||||
|
"type": "image/png",
|
||||||
|
"form_factor": "wide"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/screenshot-mobile.png",
|
||||||
|
"sizes": "390x844",
|
||||||
|
"type": "image/png",
|
||||||
|
"form_factor": "narrow"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
50
public/sw.js
Normal file
50
public/sw.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
const CACHE_NAME = 'bitfielder-v1';
|
||||||
|
const urlsToCache = [
|
||||||
|
'/',
|
||||||
|
'/index.html',
|
||||||
|
'/src/main.ts',
|
||||||
|
'/src/FakeShader.ts',
|
||||||
|
'/src/ShaderWorker.ts',
|
||||||
|
'/src/Storage.ts',
|
||||||
|
'/src/icons.ts',
|
||||||
|
'/manifest.json'
|
||||||
|
];
|
||||||
|
|
||||||
|
// Install event - cache resources
|
||||||
|
self.addEventListener('install', event => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.open(CACHE_NAME)
|
||||||
|
.then(cache => {
|
||||||
|
console.log('Opened cache');
|
||||||
|
return cache.addAll(urlsToCache);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fetch event - serve from cache when offline
|
||||||
|
self.addEventListener('fetch', event => {
|
||||||
|
event.respondWith(
|
||||||
|
caches.match(event.request)
|
||||||
|
.then(response => {
|
||||||
|
// Return cached version or fetch from network
|
||||||
|
return response || fetch(event.request);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Activate event - clean up old caches
|
||||||
|
self.addEventListener('activate', event => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.keys().then(cacheNames => {
|
||||||
|
return Promise.all(
|
||||||
|
cacheNames.map(cacheName => {
|
||||||
|
if (cacheName !== CACHE_NAME) {
|
||||||
|
console.log('Deleting old cache:', cacheName);
|
||||||
|
return caches.delete(cacheName);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user