Skip to content

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Aug 31, 2025

Implements Progressive Web App (PWA) capabilities to enable offline usage and native app-like experience for field technicians. The application now works completely offline after the initial load and can be installed as a standalone app on supported browsers.

Key Features Added

Progressive Web App Support:

  • Offline Functionality: Complete UI works offline after initial online load
  • App Installation: Install prompt on Chrome/Edge for native app experience
  • Service Worker: Intelligent caching with automatic cache invalidation on updates
  • Web App Manifest: Proper metadata for standalone app behavior

Smart Caching Strategy:

  • Core assets (HTML, CSS, JS) are precached for instant offline access
  • Network-first strategy for app updates ensures latest version when online
  • Cache-first strategy for static resources (fonts, images) for fast loading
  • Automatic cleanup of old caches on new deployments

Technical Implementation

The PWA implementation includes:

  1. Web App Manifest (public/manifest.json) with proper app metadata, theme colors, and icons
  2. Service Worker (public/sw.js) providing offline caching and intelligent update strategies
  3. Conditional Registration in src/main.tsx - only activates in production builds
  4. PWA Meta Tags in index.html for proper mobile app behavior
  5. Icon Assets including SVG and PNG variants for different display contexts

Usage

Installation:

  1. Visit the app in Chrome 89+ or Edge
  2. Look for install prompt in address bar or browser menu
  3. Click "Install" to add to desktop/home screen

Offline Usage:

  • Load the app once while online to cache all assets
  • UI remains fully functional when offline
  • Serial communication works when hardware is connected (browser retains permissions)

Testing

  • All existing tests continue to pass (127/127)
  • Added new PWA-specific tests for configuration validation
  • Service worker registration verified in production builds
  • Manifest structure and meta tags validated

Developer Experience

  • Zero breaking changes to existing functionality
  • Production-only activation prevents development conflicts
  • Maintains existing build process and deployment workflow
  • Comprehensive documentation added to README

PWA Application

Perfect for field technicians who need reliable access to Modbus monitoring tools regardless of network connectivity.

Fixes #24.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Copilot AI and others added 2 commits August 31, 2025 00:45
Co-authored-by: takker99 <37929109+takker99@users.noreply.github.com>
…e support

Co-authored-by: takker99 <37929109+takker99@users.noreply.github.com>
@Copilot Copilot AI changed the title [WIP] Add PWA support (offline usage & smart caching) Add PWA support with offline functionality and app installation Aug 31, 2025
@Copilot Copilot AI requested a review from takker99 August 31, 2025 00:55
Copilot finished work on behalf of takker99 August 31, 2025 00:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add PWA support (offline usage & smart caching)

2 participants