🚀 The Definitive Guide to Building Badass Hybrid Apps
Ever felt like browser limitations are bottlenecking your crazy ideas? Wanna access the local *file system*, render heavy videos using FFmpeg, or *bypass* CORS but keep hitting browser security walls? Relax, you're exactly where you need to be.
Welcome to Flowork OS—a *Hybrid Operating System* ecosystem that's going to change how you code *front-end* apps forever. This article is your "Holy Book" aka the *Master Guide* for *developers* who want to build apps that are tough, lightweight, and 100% *compliant* with Flowork's standards.
Grab your coffee, let's dissect this insane architecture from the roots all the way to the top! ☕🔥
---
🏗️ PART 1: Flowork OS Identity & Core Architecture
Before you start typing any code, you gotta grasp the *mindset* behind Flowork OS. We're not building your average *web app*, bro. We're building a *Hybrid* OS.
1. The Basic Concept (Hybrid OS)
Flowork OS blends two worlds *seamlessly*:
* Online Environment (Web-based): Runs in the *browser* or extension. * Offline Environment (Local/Native): Runs directly on the *user's* PC/Laptop OS.
2. Dual Engine Architecture
We split the workload so the machine doesn't fry:
* Online Engine: Exclusively handles the UI and *front-end* logic using pure HTML and Vanilla JS (*Client-Side*). * Offline Engine (Local): The heavy lifter for the dirty work (*back-end*). This engine executes god-tier languages like Python, Ruby, C, and C++ straight on the local *hardware*.
3. High-Performance P2P (Peer-to-Peer) Connector
How does the Web talk to the Local OS without a *cloud* server? The answer: P2P Connection. The Online and Offline engines are bridged by a Golang-based *connector* that is blazing fast and secure.
4. The Extension Ecosystem (Chrome Extension Bridge)
Flowork has a dedicated Chrome Extension (Flowork Browser Extension / FBE). Your web app is designed to automatically connect and leverage the extension's "God Mode" features through one central module: `systemBridge.js`.
---
🎨 PART 2: File Structure & The Absolute Laws of UI/UX
In Flowork OS, neatness and performance are non-negotiable. Every app must follow these standard structures without exception.
Mandatory File Structure:
1. `manifest.json` (MV3 Config): Must use `manifest_version: 3`, point `default_popup` to `index.html`, set *permissions*, and enforce strict CSP (`script-src 'self'`). 2. `index.html` (Desktop): Needs an *"Enterprise"* vibe (clean, professional). If running as an extension, the size is *locked* (e.g., 780x580 px). 3. `mobile.html` (Android/Mobile): * 🚫 Cards are Forbidden: Don't use boxes with margins. Use an Edge-to-Edge (full width) layout. * 🛡️ Dock Safe Area: You must add a *padding-bottom* (e.g., `85px`) to the main *wrapper* so your content doesn't get blocked by the OS Mobile Dock. * 🚫 Blur is Forbidden: Ditch `backdrop-filter: blur()`. Use transparent *solid/rgba* colors to keep the Android GPU cruising at a buttery 60fps.
📜 HTML & Absolute Code Laws:
* English Only in Code: Even if the UI is in Indonesian, *comments*, variable names, and functions must be in English. * Zero Default Alerts: It's a sin to use the browser's default `alert()` or `confirm()`. Build your own *Custom Toast/Modal*! * Zero External Scripts: No calling *scripts* from CDNs/Github. All assets must be local. * Zero Logic in HTML: Using logic in `