Conversation
Add support for Progressive Web App (PWA) installation. * **manifest.json**: Add `manifest.json` file with PWA settings including name, short_name, start_url, display, background_color, theme_color, and icons. * **base.html**: Add references to `manifest.json` and `service-worker.js` in the `<head>` section. Add script to register service worker. * **service-worker.js**: Add `service-worker.js` file to support PWA installation with basic caching strategies for offline support. * **README.md**: Add instructions for installing the PWA on a phone. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/Cosmo-Tech/wall?shareId=XXXX-XXXX-XXXX-XXXX).
sellisd
force-pushed
the
sellisd/add-manifest-json
branch
from
3830eb9 to
25e475c
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR adds Progressive Web App (PWA) functionality to the GitHub Workflow Status Wall, enabling users to install the application on their mobile devices and access it offline. The version is bumped from 0.1.0 to 0.2.0 to reflect this new feature.
- Adds PWA manifest and service worker for offline support
- Integrates PWA registration in the HTML template
- Includes app icons and installation instructions
Reviewed Changes
Copilot reviewed 5 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| wall/badge_generator/templates/service-worker.js | New service worker for caching assets and enabling offline functionality |
| wall/badge_generator/templates/base.html | Adds manifest link and service worker registration script |
| manifest.json | Defines PWA configuration including name, icons, and display mode |
| assets/icon-192x192.png | 192x192 app icon for PWA |
| assets/icon-512x512.png | 512x512 app icon for PWA |
| pyproject.toml | Version bump to 0.2.0 |
| README.md | Adds installation instructions for PWA on mobile devices |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| '/icon-192x192.png', | ||
| '/icon-512x512.png' |
There was a problem hiding this comment.
The service worker references icons at root paths '/icon-192x192.png' and '/icon-512x512.png', but the manifest.json file references them as 'assets/icon-192x192.png' and 'assets/icon-512x512.png'. This path mismatch will cause the service worker to fail caching these assets. Update the paths to match the manifest.json.
| '/icon-192x192.png', | |
| '/icon-512x512.png' | |
| 'assets/icon-192x192.png', | |
| 'assets/icon-512x512.png' |
| const urlsToCache = [ | ||
| '/', | ||
| '/index.html', | ||
| '/styles.css', |
There was a problem hiding this comment.
The service worker attempts to cache '/styles.css', but the styles are embedded inline in the HTML template (see base.html line 24 with {styles} placeholder). This file path doesn't exist and will cause cache errors. Remove this entry from urlsToCache or ensure styles.css is served as a separate static file.
| '/styles.css', |
| "start_url": "/", | ||
| "display": "standalone", | ||
| "background_color": "#f6f8fa", | ||
| "theme_color": "#24292e", |
There was a problem hiding this comment.
The theme_color in manifest.json is '#24292e' (dark gray), but the meta theme-color in base.html is '#f6f8fa' (light gray). These should match for consistent theming across different contexts. Consider using the same value in both files.
| "theme_color": "#24292e", | |
| "theme_color": "#f6f8fa", |
1 participant
Add support for Progressive Web App (PWA) installation.
manifest.jsonfile with PWA settings including name, short_name, start_url, display, background_color, theme_color, and icons.manifest.jsonandservice-worker.jsin the<head>section. Add script to register service worker.service-worker.jsfile to support PWA installation with basic caching strategies for offline support.For more details, open the Copilot Workspace session.