Fix service worker caching: correct file paths to resolve infinite spinner

[Copilot]

Service worker installation was failing due to incorrect static asset paths, causing the site to stay at the spinner splash screen forever.

Changes

Corrected static asset paths

• Removed incorrect static/ prefix from root-level files (samples, beepbox, manifest, favicon)
• Files like static/nintaribox_samples.js → nintaribox_samples.js now match actual build structure
• Kept correct paths for subdirectories (images/, player/)

Caching strategy

Maintained network-first strategy for JavaScript files to ensure site updates are reflected immediately when online:

if (url.pathname.endsWith('.js')) {
    return networkFirst(request);
}
if (isStaticAsset(request)) {
    return await cacheFirst(request, STATIC_CACHE);
}

JS files use network-first for immediate updates, while other static assets (images, fonts, etc.) use cache-first for performance.

Cache invalidation

• Bumped STATIC_CACHE v4→v5 and DYNAMIC_CACHE v2→v3 to force reinstall

Result

Service worker now installs successfully with correct file paths, resolving the infinite spinner issue and enabling proper offline PWA functionality while ensuring updates are reflected immediately when online.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>The dang service worker is still broken</issue_title>
<issue_description>The caching is broken so you always have to do a hard reload</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes The dang service worker is still broken #777

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[supervoidcoder]

@copilot the network first was never the problem, it was the site never even loaded and stayed at the spinner splash screen forever. We still want network first so any updates to the site are reflected to everyone immediately if online.

[Copilot]

@copilot the network first was never the problem, it was the site never even loaded and stayed at the spinner splash screen forever. We still want network first so any updates to the site are reflecte...

You're absolutely right - I misunderstood the issue. The real problem was the incorrect file paths causing the service worker installation to fail (infinite spinner), not the caching strategy.

I've restored the network-first strategy for JS files in commit e64021d. The fix now only corrects the file paths (removing incorrect static/ prefixes) while maintaining the network-first behavior for immediate updates.

What was fixed:

• ✅ Corrected static asset paths to match build structure
• ✅ Network-first for JS files (kept as intended)
• ✅ Cache-first only for non-JS static assets (images, fonts, etc.)

This should resolve the spinner issue while ensuring updates are reflected immediately when online.

[supervoidcoder]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Walkthrough

The service worker cache infrastructure is updated by incrementing version identifiers (STATIC_CACHE v4→v5, DYNAMIC_CACHE v2→v3) and restructuring asset references to use root-level paths instead of static/ subdirectories, along with minor comments clarifying network-first behavior for JavaScript.

Changes

Cohort / File(s)	Summary
Service Worker Cache & Asset Updates src/playground/service-worker.js	Bumped cache versions to force cache invalidation; migrated 20+ static asset paths from static/ subdirectory to root-level equivalents (e.g., static/nintaribox_samples.js → nintaribox_samples.js); updated embed/player asset references; modified offline fallback image paths; added clarifying comments on network-first JS handling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• Fix PWA reload failure: Service worker not caching /editor route #342: Modifies the same service worker file to update STATIC_ASSETS and cache version identifiers with overlapping asset path restructuring.
• Add full PWA offline support #338: Updates cache names and static asset entries in the service worker including STATIC_CACHE and DYNAMIC_CACHE version changes.
• cto-task-710 #711: Modifies service worker asset path references and caching logic for consistency with deployment structure.

Suggested labels

review-effort-2, needs-careful-testing, performance-impact, size/XS

Poem

🐰 Cache versions rise, from v4 to v5 we climb,
Root-level assets dance, no more static time,
Old cookies fade, the service worker's new,
Hard reloads banished—fresh starts for you!

🚥 Pre-merge checks | ✅ 4 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Merge Conflict Detection	⚠️ Warning	❌ Merge conflicts detected (3 files): ⚔️ .github/workflows/issue-assistant-agentic.lock.yml (content) ⚔️ .github/workflows/issue-assistant-agentic.md (content) ⚔️ src/playground/service-worker.js (content) These conflicts must be resolved before merging into main.	Resolve conflicts locally and push changes to this branch.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: fixing service worker caching by correcting file paths to resolve the infinite spinner issue.
Description check	✅ Passed	The description clearly explains the root cause (incorrect static asset paths), lists specific changes made, and describes the expected outcome of resolving the infinite spinner issue.
Linked Issues check	✅ Passed	The PR successfully addresses issue #777 by fixing service worker caching: correcting file paths enables proper asset installation, eliminating the infinite spinner and restoring offline functionality.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing service worker caching: path corrections, cache version bumps, and caching strategy adjustments align with the linked issue requirements.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch copilot/fix-service-worker-caching

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR fixes a critical service worker bug where incorrect static asset paths prevented the service worker from installing successfully, causing the application to hang at the splash screen spinner indefinitely. The root cause was that the service worker was attempting to cache files with a static/ prefix, but webpack copies files from the static/ source directory to the build root, so the actual deployed files don't have this prefix.

