mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-03-28 17:42:45 +01:00
docs: Add PWA notifications documentation to README
Updates README.md for the new PWA notification feature: - Added PWA notifications to Key Features list with platform support notes - Created comprehensive "PWA Notifications (Experimental)" section in Usage: - How to enable/disable notifications - Platform support (tested on Windows/Firefox, Android requires testing) - Installing as PWA instructions for Android and Desktop - Troubleshooting guide - Added to Completed Features checklist - Updated Project Structure to include sw.js and manifest.json Testing status: - ✅ Windows Desktop (Firefox) - working correctly - ⚠️ Android Mobile - requires further testing (PWA via Chrome) Note: .claude/CLAUDE.md also updated but excluded from git (in .gitignore) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
96
README.md
96
README.md
@@ -33,6 +33,11 @@ A lightweight web interface for meshcore-cli, providing browser-based access to
|
||||
- 📦 **Message archiving** - Automatic daily archiving with browse-by-date selector
|
||||
- ⚡ **Efficient polling** - Lightweight update checks every 10s, UI refreshes only when needed
|
||||
- 📡 **Network commands** - Send advertisement (advert) or flood advertisement (floodadv) for network management
|
||||
- 🔔 **PWA notifications** - Browser notifications for new messages when app is hidden (experimental)
|
||||
- Desktop notifications with aggregated message counts
|
||||
- App badge counter on home screen icon (Android/Desktop)
|
||||
- Service Worker for PWA installability and offline support
|
||||
- Tested on Windows desktop (Firefox), requires further testing on Android mobile
|
||||
|
||||
## Tech Stack
|
||||
|
||||
@@ -187,11 +192,13 @@ mc-webui/
|
||||
│ ├── static/
|
||||
│ │ ├── css/
|
||||
│ │ │ └── style.css # Custom styles
|
||||
│ │ └── js/
|
||||
│ │ ├── app.js # Main page frontend logic
|
||||
│ │ ├── dm.js # Direct Messages page logic
|
||||
│ │ ├── contacts.js # Contact Management multi-page logic
|
||||
│ │ └── message-utils.js # Message content processing (mentions, URLs, images)
|
||||
│ │ ├── js/
|
||||
│ │ │ ├── app.js # Main page frontend logic
|
||||
│ │ │ ├── dm.js # Direct Messages page logic
|
||||
│ │ │ ├── contacts.js # Contact Management multi-page logic
|
||||
│ │ │ ├── message-utils.js # Message content processing (mentions, URLs, images)
|
||||
│ │ │ └── sw.js # Service Worker for PWA notifications
|
||||
│ │ └── manifest.json # PWA manifest
|
||||
│ └── templates/
|
||||
│ ├── base.html # Base template
|
||||
│ ├── index.html # Main chat view
|
||||
@@ -226,6 +233,7 @@ mc-webui/
|
||||
- [x] Direct Messages (DM) - Private messaging with delivery status tracking
|
||||
- [x] Advanced Contact Management - Multi-page interface with sorting, filtering, and activity tracking
|
||||
- [x] Message Content Enhancements - Mention badges, clickable URLs, and image previews
|
||||
- [x] PWA Notifications (Experimental) - Browser notifications and app badge counters (tested on Windows/Firefox, requires testing on Android)
|
||||
|
||||
### Next Steps
|
||||
|
||||
@@ -540,6 +548,84 @@ Sends advertisement in flooding mode, forcing all nodes to retransmit. **Use onl
|
||||
3. Confirm you want to proceed
|
||||
4. Wait for confirmation toast
|
||||
|
||||
### PWA Notifications (Experimental)
|
||||
|
||||
The application supports Progressive Web App (PWA) notifications to alert you of new messages when the app is hidden in the background.
|
||||
|
||||
#### Enabling Notifications
|
||||
|
||||
1. Click the menu icon (☰) in the navbar
|
||||
2. Click "Notifications" in the menu
|
||||
3. Browser will request permission - click "Allow"
|
||||
4. Status badge will change from "Disabled" to "Enabled" (green)
|
||||
|
||||
#### How It Works
|
||||
|
||||
**When you'll receive notifications:**
|
||||
- App must be running in the background (minimized, not closed)
|
||||
- New messages arrive in channels, Direct Messages, or pending contacts
|
||||
- Notification shows aggregated count: "New: 2 channels, 1 private message"
|
||||
|
||||
**What notifications include:**
|
||||
- Total count of new messages across all categories
|
||||
- Click notification to bring app back to focus
|
||||
- App badge counter on home screen icon (if PWA installed)
|
||||
|
||||
**Disabling notifications:**
|
||||
- Click "Notifications" button again to toggle off
|
||||
- Status badge will change to "Disabled" (gray)
|
||||
|
||||
#### Platform Support
|
||||
|
||||
**Desktop (Tested):**
|
||||
- ✅ **Windows** - Firefox (working correctly)
|
||||
- ✅ Chrome/Edge - Should work (not extensively tested)
|
||||
|
||||
**Mobile (Experimental):**
|
||||
- ⚠️ **Android** - Requires further testing when installed as PWA via Chrome
|
||||
- Install: Chrome menu → "Add to Home Screen"
|
||||
- Known limitation: Android may freeze background JavaScript after 5-10 minutes for battery saving
|
||||
- Notifications will stop working after app is frozen by the OS
|
||||
|
||||
**Browser Requirements:**
|
||||
- Chrome/Edge 81+ (desktop), 84+ (Android)
|
||||
- Firefox 22+
|
||||
- Safari 16.4+ (limited support)
|
||||
|
||||
#### Installing as PWA (Android/Desktop)
|
||||
|
||||
To get the full PWA experience with app badge counters:
|
||||
|
||||
**Android:**
|
||||
1. Open the app in Chrome
|
||||
2. Menu (⋮) → "Add to Home Screen"
|
||||
3. Confirm installation
|
||||
4. App icon will appear on home screen with badge counter support
|
||||
|
||||
**Desktop:**
|
||||
1. Open the app in Chrome/Edge
|
||||
2. Look for install prompt in address bar (+ icon)
|
||||
3. Click "Install"
|
||||
4. App opens in standalone window
|
||||
|
||||
#### Troubleshooting
|
||||
|
||||
**Notifications not appearing:**
|
||||
- Verify browser permission granted: Settings → Site Settings → Notifications
|
||||
- Ensure app is running in background (not closed)
|
||||
- Check that toggle shows "Enabled" (green badge)
|
||||
- Try refreshing the page
|
||||
|
||||
**Badge counter not showing:**
|
||||
- Badge API requires PWA to be installed (not just bookmarked)
|
||||
- Check browser compatibility (Chrome/Edge recommended)
|
||||
|
||||
**Android-specific issues:**
|
||||
- After 5-10 minutes in background, Android may freeze the app
|
||||
- This is normal OS behavior for battery saving
|
||||
- Reopen app to resume notifications
|
||||
- Full "wake device" support would require Web Push API (not implemented)
|
||||
|
||||
## Docker Commands
|
||||
|
||||
```bash
|
||||
|
||||
Reference in New Issue
Block a user