✨ feat: support PWA progressive web app

README-zh_CN.md

@@ -56,8 +56,9 @@
 - [x] 🎛️ 高定制侧边栏，左侧为快捷设置侧边栏，右侧为模型侧边栏
 - [x] 🖼️ 可调节画板比例，使生成图像始终置顶
 - [x] 📱 移动端友好，针对手机屏幕完成部分优化
-- [x] 🇨🇳 支持 i18n 并欢迎提交 [PR](https://github.com/canisminor1990/sd-webui-lobe-theme/tree/main/src/i18n/lang) 贡献
+- [x] 🌍 支持 i18n 并欢迎提交 [PR](https://github.com/canisminor1990/sd-webui-lobe-theme/tree/main/src/i18n/lang) 贡献
 - [x] 📝 语法高亮的 Prompt 输入框
+- [x] 📦 支持 [PWA](https://support.google.com/chrome/answer/9658361?hl=zh-Hans) 网页应用
 
 <div align="right">
 

README.md

@@ -56,8 +56,9 @@ English · [简体中文](./README-zh_CN.md) · [Changelog](./CHANGELOG.md) · [
 - [x] 🎛️ Highly customizable sidebar, with a quick settings sidebar on the left and a model sidebar on the right
 - [x] 🖼️ Adjustable canvas ratio, ensuring that generated images are always displayed at the top
 - [x] 📱 Mobile-friendly, with partial optimization for mobile screens
-- [x] 🇨🇳 Support i18n and welcome [PR](https://github.com/canisminor1990/sd-webui-lobe-theme/tree/main/src/i18n/lang) contributions
+- [x] 🌍Support i18n and welcome [PR](https://github.com/canisminor1990/sd-webui-lobe-theme/tree/main/src/i18n/lang) contributions
 - [x] 📝 Syntax highlighting in the prompt input box
+- [x] 📦 Support [PWA](https://support.google.com/chrome/answer/9658361) progressive web app
 
 <div align="right">
 

src/App.tsx

@@ -7,6 +7,8 @@ import Index from '@/pages';
 import Loading from '@/slots/Loading';
 import { useAppStore } from '@/store';
 
+import manifest from './manifest';
+
 const App = memo(() => {
   const [loading, setLoading] = useState(true);
   const { setCurrentTab, onInit, storeLoading } = useAppStore(
@@ -50,10 +52,7 @@ const App = memo(() => {
           sizes="16x16"
           type="image/png"
         />
-        <link
-          href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/site.webmanifest"
-          rel="manifest"
-        />
+        <link href={manifest} rel="manifest" />
         <link
           color="#000000"
           href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/safari-pinned-tab.svg"

src/manifest.ts

@@ -0,0 +1,23 @@
+const manifest = {
+  background_color: '#000000',
+  display: 'fullscreen',
+  icons: [
+    {
+      sizes: '192x192',
+      src: 'https://npm.elemecdn.com/@lobehub/assets-favicons/assets/android-chrome-192x192.png',
+      type: 'image/png',
+    },
+    {
+      sizes: '512x512',
+      src: 'https://npm.elemecdn.com/@lobehub/assets-favicons/assets/android-chrome-512x512.png',
+      type: 'image/png',
+    },
+  ],
+  name: 'Stable Diffusion',
+  orientation: 'portrait',
+  short_name: 'Stable Diffusion',
+  start_url: location.origin,
+  theme_color: '#000000',
+};
+
+export default `data:application/manifest+json;base64,${btoa(JSON.stringify(manifest))}`;