Add PWA capabilities - #1
Merged
Merged
Conversation
- Introduce Parcel 2 build (src/ → dist/) to eliminate the jsDelivr CDN dependency - Bundle marked via npm and inline README.md at build time using bundle-text:, so the Help modal works with no network - Add service worker (cache-as-you-go, cache-first) so the app works fully offline after the first visit - Add manifest.json for PWA installability - Update README: fix button label (ⓘ Help), update usage for build process, add in-app skip note, add Offline/PWA section https://claude.ai/code/session_01LSzcnsQrPwGMT1My23tr86
Previously hardcoded "#808080 → magenta". Now both values update live whenever either color picker changes. https://claude.ai/code/session_01LSzcnsQrPwGMT1My23tr86
Building and Running is now a collapsed <details> block covering dev and production separately. Usage starts directly from "Click Share Screen". The in-app note now points to the right section. https://claude.ai/code/session_01LSzcnsQrPwGMT1My23tr86
bundle-text inlines the README as-is; the relative path preview.png resolves against the page URL where dist/ has no such file. Use the absolute GitHub raw URL so it works on GitHub and in-app. https://claude.ai/code/session_01LSzcnsQrPwGMT1My23tr86
Import preview.png via Parcel's url: specifier so it lands in dist/ with a content hash. Substitute its local URL into the README text before rendering so the modal shows the local copy. The service worker caches it on first modal open and serves it offline thereafter. https://claude.ai/code/session_01LSzcnsQrPwGMT1My23tr86
Deploying roadfinder-went with
|
| Latest commit: |
147a1d3
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7b688525.roadfinder-went.pages.dev |
| Branch Preview URL: | https://claude-add-pwa-offline-cachi.roadfinder-went.pages.dev |
WentTheFox
changed the title
Limit push trigger to main so feature branches are only built via the pull_request event, not both. https://claude.ai/code/session_01LSzcnsQrPwGMT1My23tr86
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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
This PR introduces a complete web application for identifying undiscovered roads in Forza Horizon 6 by capturing the game screen and highlighting grey roads (
#808080) in magenta in real time.Key Changes
src/index.html): Full-featured control panel with screen capture, color picker, FPS/tolerance sliders, and an embedded help modalsrc/main.js): Screen capture via MediaDevices API with real-time pixel manipulation using both fast 32-bit exact-match and tolerance-based color replacement paths, plus optional greyscale conversionsrc/sw.js): Offline-first PWA support with cache-first strategy for all GET requestssrc/manifest.json): PWA metadata for standalone installationpackage.json): Parcel-based build setup with markdown and asset bundlingREADME.md): Updated with build instructions, privacy notes, and PWA support detailsNotable Implementation Details
Uint32Arrayview for fast exact-match color replacement when tolerance is 0 and greyscale is disabled, avoiding per-channel comparisonsmarkedlibraryhttps://claude.ai/code/session_01LSzcnsQrPwGMT1My23tr86