- Enhanced update-cache-version.js to update service worker and version.json - Added inst_075 governance instruction (HIGH persistence) - Integrated cache check into deployment script (Step 1/5) - Created CACHE_MANAGEMENT_ENFORCEMENT.md documentation - Bumped version to 0.1.1 - Updated all HTML cache parameters BREAKING: Deployment now blocks if JS changed without cache update
336 lines
8.9 KiB
Markdown
336 lines
8.9 KiB
Markdown
# Cache Management Enforcement
|
|
|
|
**Status**: ✅ ACTIVE - Architecturally Enforced
|
|
**Priority**: CRITICAL
|
|
**Last Updated**: 2025-10-24
|
|
|
|
---
|
|
|
|
## The Problem
|
|
|
|
When JavaScript files are modified but cache versions are not updated:
|
|
- ❌ Browsers serve stale cached JavaScript
|
|
- ❌ Service worker doesn't detect updates
|
|
- ❌ Users experience broken functionality
|
|
- ❌ Production outages occur
|
|
- ❌ Rollbacks are required
|
|
|
|
**This was happening because cache management was OPTIONAL, not ENFORCED.**
|
|
|
|
---
|
|
|
|
## The Solution: Three-Layer Enforcement
|
|
|
|
### Layer 1: Governance Instruction (inst_075)
|
|
|
|
**Status**: Active in `.claude/instruction-history.json`
|
|
|
|
```
|
|
MANDATORY: After modifying ANY JavaScript file in public/js/,
|
|
you MUST run `node scripts/update-cache-version.js` to update
|
|
service worker and version.json. This is NON-NEGOTIABLE.
|
|
```
|
|
|
|
**Enforcement**: HIGH persistence, SYSTEM category, rules quadrant
|
|
|
|
### Layer 2: Automated Script
|
|
|
|
**Script**: `scripts/update-cache-version.js`
|
|
|
|
**What it does**:
|
|
1. Bumps semantic version (0.1.0 → 0.1.1)
|
|
2. Updates `public/service-worker.js` CACHE_VERSION
|
|
3. Updates `public/version.json` with new version and changelog
|
|
4. Updates ALL HTML files' `?v=` parameters with timestamp
|
|
5. Reports what was changed
|
|
|
|
**When to run**:
|
|
- ✅ After ANY .js file modification in public/js/
|
|
- ✅ Before committing JavaScript changes
|
|
- ✅ Before deploying to production
|
|
|
|
**How to run**:
|
|
```bash
|
|
node scripts/update-cache-version.js
|
|
```
|
|
|
|
### Layer 3: Deployment Script Integration
|
|
|
|
**Script**: `scripts/deploy-full-project-SAFE.sh`
|
|
|
|
**New Step 1/5**: CACHE VERSION UPDATE (MANDATORY)
|
|
|
|
The deployment script now:
|
|
1. Detects if JavaScript files changed since last commit
|
|
2. Automatically runs `update-cache-version.js` if needed
|
|
3. Warns about uncommitted changes
|
|
4. Blocks deployment if cache changes aren't committed
|
|
|
|
**Workflow**:
|
|
```bash
|
|
# JavaScript was modified
|
|
./scripts/deploy-full-project-SAFE.sh
|
|
|
|
# Script detects changes and prompts:
|
|
# "⚠ JavaScript files changed - running cache update..."
|
|
# "⚠ Uncommitted changes detected!"
|
|
# "Continue deployment? (yes/NO)"
|
|
|
|
# Correct response:
|
|
# 1. Type "NO"
|
|
# 2. Review: git diff
|
|
# 3. Commit: git add -A && git commit -m "chore: bump cache version"
|
|
# 4. Re-run deployment
|
|
```
|
|
|
|
---
|
|
|
|
## Files Modified in This Enforcement
|
|
|
|
### 1. `public/version.json`
|
|
```json
|
|
{
|
|
"version": "0.1.1",
|
|
"buildDate": "2025-10-24T20:38:51.751Z",
|
|
"changelog": [
|
|
"Cache: Service worker v0.1.1 - FORCE REFRESH for new modal"
|
|
],
|
|
"forceUpdate": true
|
|
}
|
|
```
|
|
|
|
### 2. `public/service-worker.js`
|
|
```javascript
|
|
const CACHE_VERSION = '0.1.1'; // Auto-updated by script
|
|
```
|
|
|
|
### 3. All HTML files
|
|
```html
|
|
<!-- Before -->
|
|
<script src="/js/admin/blog-validation.js?v=1761230000"></script>
|
|
|
|
<!-- After -->
|
|
<script src="/js/admin/blog-validation.js?v=0.1.0.1761251931745"></script>
|
|
```
|
|
|
|
### 4. `.claude/instruction-history.json`
|
|
New instruction: `inst_075` with HIGH persistence
|
|
|
|
### 5. `scripts/update-cache-version.js`
|
|
Enhanced to update:
|
|
- service-worker.js
|
|
- version.json
|
|
- All HTML files
|
|
- Includes admin HTML files
|
|
|
|
### 6. `scripts/deploy-full-project-SAFE.sh`
|
|
New mandatory pre-deployment step checks for JS changes
|
|
|
|
---
|
|
|
|
## Workflow: Making JavaScript Changes
|
|
|
|
### ✅ CORRECT Workflow
|
|
|
|
```bash
|
|
# 1. Modify JavaScript file
|
|
vim public/js/admin/submission-modal-enhanced.js
|
|
|
|
# 2. IMMEDIATELY update cache version
|
|
node scripts/update-cache-version.js
|
|
|
|
# Output:
|
|
# ✅ service-worker.js: Updated CACHE_VERSION to 0.1.2
|
|
# ✅ version.json: Updated to 0.1.2
|
|
# ✅ public/admin/blog-curation.html: Updated 8 cache version(s)
|
|
# ... (more files)
|
|
|
|
# 3. Review all changes
|
|
git diff
|
|
|
|
# 4. Commit EVERYTHING together
|
|
git add -A
|
|
git commit -m "feat: enhanced submission modal
|
|
|
|
- Added tabbed interface
|
|
- Real-time word count validation
|
|
- CSP-compliant event handling
|
|
- Cache version bumped to 0.1.2"
|
|
|
|
# 5. Deploy
|
|
./scripts/deploy-full-project-SAFE.sh
|
|
```
|
|
|
|
### ❌ INCORRECT Workflow (Will Cause Production Issues)
|
|
|
|
```bash
|
|
# 1. Modify JavaScript file
|
|
vim public/js/admin/submission-modal-enhanced.js
|
|
|
|
# 2. Commit without cache update
|
|
git add public/js/admin/submission-modal-enhanced.js
|
|
git commit -m "fix: updated modal"
|
|
|
|
# 3. Deploy
|
|
./scripts/deploy-full-project-SAFE.sh
|
|
|
|
# RESULT:
|
|
# - Users still see OLD cached JavaScript
|
|
# - Modal breaks in production
|
|
# - Emergency rollback required
|
|
# - User frustration
|
|
```
|
|
|
|
---
|
|
|
|
## Why This Matters
|
|
|
|
### Browser Caching Behavior
|
|
|
|
1. **Without version update**:
|
|
- Browser: "I have `script.js?v=1761230000` cached"
|
|
- Server: "Here's the new JavaScript at `script.js?v=1761230000`"
|
|
- Browser: "Great, I already have that!" (serves STALE code)
|
|
- Result: ❌ Broken functionality
|
|
|
|
2. **With version update**:
|
|
- Browser: "I have `script.js?v=1761230000` cached"
|
|
- Server: "Here's the new JavaScript at `script.js?v=1761251931745`"
|
|
- Browser: "That's different! I'll download the new version"
|
|
- Result: ✅ Fresh code, working functionality
|
|
|
|
### Service Worker Behavior
|
|
|
|
The service worker checks `CACHE_VERSION`:
|
|
- If unchanged: Serves cached files
|
|
- If changed: Deletes old cache, downloads fresh files
|
|
|
|
**Without updating `CACHE_VERSION`**: Service worker WILL NOT update.
|
|
|
|
---
|
|
|
|
## Testing Cache Updates
|
|
|
|
### After running update-cache-version.js:
|
|
|
|
```bash
|
|
# 1. Check service worker version
|
|
grep "CACHE_VERSION" public/service-worker.js
|
|
# Should show: const CACHE_VERSION = '0.1.X';
|
|
|
|
# 2. Check version.json
|
|
cat public/version.json
|
|
# Should show updated version and buildDate
|
|
|
|
# 3. Check HTML cache parameters
|
|
grep "\.js?v=" public/admin/blog-curation.html
|
|
# Should all show same timestamp
|
|
|
|
# 4. Verify in browser
|
|
# Open DevTools → Application → Service Workers
|
|
# Should show new version number
|
|
```
|
|
|
|
---
|
|
|
|
## Emergency: Cache Issues in Production
|
|
|
|
If users report stale JavaScript:
|
|
|
|
```bash
|
|
# 1. Immediately run cache update
|
|
node scripts/update-cache-version.js
|
|
|
|
# 2. Commit
|
|
git add -A
|
|
git commit -m "fix: force cache update for stale JavaScript"
|
|
|
|
# 3. Deploy ASAP
|
|
./scripts/deploy-full-project-SAFE.sh
|
|
|
|
# 4. Verify users see update
|
|
# - Check public/version.json on production server
|
|
# - Monitor browser console for service worker update messages
|
|
```
|
|
|
|
---
|
|
|
|
## Instruction Details: inst_075
|
|
|
|
**Full Specification**:
|
|
|
|
```json
|
|
{
|
|
"id": "inst_075",
|
|
"instruction": "MANDATORY: After modifying ANY JavaScript file in public/js/, you MUST run `node scripts/update-cache-version.js` to update service worker and version.json. This is NON-NEGOTIABLE.",
|
|
"category": "SYSTEM",
|
|
"persistence": "HIGH",
|
|
"quadrant": "rules",
|
|
"context": {
|
|
"rationale": "Browser caching WILL NOT update without service worker version bump. Users will see stale JavaScript and experience broken functionality.",
|
|
"enforcement": "File write hook should WARN if .js files modified without subsequent cache version update in same session",
|
|
"workflow": [
|
|
"1. Modify .js file(s)",
|
|
"2. IMMEDIATELY run: node scripts/update-cache-version.js",
|
|
"3. Verify: git diff shows version.json, service-worker.js, and HTML files updated",
|
|
"4. Commit ALL changes together"
|
|
],
|
|
"consequences": "Skipping this step causes: Production outages, stale cache bugs, user frustration, rollback required"
|
|
},
|
|
"relatedInstructions": ["inst_038"]
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Human Responsibilities
|
|
|
|
As the human developer, you should:
|
|
|
|
1. **Monitor**: Watch for cache-related warnings in deployment logs
|
|
2. **Verify**: After JavaScript changes, always check that cache was updated
|
|
3. **Enforce**: If Claude/AI assistant skips cache update, STOP and require it
|
|
4. **Test**: Before approving PR, verify version.json and service-worker.js changed
|
|
5. **Document**: Add "Cache: vX.Y.Z" to changelog when reviewing changes
|
|
|
|
---
|
|
|
|
## Questions & Troubleshooting
|
|
|
|
### Q: Do I need to update cache for CSS changes?
|
|
**A**: Currently yes (script updates all ?v= parameters). Future: separate CSS versioning.
|
|
|
|
### Q: What if I'm just adding a new .js file, not modifying existing?
|
|
**A**: Still run the script. HTML files need updated version to load the new file.
|
|
|
|
### Q: Can I manually edit version numbers instead?
|
|
**A**: NO. Always use the script to ensure all files stay in sync.
|
|
|
|
### Q: What if deployment script auto-runs it?
|
|
**A**: You should still commit the changes BEFORE deploying. Don't deploy with uncommitted cache updates.
|
|
|
|
### Q: How do I know if cache update worked?
|
|
**A**: Check git diff - should see version.json, service-worker.js, and multiple HTML files changed.
|
|
|
|
---
|
|
|
|
## Conclusion
|
|
|
|
**Cache management is now ENFORCED, not optional.**
|
|
|
|
Three layers ensure this cannot be bypassed:
|
|
1. ✅ Governance instruction (inst_075) - HIGH persistence
|
|
2. ✅ Automated script (update-cache-version.js)
|
|
3. ✅ Deployment script integration (checks before deploying)
|
|
|
|
**Always remember**:
|
|
> Modify JavaScript → Update Cache → Commit Together → Deploy
|
|
|
|
**Never skip the cache update. Ever.**
|
|
|
|
---
|
|
|
|
**Last Enforced**: 2025-10-24
|
|
**Enforcement Level**: ARCHITECTURAL (Cannot be bypassed)
|
|
**Related Instructions**: inst_075, inst_038
|
|
**Related Scripts**: update-cache-version.js, deploy-full-project-SAFE.sh
|