+
![]()
-
+
{databases[database].image && (
![]()
{(showEditName || modal === MODAL.RENAME) &&
-
+
diff --git a/src/components/PwaUpdatePrompt.jsx b/src/components/PwaUpdatePrompt.jsx
new file mode 100644
index 00000000..c0a32a3e
--- /dev/null
+++ b/src/components/PwaUpdatePrompt.jsx
@@ -0,0 +1,34 @@
+import { useRegisterSW } from "virtual:pwa-register/react";
+import { Typography, Toast } from "@douyinfe/semi-ui";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+const { Text } = Typography;
+
+export function PwaUpdatePrompt() {
+ const { t } = useTranslation();
+ const {
+ needRefresh: [isRefreshNeeded],
+ updateServiceWorker,
+ } = useRegisterSW();
+
+ useEffect(() => {
+ if (!isRefreshNeeded) return;
+
+ Toast.info({
+ duration: 0, // indefinite
+ content: (
+
{Object.keys(menu).map((category) => (
{getState()}
+ {isOfflineReady && (
+
+
+
+ ),
+ });
+ }, [isRefreshNeeded, updateServiceWorker, t]);
+
+ return <>;
+}
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index 813f5a1b..4dcfc5cc 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -6,6 +6,10 @@ const english = {
const en = {
translation: {
+ available_offline: "Available offline",
+ update_available: "An updated version of drawDB is available!",
+ reload_page_to_update: "Reload the page to update",
+ reload_now: "Reload now",
report_bug: "Report a bug",
import: "Import",
file: "File",
diff --git a/vite.config.js b/vite.config.js
index 5a33944a..68d11e5c 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,55 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { VitePWA } from "vite-plugin-pwa";
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
-})
+ plugins: [
+ react(),
+ VitePWA({
+ workbox: {
+ globPatterns: ["**/*"],
+ maximumFileSizeToCacheInBytes: 15_000_000,
+ },
+ includeAssets: ["**/*"],
+ registerType: "prompt",
+ manifest: {
+ name: "DrawDB",
+ short_name: "DrawDB",
+ icons: [
+ {
+ src: "/pwa-192x192.png",
+ sizes: "192x192",
+ type: "image/png",
+ purpose: "any",
+ },
+ {
+ src: "/pwa-512x512.png",
+ sizes: "512x512",
+ type: "image/png",
+ purpose: "any",
+ },
+ {
+ src: "/pwa-maskable-192x192.png",
+ sizes: "192x192",
+ type: "image/png",
+ purpose: "maskable",
+ },
+ {
+ src: "/pwa-maskable-512x512.png",
+ sizes: "512x512",
+ type: "image/png",
+ purpose: "maskable",
+ },
+ ],
+ scope: "/",
+ start_url: "/editor",
+ display: "standalone",
+ background_color: "#14475b",
+ theme_color: "#14475b",
+ description:
+ "Free, simple, and intuitive database design tool and SQL generator.",
+ },
+ }),
+ ],
+});
{t("update_available")}
+{t("reload_page_to_update")}
+
+
+ {t("reload_now")}
+
+
+