Web-Specifc Optimization with PWA Features #118 Level 3

[preetidas60]

What kind of change does this PR introduce?

Feature enhancement - Web-specific optimizations and Progressive Web App (PWA) implementation

Issue Number:

Fixes #118

Summary

This PR introduces comprehensive web-specific optimizations and PWA capabilities to the TextEditingApp, improving the web experience and enabling offline functionality.

Video

demo.webm

Key Changes:

• PWA Implementation: Added service worker and manifest configuration for Progressive Web App support, enabling installation and offline access
• Offline Storage: Implemented offline storage utility (lib/utils/offline_storage.dart) to persist user data locally
• Web Utilities: Added web-specific helper functions (lib/utils/web_utils.dart) for platform detection and optimization
• UI Optimizations: Updated canvas screen and font controls with web-optimized rendering and interactions
• Service Worker: Configured flutter_service_worker.js for asset caching and offline functionality
• Enhanced Manifest: Updated web/manifest.json with proper PWA metadata for better app-like experience
• Improved Index: Modified web/index.html for better web performance and PWA support

Benefits:

• Users can install the app directly from their browser
• Offline functionality allows continued usage without internet connection
• Faster load times through optimized caching strategies
• Improved mobile web experience
• Better performance on web platform

Does this PR introduce a breaking change?

No. This PR is backward compatible and only adds new web-specific features without modifying existing functionality for other platforms.

Other information

Technical Details:

• Service worker handles offline caching of static assets
• Offline storage uses browser storage APIs for data persistence
• Web utilities provide platform-specific optimizations
• All changes are isolated to web platform and don't affect mobile builds

Testing Recommendations:

• Test PWA installation on Chrome/Edge desktop and mobile
• Verify offline functionality by disabling network
• Check responsive design across different screen sizes
• Validate service worker registration and caching behavior
• Test font controls and canvas interactions on web platform

Have you read the contributing guide, README.md, code of conduct?

Yes

[github-actions]

Our Pull Request Approval Process

Thanks for contributing!

Reviewers

Do not assign reviewers. Our Queue Monitors will review your PR and assign them.
When your PR has been assigned reviewers contact them to get your code reviewed and approved via:

1. comments in this PR

Reviewing Your Code

Your reviewer(s) will have the following roles:

1. arbitrators of future discussions with other contributors about the validity of your changes
2. point of contact for evaluating the validity of your work
3. person who verifies matching issues by others that should be closed.
4. person who gives general guidance in fixing your tests

Other

🎯 Please be considerate of our volunteers' time. Contacting the person who assigned the reviewers is not advised unless they ask for your input. Do not @ the person who did the assignment otherwise.

[may-tas]

@preetidas60 Please remove the UI changes, not needed for this PR.
Main focus is on the keyboard shortcuts and the local storage implemented.

[preetidas60]

@may-tas I only made edits to the main screen UI because the bottom horizontal box (that displays the effects) wasn’t scrollable horizontally on web. I added logic to make it scrollable only on web, it won’t affect phones or other platforms. I’ve tested it thoroughly, and there are no function breaks or any issues caused by this change.

[may-tas]

@preetidas60 Please add a screen recording showing all the changes and features implemented

[preetidas60]

@may-tas I have added the video which shows the changes in the bottom UI as I have mentioned and also the shortcuts like ctrl z and ctrl s and few others.

[may-tas]

@preetidas60 This class hasn't been used anywhere, nor its methods, many methods in this file offline_storage.dart is not used, I don't think this file is necessary, please remove it.

[may-tas]

@preetidas60 promptInstall method isn't used anywhere, remove it.

[may-tas]

@preetidas60 Could you please explain how this is working? I don't see any references to this class in any other files. Additionally, I would like an explanation of the keyboard shortcuts, as this is the main functionality for this PR and needs to be operational.

[preetidas60]

@may-tas The KeyboardShortcuts widget is already wrapping the entire CanvasScreen (line 90), so all shortcuts like Ctrl+S, Ctrl+Z, Ctrl+D etc. are fully functional on web - each shortcut calls handler functions that trigger the corresponding CanvasCubit methods.

[may-tas]

@preetidas60 please resolve the comments.

[preetidas60]

@may-tas I have done all the changes.

[may-tas]

@preetidas60 LGTM, merging.