Getting Started

Build and deploy your first CWA app in five minutes.

Prerequisites

Step 1 — Create Your Web App

Start with a standard web application. Any HTML/CSS/JS app works. Here's a minimal example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My CWA App</title>
</head>
<body>
  <h1>Hello from CWA!</h1>
  <button id="vibrate">Vibrate</button>

  <script>
    // Wait for the bridge to be ready
    window.addEventListener('loadsites:ready', function() {
      document.getElementById('vibrate').addEventListener('click', function() {
        LoadSites.haptics.vibrate(200);
      });
    });
  </script>
</body>
</html>
Bridge is instant

The LoadSites bridge is embedded inline before your app loads, so window.LoadSites is typically available immediately. The loadsites:ready event is a safety net for edge cases. Your HTML/CSS/JS runs in the platform's native WebView (WKWebView on iOS, Android WebView on Android).

Step 2 — Package as ZIP

Create a ZIP file containing your app files. The entry point (usually index.html) should be at the root of the archive:

my-app.zip
 ├── index.html
 ├── css/
 │   └── style.css
 └── js/
     └── app.js
Size limit

ZIP bundles must be under 50 MB and may only contain standard web assets (HTML, CSS, JavaScript, images, fonts, JSON, SVG). No native executables or binaries are permitted.

Step 3 — Create a Manifest

Create a file named loadsites.app.manifest and host it at the root of your domain (e.g., https://example.com/loadsites.app.manifest). 

{
  "loadsites_version": "1.0",
  "app_author": "Your Name",
  "license_key": "",
  "app_name": "My App",
  "app_description": "A simple CWA demo app",
  "app_version": "1.0.0",
  "app_icon": "https://example.com/icon-512.png",
  "app_zip": "https://example.com/my-app.zip",
  "app_entry": "index.html",
  "permissions": ["haptics", "storage"]
}

See the full Manifest Specification for all fields and the multi-app format.

Step 4 — Host Your Files

Upload the following to your web server:

FileURL
loadsites.app.manifesthttps://example.com/loadsites.app.manifest
my-app.ziphttps://example.com/my-app.zip
icon-512.pnghttps://example.com/icon-512.png
CORS

The manifest must be served with appropriate CORS headers if hosted on a different subdomain. The ZIP and icon can be on any accessible URL.

Step 5 — Install in LoadSites

  1. Open the LoadSites app on your device.
  2. Enter your domain (e.g., example.com) in the URL bar.
  3. LoadSites fetches the manifest, shows the app name and permissions.
  4. Tap Install to download and extract the app.
  5. Your app appears as a card on the home screen — tap to open.

Updating Your App

To push an update, increment app_version in the manifest and upload a new ZIP. LoadSites checks for updates each time the user opens your app. If a newer version is found, it downloads and swaps the bundle silently.

Detecting the Bridge

Use either of these patterns to safely detect whether your code is running inside LoadSites:

// Pattern 1: Check immediately (bridge is embedded inline)
if (window.LoadSites) {
  console.log('Running inside LoadSites v' + LoadSites.version);
}

// Pattern 2: Event listener (safety net)
window.addEventListener('loadsites:ready', function(e) {
  var bridge = e.detail;
  console.log('Bridge ready:', bridge.version, bridge.domain);
});

// Pattern 3: Callback (alternative)
window.onLoadSitesReady = function(bridge) {
  console.log('Bridge ready:', bridge.version);
};

Next Steps