Capacitor 6 Native Bridge & Offline Sync Standard

--- description: Capacitor 6 Native Bridge & Offline Sync Standard - Conventions for Capacitor 6 hybrid apps: manage native plugin lifecycles, handle safe hardware back buttons, and implement offline SQLite/IndexedDB synchronization. globs: src/**/*.{ts,tsx} alwaysApply: false verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/capacitor-ionic-hybrid" --- # Capacitor 6 Native Bridge & Offline Sync Standard > **Severity**: MEDIUM | **Category**: mobile > **Anti-Pattern Warning**: AI forgets platform check (Capacitor.isNativePlatform), causing web builds to crash when calling mobile native plugins. ## System Constraints You are a hybrid mobile developer using Capacitor 6. Always guard native plugin calls with Capacitor.isNativePlatform() to allow clean browser development. Handle App state changes (pause/resume) to sync offline storage. ## Strict Guidelines - Guard mobile hardware APIs with Capacitor.isNativePlatform() before calling native plugins. - Handle Android hardware back button via App.addListener('backButton'). - Persist critical user actions locally in SQLite or Preferences for offline queue sync. ## Bad vs Good Implementations ### Platform-Guarded Haptics and Storage #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Calling native plugins directly on standard desktop/mobile browsers triggers unhandled exceptions. ```typescript import { Haptics } from "@capacitor/haptics"; export async function vibrate() { // Crashes on web browsers where native haptics are unsupported! await Haptics.vibrate(); } ``` #### Production Standard (Correct) > **Standard**: Safely degrades to Web Vibration API when running in a browser, avoiding native bridge errors. ```typescript import { Capacitor } from "@capacitor/core"; import { Haptics, ImpactStyle } from "@capacitor/haptics"; export async function triggerHaptic() { if (Capacitor.isNativePlatform()) { await Haptics.impact({ style: ImpactStyle.Light }); } else if ("vibrate" in navigator) { navigator.vibrate(10); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Capacitor 6 Native Bridge & Offline Sync Standard

Capacitor 6 Native Bridge & Offline Sync Standard defines an industrial-grade behavioral standard for mobile engineering. Conventions for Capacitor 6 hybrid apps: manage native plugin lifecycles, handle safe hardware back buttons, and implement offline SQLite/IndexedDB synchronization. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: AI forgets platform check (Capacitor.isNativePlatform), causing web builds to crash when calling mobile native plugins. Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	AI forgets platform check (Capacitor.isNativePlatform), causing web builds to crash when calling mobile native plugins.	High	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Guard mobile hardware APIs with Capacitor.isNativePlatform() before calling native plugins.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.

Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.

Handle Android hardware back button via App.addListener('backButton').

Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.

Persist critical user actions locally in SQLite or Preferences for offline queue sync.

Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.

Technical Questions & Answers

Frequently Asked Technical Questions

Common questions developers face when configuring AI coding assistants for this stack:

Q:Why is Capacitor 6 Native Bridge & Offline Sync Standard critical for AI coding assistants?

Conventions for Capacitor 6 hybrid apps: manage native plugin lifecycles, handle safe hardware back buttons, and implement offline SQLite/IndexedDB synchronization. Without explicit behavioral boundaries, AI coding assistants (Cursor, Claude Code, Windsurf, Codex) rely on training data averages, which frequently produce deprecated, inefficient, or vulnerable code patterns.

Q:How does adopting this rule prevent AI hallucinations?

This rule explicitly declares what the AI must avoid (AI forgets platform check (Capacitor.isNativePlatform), causing web builds to crash when calling mobile native plugins.) and prescribes verified positive examples. Grounding the LLM with negative and positive pairs eliminates guesswork.

Q:Which AI coding environments are supported?

This specification is multi-platform compatible: Cursor (.cursor/rules/*.mdc & .cursorrules), Anthropic Claude Code (CLAUDE.md), Windsurf (.windsurfrules), Codex / Cline (AGENTS.md), and GitHub Copilot (.github/copilot-instructions.md).

Q:Can I combine this rule with other technology stacks?

Yes. Use the Interactive Stack Builder or download an Agent Pack to merge this rule with other frontend, backend, database, security, and DevOps rules without syntax collision.