Changes:

• Corrected all static asset paths in service worker to match actual build output structure
• Bumped cache versions to force service worker reinstallation and cache invalidation
• Updated offline fallback HTML to use corrected image paths

[supervoidcoder]

Ok

[github-actions]

🤖 Auto-Component Test Results

🎉 No new UI components detected!

This PR doesn't add any new buttons, menus, or clickable components.

---

Triggered by Copilot • Commit e64021d

[github-actions]

🎉 MEGA PR Test & Analysis Complete!

Hi @Copilot! Your PR has been fully tested and analyzed! 🚀✨

---

🌍 Test Deployment

Live Preview: https://OmniBlocks.github.io/scratch-gui/Copilot/780/

---

🧪 Test Results

ESLint: ✅ All checks passed!

Unit Tests: ✅

• Total: 0 tests
• ✅ Passed: 1
• ❌ Failed: 0

Integration Tests: ❌

• Total: 4 tests
• ✅ Passed: 0
• ❌ Failed: 15
• ⏭️ Skipped: 1

💡 Pro Tip: Check the Files Changed tab for inline annotations showing exactly where errors occurred! 🎯

📄 Full test outputs available in artifacts

---

🔦 Performance Audit (Lighthouse)

✅ Audit completed successfully!

📊 Lighthouse Scores:

• 🔴 Performance: 31/100
• 🟠 Accessibility: 68/100
• 🟢 Best Practices: 96/100
• 🟠 SEO: 88/100

⚡ Core Web Vitals:

• First Contentful Paint: 43.5 s
• Largest Contentful Paint: 47.3 s
• Total Blocking Time: 1,190 ms
• Cumulative Layout Shift: 0
• Speed Index: 43.5 s

🟢 90-100 (Good) | 🟠 50-89 (Needs Improvement) | 🔴 0-49 (Poor)

📄 Full report in artifacts

---

📦 Bundle Size Analysis

Total Build Size: 172M

📦 Top 5 Largest JavaScript Files:

• 20M - samples3.js
• 20M - player/samples3.js
• 13M - player/drumsamples.js
• 13M - drumsamples.js
• 9.5M - samples2.js

🎨 Top 5 Largest CSS Files:

• No CSS files found (might be inlined in JS)

---

♿ Accessibility Testing

✅ Accessibility scan completed!

• Detailed report available in artifacts

---

📊 Build Details

• PR: Fix service worker caching: correct file paths to resolve infinite spinner #780
• Commit: e64021d
• Requested by: @Copilot
• Total time: 9m 35s

---

💡 Pro Tip: Only one build was needed for all these checks - saving CI/CD minutes! 🎯

[github-actions]

🎬 ULTRA Visual Regression Test Results

Hi @Copilot! Tested across 9 combinations (3 platforms × 3 browsers). 8/9 completed.

⚠️ Visual changes detected! Expand sections below for details.

📊 Test Matrix Summary

Platform	Browser	Changes	Details
Ubuntu	Chrome	⚠️ Changes	View
Ubuntu	WebKit	⚠️ Changes	View
Windows	Chrome	⚠️ Changes	View
Windows	Firefox	⚠️ Changes	View
Windows	WebKit	⚠️ Changes	View
Apple	Chrome	⚠️ Changes	View
Apple	Firefox	⚠️ Changes	View
Apple	WebKit	⚠️ Changes	View

---

Ubuntu + Chrome

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 3.58% (32955 pixels)

Player View

✅ No pixel difference detected.

Extension Library

✅ No pixel difference detected.

Advanced Settings

✅ No pixel difference detected.

Ubuntu + WebKit

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 1.79% (65823 pixels)

Player View

