Implement PWA and Optimize Performance/Accessibility #144
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
- **PWA Integration:**
- Added `vite-plugin-pwa` for service worker generation and manifest management.
- Implemented `PWAUpdater` component for handling app updates.
- Configured `vite.config.js` with PWA settings.
- Removed manual `manifest.json` reference from `index.html`.
- **Performance Optimization (LCP):**
- Created a resized version of the hero image (`divemap_logo_domain_top4_extend_small.jpg`) for mobile devices.
- Updated `HeroSection.js` to use `srcset` for responsive image loading.
- Added `fetchPriority="high"` to the hero image to prioritize its loading.
- **Accessibility Improvements:**
- **Color Contrast:** Adjusted colors in `Home.js` (buttons and text) to meet WCAG contrast ratio requirements.
- **ARIA Labels:** Added accessible names to:
- Global Search button (`GlobalSearchBar.js`).
- Mobile menu toggle button (`Navbar.js`).
- Report Issue button (`ReportIssueButton.js`).
- **Heading Hierarchy:** Promoted section headings in `Home.js` from `h3` to `h2` for correct document structure.
- **Other Changes:**
- Updated `package.json` with new dependencies.
- Added `BackgroundLogo.js` component (refactor).
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.
PWA Integration:
vite-plugin-pwafor service worker generation and manifest management.PWAUpdatercomponent for handling app updates.vite.config.jswith PWA settings.manifest.jsonreference fromindex.html.Performance Optimization (LCP):
divemap_logo_domain_top4_extend_small.jpg) for mobile devices.HeroSection.jsto usesrcsetfor responsive image loading.fetchPriority="high"to the hero image to prioritize its loading.Accessibility Improvements:
Home.js(buttons and text) to meet WCAG contrast ratio requirements.GlobalSearchBar.js).Navbar.js).ReportIssueButton.js).Home.jsfromh3toh2for correct document structure.Other Changes:
package.jsonwith new dependencies.BackgroundLogo.jscomponent (refactor).