NEVER Do (Expert Web Rules)

Persistence & Storage

NEVER use FileAccess alone for persistent web saves — Prefer web_local_storage_wrapper.gd (localStorage / IndexedDB via JavaScriptBridge).
NEVER assume localStorage is permanent — Implement cloud-save fallback for production.

Rendering & Logic

NEVER use the Forward+ renderer for web — Use Compatibility (WebGL 2.0).
NEVER block the browser event loop — Long sync work → "Kill the Page." Use await / threaded workers where available.
NEVER ignore COOP/COEP — Threads/SharedArrayBuffer need cross-origin isolation.

UX & Security

NEVER forget tab focus loss — Pause audio on visibilitychange.
NEVER trigger Fullscreen/Mouse Lock without a click — Must be inside a user gesture.
NEVER use absolute paths in HTML shells — Relative paths for subdirectory hosting.

Host checklist (procedure)

HTTPS — Required for many browser APIs (clipboard, some storage policies, secure contexts).
COOP / COEP — Serve isolation headers when enabling threads / SharedArrayBuffer (see exporting-for-web docs).
Relative shell paths — Custom index.html / PCK/WASM URLs must be relative so /game/ subpaths work.
beforeunload — Wire web_navigation_guard.gd when unsaved progress exists.
Compatibility renderer + texture compression — Desktop browsers: S3TC/BPTC as appropriate; keep particle/draw budgets low.

Available Scripts

MANDATORY: For saves, load web_local_storage_wrapper.gd — do not paste JavaScriptBridge.eval("localStorage.setItem...") string recipes.

web_local_storage_wrapper.gd

Quota-safe localStorage via get_interface + JSON (no eval string interpolation).

web_javascript_bridge_callback.gd

Two-way JS↔GD with create_callback (keep callback refs alive).

web_responsive_canvas_adaptor.gd

Canvas resize to browser viewport.

web_browser_input_guard.gd

Suppress context menu / spacebar scroll defaults.

web_resource_lazy_loader.gd

Remote PCK/resource fetch patterns.

web_clipboard_interface.gd

Async clipboard via Navigator API.

web_visibility_auto_pause.gd

Pause engine/audio on tab hide.

web_navigation_guard.gd

beforeunload unsaved-progress guard.

web_external_url_opener.gd

window.open with noopener.

web_performance_profiler.gd

VRAM/draw stats to JS console.

Also in `scripts/`

platform_web_patterns.gd — Misc web feature gates.
web_bridge_sync.gd — Structured bridge sync helper.
web_json_rpc_bridge.gd — JSON-RPC create_callback bridge (keep refs alive).

Expert WHY (critical)

CAUTION: Never persist via JavaScriptBridge.eval("localStorage.setItem('%s')" % data) — injection/escaping bugs. Use web_local_storage_wrapper.gd.

PWA updates — pwa_update_available → pwa_update() when pwa_needs_update().
WebGPU — not a Godot 4.x web renderer; ship Compatibility (WebGL 2.0).
JSON-RPC host page — structured bidirectional bridge: web_json_rpc_bridge.gd.

Deep dive (load on demand)

PWA lifecycle, JSON-RPC bridge, localStorage anti-patterns, size knobs — references/web-elite-patterns.md.

Loading shell (custom HTML)

<!-- index.html custom loading — keep asset URLs relative -->
<div id="loading-screen">
    <div class="progress-bar"><div id="progress" style="width: 0%"></div></div>
    <p id="status-text">Loading...</p>
</div>
<script>
const engine = new Engine(CONFIG);
engine.startGame({
    onProgress: function(current, total) {
        const percent = Math.floor((current / total) * 100);
        document.getElementById('progress').style.width = percent + '%';
        document.getElementById('status-text').innerText = `Loading ${percent}%`;
    }
}).then(() => {
    document.getElementById('loading-screen').style.display = 'none';
});
</script>

Feature gate

if OS.has_feature("web"):
    # Web-only: storage wrapper, visibility pause, navigation guard
    pass

Size / perf knobs

[rendering]
textures/vram_compression/import_s3tc_bptc=true
textures/vram_compression/import_etc2_astc=true

Target ~60 FPS mid-range browsers; cut particles, draw calls, huge textures.
Keep download under a practical budget (~50MB) via exclude filters on docs/source.

PWA update hook

func _ready() -> void:
    if OS.has_feature("web"):
        JavaScriptBridge.pwa_update_available.connect(_on_pwa_update)

func _on_pwa_update() -> void:
    if JavaScriptBridge.pwa_needs_update():
        JavaScriptBridge.pwa_update()

Reference

Progressive disclosure: open Official Documentation links only when researching a specific API; load Related Skills when routing work to a peer domain — do not preload the whole lattice.

Official Documentation

Exporting for the Web — Export presets, Compatibility/WebGL limits, and why COOP/COEP isolation is required for threads/SharedArrayBuffer.
Web export — Platform overview for HTML5 hosting constraints before wiring browser-only APIs.
The JavaScriptBridge singleton — eval, get_interface, and create_callback contracts for two-way GD↔JS bridges.
Custom HTML page for Web export — Relative asset paths and custom loading shells so builds work under subdirectories.
HTML5 shell class reference — Engine/startGame progress callbacks used by custom loading screens.
JavaScriptBridge — PWA update signals plus clipboard/download helpers that must keep JS callback refs alive.
Introduction to the 3 rendering methods — Why web exports should ship Compatibility (WebGL 2.0) instead of Forward+.
File paths in Godot projects — Why user:///FileAccess persistence is unreliable in browser sandboxes versus localStorage/IndexedDB.
Saving games — Serialize/version save payloads before wrapping them in browser storage APIs.
Multiple resolutions — Stretch/aspect/content scale paired with HTML canvas resize policy for responsive web viewports.
Handling quit requests — Pause/resume lifecycle that maps to tab visibilitychange and beforeunload guards.
GPU optimization — Draw-call, texture, and particle budgets that dominate WebGL frame time.

Related Skills

Prerequisites

godot-project-foundations — Feature tags (web), Compatibility renderer defaults, and display stretch settings every HTML5 export branch depends on.
godot-input-handling — InputEvent ownership before suppressing browser defaults (context menu, spacebar scroll) or remapping canvas focus.
godot-save-load-systems — Versioned save ownership and cloud-fallback hooks that localStorage wrappers must not invent ad hoc.

Complements

godot-platform-mobile — Touch/lifecycle patterns that overlap when the same build is played in mobile browsers.
godot-platform-desktop — Keep native desktop paths healthy when one project dual-targets desktop + web.
godot-audio-systems — Bus/voice control used when tab visibility must pause playback to avoid background audio.
godot-performance-optimization — Profiling and CPU/GPU cuts when WebGL budgets still miss 60 FPS after Compatibility + compression.
godot-ui-containers — Control layout that stays readable as the browser canvas resizes across desktop and phone web.
godot-autoload-architecture — Singleton homes for JavaScriptBridge managers, storage wrappers, and always-on visibility guards.
godot-multiplayer-networking — WebSocket/WebRTC peers that replace LAN assumptions once the game is browser-hosted.
godot-resource-data-patterns — PCK/resource packing contracts consumed by remote lazy-load fetch flows on web.

Downstream / consumers

godot-export-builds — CI presets, artifact hosting, and size gates after browser APIs and Compatibility settings are locked in.

Master

godot-master — Library router and mirrored module entry for discovering this platform skill beside sibling domains.

/godot-platform-web

SKILL.md