✅ No pixel difference detected.

Extension Library

Base	PR	Diff

Diff: 38.43% (1416519 pixels)

Advanced Settings

✅ No pixel difference detected.

Windows + Chrome

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 41.20% (379659 pixels)

Player View

✅ No pixel difference detected.

Extension Library

✅ No pixel difference detected.

Advanced Settings

✅ No pixel difference detected.

Windows + Firefox

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 0.01% (105 pixels)

Player View

Base	PR	Diff

Diff: 2.94% (48207 pixels)

Extension Library

✅ No pixel difference detected.

Advanced Settings

✅ No pixel difference detected.

Windows + WebKit

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 0.41% (15145 pixels)

Player View

✅ No pixel difference detected.

Extension Library

✅ No pixel difference detected.

Advanced Settings

✅ No pixel difference detected.

Apple + Chrome

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

✅ No pixel difference detected.

Player View

✅ No pixel difference detected.

Extension Library

Base	PR	Diff

Diff: 0.28% (2538 pixels)

Advanced Settings

✅ No pixel difference detected.

Apple + Firefox

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

Base	PR	Diff

Diff: 0.21% (1094 pixels)

Stage Sprites

✅ No pixel difference detected.

Code Tab

Base	PR	Diff

Diff: 0.12% (1094 pixels)

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 0.01% (132 pixels)

Player View

Base	PR	Diff

Diff: 2.86% (48190 pixels)

Extension Library

✅ No pixel difference detected.

Advanced Settings

✅ No pixel difference detected.

Apple + WebKit

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 0.89% (32930 pixels)

Player View

Base	PR	Diff

Diff: 2.94% (194492 pixels)

Extension Library

✅ No pixel difference detected.

Advanced Settings

✅ No pixel difference detected.

---

📦 Resources

• Workflow Run
• Download Artifacts
• Baselines (vrt-baselines branch)
• Images (vrt-images branch)

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/playground/service-worker.js (1)

448-452: ⚠️ Potential issue | 🟡 Minor

Push notification paths still use the old /static/ prefix.

The icon and badge paths here were not updated as part of this PR, but they suffer from the same incorrect static/ prefix that caused the caching failures fixed elsewhere. These should be corrected for consistency (and to work if push notifications are ever enabled).

Proposed fix

     const options = {
         body: 'Your project has been saved successfully!',
-        icon: '/static/images/192.png',
-        badge: '/static/favicon.ico',
+        icon: 'images/192.png',
+        badge: 'favicon.ico',
         tag: 'project-saved'
     };

🤖 Fix all issues with AI agents

In `@src/playground/service-worker.js`:
- Around line 261-264: The call to networkFirst(request) in the JS-handling
branch omits the cacheName, causing caches.open(cacheName) in networkFirst to
open a cache named "undefined" that isn't in the activation allow-list and gets
deleted; update the call to pass the intended cache constant (e.g., STATIC_CACHE
or DYNAMIC_CACHE) so JS responses are stored in a managed cache, i.e. change the
branch that currently returns networkFirst(request) to return
networkFirst(request, STATIC_CACHE) (or DYNAMIC_CACHE if you want them in the
runtime cache) so the cache name matches the activation allow-list used
elsewhere.

[github-actions]

🤖 Auto-Component Test Results

🎉 No new UI components detected!

This PR doesn't add any new buttons, menus, or clickable components.

---

Triggered by @supervoidcoder • Commit c8d8c17

[github-actions]

🎉 MEGA PR Test & Analysis Complete!

Hi @Copilot! Your PR has been fully tested and analyzed! 🚀✨

---

🌍 Test Deployment

Live Preview: https://OmniBlocks.github.io/scratch-gui/supervoidcoder/780/

---

🧪 Test Results

ESLint: ✅ All checks passed!

Unit Tests: ✅

• Total: 0 tests
• ✅ Passed: 1
• ❌ Failed: 0

Integration Tests: ❌

• Total: 4 tests
• ✅ Passed: 0
• ❌ Failed: 15
• ⏭️ Skipped: 1

💡 Pro Tip: Check the Files Changed tab for inline annotations showing exactly where errors occurred! 🎯

📄 Full test outputs available in artifacts

---

🔦 Performance Audit (Lighthouse)

✅ Audit completed successfully!

📊 Lighthouse Scores:

