Wrapping a Live Website

Load a remote website directly into the EasyCord shell.

Introduction

EasyCord allows you to wrap a live website instead of bundling local assets. This enables updates without submitting new builds to app stores, while securing native functions using domain-origin locking.

Prerequisites

• A live website accessible via HTTPS.
• An existing Flutter project configured with EasyCord.

Step 1: Define Allowed Origin

Declare your production origin in the easycord_permissions.yaml file. This prevents malicious origins from invoking native device features.

allowed_origin: "https://my-production-app.com"

permissions:
  - "getGPSLocation"
  - "triggerHapticFeedback"

Step 2: Configure the Shell

Configure the EasyCordWidget in your Dart entry point to load your hosted URL. Include an offline fallback to prevent blank screens when the device lacks internet access.

import 'package:flutter/material.dart';
import 'package:easycord/easycord.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: EasyCordWidget(
            initialUrl: 'https://my-production-app.com',
            offlineFallbackUrl: 'assets/web/offline.html',
            cacheEnabled: true,
          ),
        ),
      ),
    );
  }
}

Step 3: Detect EasyCord in JavaScript

Check if the EasyCord bridge is available before making native calls. The framework injects the global object automatically before the document load event.

function getDeviceLocation() {
  if (window.easycord) {
    return window.easycord.call('getGPSLocation');
  } else {
    return navigator.geolocation.getCurrentPosition(console.log);
  }
}

Verification

Run the application on a device. The shell loads your live website and the native bridge responds to JavaScript calls.

Troubleshooting

Blank Screen on Launch

Occurs when the device has no internet connection and no fallback is provided. Implement Progressive Web App service workers on your website to cache assets. Ensure offlineFallbackUrl is configured in EasyCordWidget.

Next Steps

• Bundling a Local Web App