mobile friendliness with PWA

[sutyum]

App Like Usability when Offline

• App Icons, status bar (https://github.com/elegantapp/pwa-asset-generator)
• Pre-cache last 25 chats
• Cache all routes for 3 months
• Cache Audio Files and Clerk User Images (https://ducanh-next-pwa.vercel.app/docs/next-pwa/offline-fallbacks)

Mobile Friendly UI

• Toast for offline (https://ui.shadcn.com/docs/components/toast), (https://dev.to/alexgurr/turning-a-react-app-into-a-pwa-with-offline-detection-service-workers-and-theming-142i#chapter-3)
• Floating Tab bar with Search, Playlist and New Chat Button
• Disable send and mic on offline, hide new chat when offline
• Pull to refresh (https://github.com/cuongdevjs/pull-to-refresh-react) with offline state
• Hide scrollbars in various places (https://github.com/reslear/tailwind-scrollbar-hide)

Better App Start

• Add a static splash screen
• Refactor routes so that /user and /org are not dynamic routes @PrinceBaghel258025
• The PWA should start at /org @PrinceBaghel258025

Optimisations

• App Shortcut (https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/shortcuts)
• https://stackoverflow.com/questions/13334397/white-flicker-between-launch-image-splash-screen-and-app-homepage
• PWA Compat

—-

Additional References

• https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-3-offline-support-and-network-resilience-c84db889162c
• https://ducanh-next-pwa.vercel.app/docs/next-pwa/getting-started

[sutyum]

Partially resolved by #59