diff options
| author | nsfisis <nsfisis@gmail.com> | 2025-12-07 18:53:56 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2025-12-07 18:53:56 +0900 |
| commit | 4b755c758e920fb0295b066fa20ce6667334546b (patch) | |
| tree | c9d8c7a8fa22b65214e7aa9a20dcfebf6c83c6a9 /public | |
| parent | f443ac18ccb8ab34fb5bf69b0802eb69cf89cf06 (diff) | |
| download | kioku-4b755c758e920fb0295b066fa20ce6667334546b.tar.gz kioku-4b755c758e920fb0295b066fa20ce6667334546b.tar.zst kioku-4b755c758e920fb0295b066fa20ce6667334546b.zip | |
feat(pwa): add PWA support with vite-plugin-pwa
Configure Progressive Web App functionality:
- Add vite-plugin-pwa with workbox for service worker
- Create web manifest with app metadata and icons
- Add offline fallback page for when network is unavailable
- Update index.html with PWA meta tags and theme color
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Diffstat (limited to 'public')
| -rw-r--r-- | public/icon.svg | 4 | ||||
| -rw-r--r-- | public/offline.html | 91 |
2 files changed, 95 insertions, 0 deletions
diff --git a/public/icon.svg b/public/icon.svg new file mode 100644 index 0000000..3ff6f28 --- /dev/null +++ b/public/icon.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> + <rect width="512" height="512" rx="64" fill="#4CAF50"/> + <text x="256" y="340" font-family="Arial, sans-serif" font-size="280" font-weight="bold" fill="white" text-anchor="middle">K</text> +</svg> diff --git a/public/offline.html b/public/offline.html new file mode 100644 index 0000000..15bcb0c --- /dev/null +++ b/public/offline.html @@ -0,0 +1,91 @@ +<!doctype html> +<html lang="ja"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="theme-color" content="#4CAF50" /> + <title>Kioku - Offline</title> + <style> + * { + box-sizing: border-box; + margin: 0; + padding: 0; + } + body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + background-color: #f5f5f5; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + } + .container { + text-align: center; + padding: 2rem; + max-width: 400px; + } + .icon { + width: 80px; + height: 80px; + margin-bottom: 1.5rem; + } + h1 { + color: #333; + margin-bottom: 1rem; + font-size: 1.5rem; + } + p { + color: #666; + margin-bottom: 1.5rem; + line-height: 1.6; + } + button { + background-color: #4caf50; + color: white; + border: none; + padding: 0.75rem 1.5rem; + border-radius: 4px; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.2s; + } + button:hover { + background-color: #45a049; + } + button:active { + background-color: #3d8b40; + } + </style> + </head> + <body> + <div class="container"> + <svg + class="icon" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 512 512" + > + <rect width="512" height="512" rx="64" fill="#4CAF50" /> + <text + x="256" + y="340" + font-family="Arial, sans-serif" + font-size="280" + font-weight="bold" + fill="white" + text-anchor="middle" + > + K + </text> + </svg> + <h1>You're Offline</h1> + <p> + It looks like you've lost your internet connection. Please check your + connection and try again. + </p> + <button type="button" onclick="window.location.reload()"> + Try Again + </button> + </div> + </body> +</html> |
