🐛 fix: Fix PWA
canisminor1990
parent
3180c408af
commit
21be524659
File diff suppressed because one or more lines are too long
|
|
@ -1,13 +1,18 @@
|
|||
import { useCdnFn } from '@lobehub/ui';
|
||||
import { consola } from 'consola';
|
||||
import { PropsWithChildren, Suspense, memo, useEffect, useState } from 'react';
|
||||
import { PropsWithChildren, Suspense, memo, useCallback, useEffect, useState } from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
import pkg from '@/../package.json';
|
||||
import { Loading } from '@/components';
|
||||
import GlobalLayout from '@/layouts';
|
||||
import { useAppStore } from '@/store';
|
||||
|
||||
import manifest from './manifest';
|
||||
|
||||
const TITLE = 'Stable Diffusion · LobeHub';
|
||||
const DESC = pkg.description;
|
||||
|
||||
export const Layout = memo<PropsWithChildren>(({ children }) => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const { setCurrentTab, onInit, storeLoading } = useAppStore((st) => ({
|
||||
|
|
@ -15,6 +20,16 @@ export const Layout = memo<PropsWithChildren>(({ children }) => {
|
|||
setCurrentTab: st.setCurrentTab,
|
||||
storeLoading: st.loading,
|
||||
}));
|
||||
const genCdnUrl = useCdnFn();
|
||||
const genAssets = useCallback(
|
||||
(path: string) =>
|
||||
genCdnUrl({
|
||||
path,
|
||||
pkg: '@lobehub/assets-favicons',
|
||||
version: 'latest',
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
onInit();
|
||||
|
|
@ -30,32 +45,38 @@ export const Layout = memo<PropsWithChildren>(({ children }) => {
|
|||
return (
|
||||
<Suspense fallback="loading...">
|
||||
<Helmet>
|
||||
<link href={genAssets('assets/favicon.ico')} rel="shortcut icon" />
|
||||
<link
|
||||
href="https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/apple-touch-icon.png"
|
||||
href={genAssets('assets/apple-touch-icon.png')}
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
/>
|
||||
<link
|
||||
href="https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/favicon-32x32.png"
|
||||
href={genAssets('assets/favicon-32x32.png')}
|
||||
rel="icon"
|
||||
sizes="32x32"
|
||||
type="image/png"
|
||||
/>
|
||||
<link
|
||||
href="https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/favicon-16x16.png"
|
||||
href={genAssets('assets/favicon-16x16.png')}
|
||||
rel="icon"
|
||||
sizes="16x16"
|
||||
type="image/png"
|
||||
/>
|
||||
<link
|
||||
href="https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/site.webmanifest"
|
||||
rel="manifest"
|
||||
<meta
|
||||
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no"
|
||||
name="viewport"
|
||||
/>
|
||||
<meta content="Stable Diffusion · LobeHub" name="apple-mobile-web-app-title" />
|
||||
<meta content="Stable Diffusion · LobeHub" name="application-name" />
|
||||
<meta content={TITLE} name="apple-mobile-web-app-title" />
|
||||
<meta content={TITLE} name="application-name" />
|
||||
<meta content={DESC} name="description" />
|
||||
<meta content="#000000" name="msapplication-TileColor" />
|
||||
<meta content="#000000" name="theme-color" />
|
||||
<link href={manifest} rel="manifest" />
|
||||
<meta content="#fff" media="(prefers-color-scheme: light)" name="theme-color" />
|
||||
<meta content="#000" media="(prefers-color-scheme: dark)" name="theme-color" />
|
||||
<meta content="yes" name="apple-mobile-web-app-capable" />
|
||||
<meta content={TITLE} name="apple-mobile-web-app-title" />
|
||||
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style" />
|
||||
<link href={manifest(genAssets)} rel="manifest" />
|
||||
</Helmet>
|
||||
<GlobalLayout>
|
||||
{storeLoading === false && loading === false ? children : <Loading />}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,45 @@
|
|||
const manifest = {
|
||||
background_color: '#000000',
|
||||
description:
|
||||
'The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.',
|
||||
display: 'standalone',
|
||||
icons: [
|
||||
{
|
||||
sizes: '192x192',
|
||||
src: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/android-chrome-192x192.png',
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
sizes: '512x512',
|
||||
src: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.1.0/files/assets/android-chrome-512x512.png',
|
||||
type: 'image/png',
|
||||
},
|
||||
],
|
||||
id: '/',
|
||||
name: 'Stable Diffusion',
|
||||
orientation: 'portrait',
|
||||
scope: '/',
|
||||
short_name: 'Stable Diffusion',
|
||||
splash_pages: null,
|
||||
start_url: location.origin,
|
||||
theme_color: '#000000',
|
||||
};
|
||||
import pkg from '@/../package.json';
|
||||
|
||||
export default `data:application/manifest+json;base64,${btoa(JSON.stringify(manifest))}`;
|
||||
export default (genAssets: (path: string) => string) => {
|
||||
const manifest = {
|
||||
background_color: '#000',
|
||||
description: pkg.description,
|
||||
display: 'fullscreen',
|
||||
icons: [
|
||||
{
|
||||
purpose: 'any',
|
||||
sizes: '192x192',
|
||||
src: genAssets('assets/android-chrome-192x192.png'),
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
purpose: 'maskable',
|
||||
sizes: '192x192',
|
||||
src: genAssets('assets/android-chrome-maskable-192x192.png'),
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
purpose: 'any',
|
||||
sizes: '512x512',
|
||||
src: genAssets('assets/android-chrome-512x512.png'),
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
purpose: 'maskable',
|
||||
sizes: '512x512',
|
||||
src: genAssets('assets/android-chrome-maskable-512x512.png'),
|
||||
type: 'image/png',
|
||||
},
|
||||
],
|
||||
id: '/',
|
||||
name: 'Stable Diffusion',
|
||||
orientation: 'portrait',
|
||||
scope: '/',
|
||||
short_name: 'Stable Diffusion',
|
||||
splash_pages: null,
|
||||
start_url: location.origin,
|
||||
theme_color: '#000000',
|
||||
};
|
||||
|
||||
return `data:application/manifest+json;base64,${btoa(JSON.stringify(manifest))}`;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue