Add PWA support with service worker, manifest, and icons
All checks were successful
Deploy / deploy (push) Successful in 2s

This commit is contained in:
M1ngdaXie
2026-03-27 18:37:10 -07:00
parent fc1eb2040c
commit cf64244b21
5 changed files with 68 additions and 3 deletions

BIN
icons/icon-192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
icons/icon-512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

View File

@@ -7,8 +7,11 @@
content="width=device-width, initial-scale=1.0, user-scalable=no"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#1a1a2e" />
<title>梅子的成语填字</title>
<link rel="stylesheet" href="style.css" />
<link rel="manifest" href="manifest.json" />
<link rel="apple-touch-icon" href="icons/icon-192.png?v=3" />
<link rel="stylesheet" href="style.css?v=3" />
</head>
<body>
<div class="header">
@@ -158,7 +161,12 @@
</div>
</div>
<script src="data.js"></script>
<script src="app.js"></script>
<script src="data.js?v=3"></script>
<script src="app.js?v=3"></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
</script>
</body>
</html>

24
manifest.json Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "梅子的成语填字",
"short_name": "成语填字",
"description": "每天练习成语填字,越练越强!",
"start_url": "/",
"display": "standalone",
"background_color": "#1a1a2e",
"theme_color": "#1a1a2e",
"orientation": "portrait",
"icons": [
{
"src": "icons/icon-192.png?v=3",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "icons/icon-512.png?v=3",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}

33
sw.js Normal file
View File

@@ -0,0 +1,33 @@
const CACHE_NAME = 'chengyu-v1';
const ASSETS = [
'/',
'/index.html',
'/style.css',
'/app.js',
'/data.js',
'/manifest.json',
'/icons/icon-192.png',
'/icons/icon-512.png'
];
self.addEventListener('install', e => {
e.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
);
self.skipWaiting();
});
self.addEventListener('activate', e => {
e.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
)
);
self.clients.claim();
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(cached => cached || fetch(e.request))
);
});