feat: implement Progressive Web App (PWA) functionality #1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Created a comprehensive web app manifest with: - App metadata (name, description, theme colors) - Icon configurations for all required sizes (72-512px) - App shortcuts for quick access to key features - Proper display and orientation settings Generated PWA icons from SVG source: - Multiple sizes for different devices and contexts - Apple touch icon for iOS devices - Favicons for browser tabs - Created icon generation script using sharp library
Implemented comprehensive service worker with: - Cache-first strategy for static assets - Network-first strategy for navigation requests - Automatic cache management and cleanup - Offline fallback for API requests - Background sync support (placeholder for future) - Push notification handlers (placeholder for future) Features: - Versioned caching to ensure updates work properly - Smart caching that skips API and cross-origin requests - Graceful offline error handling - Automatic service worker updates
Created PWAInstallPrompt component: - Smart install prompt that respects user preferences - Dismissal persistence (does not re-prompt for 30 days) - Detects if app is already installed - Shows after 5 second delay for better UX - Responsive design with animated slide-up effect Created PWAManager component: - Automatic service worker registration - Update detection and notification - Periodic update checks (hourly) - User-friendly update prompts - Integrated with toast notifications Both components provide a seamless PWA experience with minimal user friction.
Updated app.html with PWA meta tags: - Viewport configuration with viewport-fit for notched displays - Theme color for browser chrome customization - Apple-specific meta tags for iOS PWA support - Mobile web app capability declarations - Manifest and icon link tags Integrated PWAManager into root layout: - Added PWAManager component to handle service worker lifecycle - Provides global install prompt and update notifications - Works seamlessly with existing toast and cookie consent components
Updated SvelteKit configuration: - Disabled automatic service worker registration - Manual registration provides better control over PWA lifecycle Updated package.json: - Added sharp dependency for icon generation - Added generate:icons npm script for easy icon regeneration The icon generation script allows developers to regenerate all PWA icons from the source SVG file with a single command.
Moved service worker from static folder to src directory: - Created src/service-worker.ts with proper TypeScript types - Uses SvelteKit service worker API (build, files, version) - Properly typed with ServiceWorkerGlobalScope Updated PWAManager to register service worker as module: - Added type: module to registration options - Added comments explaining dev vs production behavior Updated SvelteKit config: - Added files filter to exclude .DS_Store files - Service worker now properly built by SvelteKit This fixes the module import error that occurred when the service worker was in the static folder.
Service worker conflicts with Vite HMR in development mode causing module fetch errors. Updated PWAManager to only register service worker in production builds. Development mode now works without service worker interference while production builds have full PWA functionality.
Created detailed PWA documentation covering: - Feature overview and implementation details - File structure and technical architecture - Usage instructions and icon generation - Testing guidelines for all PWA features - Browser support matrix - Caching strategies - Best practices and troubleshooting - Future enhancement roadmap Updated main README and docs index to reference PWA documentation and highlight PWA as a core feature of the application.
Removed static/service-worker.js as service worker is now properly implemented in src/service-worker.ts and built by SvelteKit.
Created comprehensive PR.md file with complete summary: - Feature implementation details - Technical architecture - Files changed and commit history - Testing checklist - Documentation references - Reviewer information This document serves as a reference for the PWA implementation PR.
Created ReactionsController to handle reaction operations:
- POST /api/v1/reactions/upsert - Create, update, or toggle reactions
- GET /api/v1/reactions - Get reactions with optional filtering
- DELETE /api/v1/reactions/{id} - Delete a specific reaction
Features:
- Upsert logic: toggle same reaction, update to different type
- Reaction management for comments
- Clean separation of concerns
Fixes 404 error on /api/v1/reactions/upsert endpoint.
Add validation to check if comment exists before creating/updating reactions to prevent foreign key constraint errors. Returns 404 with descriptive message if comment is not found.
…le types - Add Comment value to CommentableType enum to align with frontend - Update UpsertReactionRequest to use commentableId and commentableType instead of commentId - Add validation to ensure reactions are only added to comments (not videos/posts directly) - Return descriptive error messages for invalid commentable types This aligns the API with the frontend's polymorphic design while maintaining the constraint that reactions can only be added to comments.
- Remove Reactions component from video detail, video list, post detail, and post list pages - Reactions now only appear on individual comments as intended - Remove unused Reactions imports and CommentableType imports - Aligns frontend with API constraint that reactions can only be added to comments
- Remove max-width constraint to allow full-width navigation - Reduce spacing between nav items from space-x-4 to space-x-2 - Reduce horizontal padding on nav links from px-3 to px-2 - Add whitespace-nowrap to prevent text wrapping in nav items - Add flex-shrink-0 to user menu to prevent logout button from being cut off - Add items-center to main flex container for better vertical alignment Fixes cramped navigation and ensures logout button remains visible.
… hardcoded value - Add System.Security.Claims using statement - Get user ID from JWT claims using ClaimTypes.NameIdentifier - Return Unauthorized if user is not authenticated - Fixes foreign key constraint error caused by non-existent hardcoded user ID Reactions now work correctly for all authenticated users (user, admin, moderator roles).
…ling - Add 2-second delay before hiding the reactions picker popup - Cancel hide timeout when mouse enters button or popup - Keep popup open while cursor hovers over it - Prevents popup from disappearing too quickly while user is selecting a reaction Improves user experience by giving users enough time to click reactions without the popup closing prematurely.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Implemented comprehensive Progressive Web App (PWA) functionality for the Commentable application, enabling installation on devices, offline support, and native app-like experience.
Features Implemented
Technical Details
Caching Strategy
Components Created
PWAManager.svelte: Service worker registration and lifecycle managementPWAInstallPrompt.svelte: Smart install prompt with dismissal persistenceservice-worker.ts: Comprehensive service worker with caching logicFiles Changed
static/manifest.json- App metadata and configurationsrc/service-worker.ts- Offline functionalityapp.htmlwith PWA meta tagsBrowser Support
Testing
Tested on:
Test Plan
Documentation
docs/PWA.mdwith complete implementation guideFuture Enhancements
Placeholders ready for:
Notes
npm run generate:iconsReviewers
Please review: