pwa: update next-pwa to latest maintained version (#250)

apps/readest-app/.gitignore

@@ -53,3 +53,6 @@ src-tauri/gen
 # Auto Generated PWA files
 /public/sw.js
 /public/workbox-*.js
+/public/fallback-*.js
+/public/swe-worker-*.js
+

apps/readest-app/next.config.mjs

@@ -1,4 +1,4 @@
-import withPWA from 'next-pwa';
+import withPWAInit from '@ducanh2912/next-pwa';
 
 const isDev = process.env['NODE_ENV'] === 'development';
 const appPlatform = process.env['NEXT_PUBLIC_APP_PLATFORM'];
@@ -21,9 +21,19 @@ const nextConfig = {
   reactStrictMode: true,
 };
 
-export default withPWA({
+const withPWA = withPWAInit({
   dest: 'public',
   disable: isDev || appPlatform !== 'web',
-  register: true,
-  skipWaiting: true,
-})(nextConfig);
+  cacheOnFrontEndNav: true,
+  aggressiveFrontEndNavCaching: true,
+  reloadOnOnline: true,
+  swcMinify: true,
+  fallbacks: {
+    document: '/offline',
+  },
+  workboxOptions: {
+    disableDevLogs: true,
+  },
+});
+
+export default withPWA(nextConfig);

apps/readest-app/package.json

@@ -29,6 +29,7 @@
     "release-macos-universial-appstore": "dotenv -e .env.tauri.local -e .env.apple-appstore.local -- bash scripts/release-mac-appstore.sh"
   },
   "dependencies": {
+    "@ducanh2912/next-pwa": "^10.2.9",
     "@fabianlars/tauri-plugin-oauth": "2",
     "@supabase/auth-ui-react": "^0.4.7",
     "@supabase/auth-ui-shared": "^0.1.8",
@@ -80,7 +81,6 @@
     "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",

apps/readest-app/src/app/offline/page.tsx

@@ -0,0 +1,17 @@
+import Image from 'next/image';
+
+export default function Offline() {
+  return (
+    <div className='flex min-h-screen flex-col items-center justify-center bg-gray-100 text-center'>
+      <div className='mb-4'>
+        <Image src='/icon.png' alt='App Icon' width={100} height={100} className='rounded-lg' />
+      </div>
+
+      <h1 className='text-2xl font-bold text-gray-800'>Readest</h1>
+
+      <p className='mt-2 text-gray-600'>
+        It seems you&apos;re offline. Please check your internet connection and try again.
+      </p>
+    </div>
+  );
+}

apps/readest-app/src/app/page.tsx

@@ -1,19 +1,7 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { navigateToLibrary } from '@/utils/nav';
-
-import Spinner from '@/components/Spinner';
+import { redirectToLibrary } from '@/utils/nav';
 
 const HomePage = () => {
-  const router = useRouter();
-
-  useEffect(() => {
-    navigateToLibrary(router);
-  }, [router]);
-
-  return <Spinner loading={true} />;
+  redirectToLibrary();
 };
 
 export default HomePage;

apps/readest-app/src/utils/nav.ts

@@ -1,4 +1,4 @@
-import { useRouter } from 'next/navigation';
+import { useRouter, redirect } from 'next/navigation';
 import { isPWA, isWebAppPlatform } from '@/services/environment';
 import { BOOK_IDS_SEPARATOR } from '@/services/constants';
 
@@ -21,3 +21,7 @@ export const navigateToReader = (
 export const navigateToLibrary = (router: ReturnType<typeof useRouter>) => {
   router.push('/library');
 };
+
+export const redirectToLibrary = () => {
+  redirect('/library');
+};