• 🔴 Performance: 33/100
• 🟠 Accessibility: 68/100
• 🟢 Best Practices: 96/100
• 🟠 SEO: 88/100

⚡ Core Web Vitals:

• First Contentful Paint: 43.9 s
• Largest Contentful Paint: 47.9 s
• Total Blocking Time: 980 ms
• Cumulative Layout Shift: 0
• Speed Index: 43.9 s

🟢 90-100 (Good) | 🟠 50-89 (Needs Improvement) | 🔴 0-49 (Poor)

📄 Full report in artifacts

---

📦 Bundle Size Analysis

Total Build Size: 172M

📦 Top 5 Largest JavaScript Files:

• 20M - samples3.js
• 20M - player/samples3.js
• 13M - player/drumsamples.js
• 13M - drumsamples.js
• 9.5M - samples2.js

🎨 Top 5 Largest CSS Files:

• No CSS files found (might be inlined in JS)

---

♿ Accessibility Testing

✅ Accessibility scan completed!

• Detailed report available in artifacts

---

📊 Build Details

• PR: Fix service worker caching: correct file paths to resolve infinite spinner #780
• Commit: c8d8c17
• Requested by: @Copilot
• Total time: 10m 14s

---

💡 Pro Tip: Only one build was needed for all these checks - saving CI/CD minutes! 🎯

[github-actions]

🎬 ULTRA Visual Regression Test Results

Hi @Copilot! Tested across 9 combinations (3 platforms × 3 browsers). 8/9 completed.

⚠️ Visual changes detected! Expand sections below for details.

📊 Test Matrix Summary

Platform	Browser	Changes	Details
Ubuntu	Chrome	⚠️ Changes	View
Ubuntu	WebKit	⚠️ Changes	View
Windows	Chrome	⚠️ Changes	View
Windows	Firefox	⚠️ Changes	View
Windows	WebKit	⚠️ Changes	View
Apple	Chrome	⚠️ Changes	View
Apple	Firefox	⚠️ Changes	View
Apple	WebKit	⚠️ Changes	View

---

Ubuntu + Chrome

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 3.91% (35999 pixels)

Player View

✅ No pixel difference detected.

Extension Library

✅ No pixel difference detected.

Advanced Settings

✅ No pixel difference detected.

Ubuntu + WebKit

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 0.46% (17084 pixels)

Player View

✅ No pixel difference detected.

Extension Library

Base	PR	Diff

Diff: 38.43% (1416519 pixels)

Advanced Settings

✅ No pixel difference detected.

Windows + Chrome

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 41.48% (382304 pixels)

Player View

✅ No pixel difference detected.

Extension Library

✅ No pixel difference detected.

Advanced Settings

✅ No pixel difference detected.

Windows + Firefox

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 22.56% (207876 pixels)

Player View

Base	PR	Diff

Diff: 0.00% (15 pixels)

Extension Library

✅ No pixel difference detected.

Advanced Settings

✅ No pixel difference detected.

Windows + WebKit

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 0.11% (3997 pixels)

Player View

✅ No pixel difference detected.

Extension Library

✅ No pixel difference detected.

Advanced Settings

✅ No pixel difference detected.

Apple + Chrome

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

✅ No pixel difference detected.

Player View

✅ No pixel difference detected.

Extension Library

Base	PR	Diff

Diff: 0.28% (2538 pixels)

Advanced Settings

✅ No pixel difference detected.

Apple + Firefox

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 0.22% (2028 pixels)

Player View

Base	PR	Diff

Diff: 2.86% (48190 pixels)

Extension Library

✅ No pixel difference detected.

Advanced Settings

✅ No pixel difference detected.

Apple + WebKit

Editor Initial

✅ No pixel difference detected.

Blocks Workspace

✅ No pixel difference detected.

Stage Sprites

✅ No pixel difference detected.

Code Tab

✅ No pixel difference detected.

Costumes Tab

✅ No pixel difference detected.

Sounds Tab

✅ No pixel difference detected.

Songs Tab

Base	PR	Diff

Diff: 0.29% (10554 pixels)

Player View

✅ No pixel difference detected.

Extension Library

✅ No pixel difference detected.

Advanced Settings

✅ No pixel difference detected.

---

📦 Resources

• Workflow Run
• Download Artifacts
• Baselines (vrt-baselines branch)
• Images (vrt-images branch)