Support PWA for the web version (#212)

* Support PWA for the web version * Remove unused Cargo.lock
2025-01-22 00:18:19 +01:00
parent fc2cad3980
commit ee0d7d7ad0
8 changed files with 2263 additions and 7232 deletions
@@ -49,3 +49,7 @@ src-tauri/gen

 # vendor
 /public/vendor
+
+# Auto Generated PWA files
+/public/sw.js
+/public/workbox-*.js
@@ -1,13 +1,17 @@
+import withPWA from 'next-pwa';
+
 /** @type {import('next').NextConfig} */
 const isProd = process.env.NODE_ENV === 'production';

 const internalHost = process.env.TAURI_DEV_HOST || 'localhost';

+const appPlatform = process.env['NEXT_PUBLIC_APP_PLATFORM'];
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  // Ensure Next.js uses SSG instead of SSR
  // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
-  output: process.env['NEXT_PUBLIC_APP_PLATFORM'] === 'web' ? undefined : 'export',
+  output: appPlatform === 'web' ? undefined : 'export',
  // Note: This feature is required to use the Next.js Image component in SSG mode.
  // See https://nextjs.org/docs/messages/export-image-api for different workarounds.
  images: {
@@ -21,4 +25,9 @@ const nextConfig = {
  reactStrictMode: true,
 };

-export default nextConfig;
+export default withPWA({
+  dest: 'public',
+  disable: process.env.NODE_ENV === 'development' || appPlatform !== 'web',
+  register: true,
+  skipWaiting: true,
+})(nextConfig);
@@ -79,6 +79,7 @@
    "eslint-config-next": "15.0.3",
    "i18next-scanner": "^4.6.0",
    "mkdirp": "^3.0.1",
+    "next-pwa": "^5.6.0",
    "node-env-run": "^4.0.2",
    "postcss": "^8.4.49",
    "postcss-cli": "^11.0.0",
@@ -0,0 +1,27 @@
+{
+  "name": "Readest - Your Ultimate eBook Reader",
+  "short_name": "Readest",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "description": "Readest is an open-source eBook reader supporting EPUB, PDF, and sync across devices.",
+  "icons": [
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "256x256"
+    },
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "splash_pages": null
+}
@@ -13,6 +13,35 @@ const description =
  'Perfect for deep reading, analysis, and understanding. Explore now!';
 const previewImage = 'https://cdn.readest.com/images/open_graph_preview_read_now.png';

+export const metadata = {
+  title,
+  description,
+  generator: 'Next.js',
+  manifest: '/manifest.json',
+  keywords: ['epub', 'pdf', 'ebook', 'reader', 'readest', 'pwa'],
+  authors: [
+    {
+      name: 'readest',
+      url: 'https://github.com/readest/readest',
+    },
+  ],
+  icons: [
+    { rel: 'apple-touch-icon', url: '/apple-touch-icon.png' },
+    { rel: 'icon', url: '/icon.png' },
+  ],
+};
+
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'white' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' },
+  ],
+};
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
@@ -23,6 +52,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
        <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
        <link rel='icon' href='/favicon.ico' />
+        <link rel='manifest' href='/manifest.json' />
        <meta name='description' content={description} />
        <meta property='og:url' content={url} />
        <meta property='og:type' content='website' />
@@ -45,7 +45,7 @@ export const AboutWindow = () => {
              {_('Version {{version}}', { version: packageJson.version })}
            </p>
            {hasUpdater() && !isUpdated && (
-              <span className='badge badge-primary mt-2' onClick={handleCheckUpdate}>
+              <span className='badge badge-primary mt-2 cursor-pointer' onClick={handleCheckUpdate}>
                {_('Check update')}
              </span>
            )}