Wrapply logoWrapply Tutorials
Wrapply / Tutorial / Bridge API
🧩 Native Bridge

Wrapply Bridge API: Website mit nativen App-Funktionen verbinden

Praktische Anleitung zu Wrapply Bridge APIs für Benachrichtigungen, Deep Links, eingehende Links, In-App-Käufe und Standort in generierten Flutter Apps.

App generierenZurück zu Tutorials

Native-Bridge-Referenz

Die generierte Flutter-App stellt window.Wrapply in der WebView bereit. Deine Website kann dieses Objekt verwenden, um native Funktionen nur dann aufzurufen, wenn das jeweilige Modul aktiviert wurde. Warte immer auf wrapplyNativeBridgeReady und behandle { ok:false, error } immer als normalen Fallback-Fall.

APIWann verwendenEingabeAntwort
window.Wrapply.isNativeApp()Erkennt den nativen Wrappernonetrue inside app
notifications.requestPermission(payload)Fragt Benachrichtigungsberechtigung an{ provider }{ ok, permission, granted }
notifications.getToken(payload)Liest oder aktualisiert Geräte-Token{ provider, refresh? }{ ok, token, provider }
notifications.refreshToken(payload)Regeneriert das Token. Alias: updateToken{ provider }{ ok, token, refreshed:true }
notifications.show(payload)Zeigt sofortige lokale Benachrichtigung{ title, body?, data? }{ ok, shown:true }
notifications.getStatus(payload)Liest Provider- und Berechtigungsstatus{ provider }{ ok, granted, configured? }
iap.getProducts(payload)Liest konfigurierte Store-Produkte{ packageName, productIds }{ ok, available, products }
iap.purchase(payload)Startet In-App-Kauf{ packageName, productId, consumable? }{ ok, purchaseStarted }
iap.restorePurchases(payload)Stellt nicht konsumierbare Käufe wieder her{ packageName }{ ok, latestPurchases }
deepLinks.open(payload)Öffnet interne URL, externe URL, Telefon, E-Mail oder WhatsApp{ type, url/value }{ ok, type, url }
wrapply://open/pathÖffnet die installierte App aus E-Mail, SMS oder externer Websiteexternal linkloads https://DOMAIN/path
Wenn Bridge-Funktionen aktiv sind, liefert Wrapply zusätzlich ein PDF mit aktiven Modulen, exakten Aufrufen, Provider-Konfiguration und Store-Review-Hinweisen.

Benachrichtigungsanbieter

Die Website kann den Benachrichtigungsanbieter pro Aufruf wählen. Wrapply integriert nur den ausgewählten Anbieter in die generierte App.

AnbieterNutzungErforderliche KonfigurationWichtiger Hinweis
localSicherer Standard, lokales Token in shared preferencesKeine externe DateiNützlich für Tests/Sitzung; kein echtes Remote-Push-Token
firebaseFirebase Cloud Messaging Anbieterandroid/app/google-services.json und optional ios/Runner/GoogleService-Info.plistFehlen Dateien, kommt ok:false/configured:false zurück
onesignalOneSignal AnbieterOneSignal App ID in Konfiguration/BuildErfordert OneSignal-Setup vor Remote-Pushs

Geräteberechtigungen

Kamera, Mikrofon und Geolocation nutzen Standard-Web-APIs. Der Wrapper ergänzt native Android/iOS-Berechtigungen, wenn die Funktion aktiv ist.

FunktionWeb APINative BerechtigungenVerhalten
Kameranavigator.mediaDevices.getUserMedia({ video:true })Android CAMERA, iOS NSCameraUsageDescriptionNutzt Standard-Web-API; App zeigt natives Prompt
Mikrofonnavigator.mediaDevices.getUserMedia({ audio:true })Android RECORD_AUDIO, iOS NSMicrophoneUsageDescriptionNutzt Standard-Web-API; kein direkter Wrapply-Aufruf
Geolocationnavigator.geolocation.getCurrentPosition(...)Android COARSE/FINE, iOS location usage textPräzise Standortfreigabe ist optional und nur bei Bedarf zu aktivieren

Beispiele nach Codetyp

Diese Beispiele sind bewusst kurz: Sie zeigen das richtige Integrationsmuster, während das generierte PDF die aktiven Module für die konkrete App auflistet.

Ready helper

function onWrapplyReady(callback) {
if (window.Wrapply && window.Wrapply.__nativeBridgeReady) {
callback(window.Wrapply);
return;
}
window.addEventListener("wrapplyNativeBridgeReady", () => {
callback(window.Wrapply);
}, { once: true });
}

JavaScript

document.querySelector("#notify").addEventListener("click", async () => {
if (!window.Wrapply?.notifications) return alert("Available inside the app");
const permission = await window.Wrapply.notifications.requestPermission({ provider: "firebase" });
if (!permission.ok || !permission.granted) return;
const token = await window.Wrapply.notifications.getToken({ provider: "firebase" });
await fetch("/api/device-token", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ token: token.token, platform: "wrapply" })
});
});

TypeScript

type WrapplyResponse = Promise<Record<string, unknown>>;
declare global {
interface Window {
Wrapply?: {
__nativeBridgeReady?: boolean;
isNativeApp: () => Promise<boolean>;
notifications?: {
requestPermission: (p: Record<string, unknown>) => WrapplyResponse;
getToken: (p: Record<string, unknown>) => WrapplyResponse;
refreshToken: (p: Record<string, unknown>) => WrapplyResponse;
updateToken: (p: Record<string, unknown>) => WrapplyResponse;
show: (p: Record<string, unknown>) => WrapplyResponse;
getStatus: (p: Record<string, unknown>) => WrapplyResponse;
};
iap?: { purchase: (p: Record<string, unknown>) => WrapplyResponse };
deepLinks?: { open: (p: Record<string, unknown>) => WrapplyResponse };
};
}
}
export {};

React

import { useEffect, useState } from "react";
export function useWrapplyBridge() {
const [ready, setReady] = useState(false);
useEffect(() => {
if (window.Wrapply?.__nativeBridgeReady) return setReady(true);
const onReady = () => setReady(true);
window.addEventListener("wrapplyNativeBridgeReady", onReady);
return () => window.removeEventListener("wrapplyNativeBridgeReady", onReady);
}, []);
return { ready, Wrapply: ready ? window.Wrapply : null };
}

Vue 3

import { ref, onMounted, onBeforeUnmount } from "vue";
export function useWrapplyBridge() {
const ready = ref(false);
const markReady = () => { ready.value = true; };
onMounted(() => {
if (window.Wrapply?.__nativeBridgeReady) markReady();
else window.addEventListener("wrapplyNativeBridgeReady", markReady);
});
onBeforeUnmount(() => window.removeEventListener("wrapplyNativeBridgeReady", markReady));
return { ready };
}

Angular

@Injectable({ providedIn: "root" })
export class WrapplyBridgeService {
async requestToken(provider = "firebase") {
if (!window.Wrapply?.notifications) {
return { ok: false, error: "Bridge unavailable" };
}
return window.Wrapply.notifications.getToken({ provider });
}
}

jQuery

$("#wrapply-token").on("click", async function () {
if (!window.Wrapply?.notifications) return;
const result = await window.Wrapply.notifications.getToken({ provider: "local" });
$("#wrapply-output").text(JSON.stringify(result, null, 2));
});

PHP / Laravel Blade

<button onclick="buyNativeProduct()">Buy premium</button>
<script>
async function buyNativeProduct() {
if (!window.Wrapply?.iap) return;
const result = await window.Wrapply.iap.purchase({
packageName: "{{ config('app.mobile_package') }}",
productId: "premium_monthly",
consumable: false
});
console.log(result);
}
</script>

WordPress

add_action('wp_footer', function () { ?>
<script>
window.wrapplyNotify = async function () {
if (!window.Wrapply?.notifications) return;
return window.Wrapply.notifications.show({
title: "WordPress",
body: "Notification called from theme/plugin"
});
};
</script>
<?php });

Deep links

// External links from email, SMS, CRM or website
wrapply://open/profile
wrapply://open/checkout?plan=premium
wrapply://open/orders/123

// Native action inside the app
await window.Wrapply.deepLinks.open({ type: "internal_url", url: "https://example.com/account" });
await window.Wrapply.deepLinks.open({ type: "mailto", value: "support@example.com" });
await window.Wrapply.deepLinks.open({ type: "tel", value: "+390000000000" });
await window.Wrapply.deepLinks.open({ type: "whatsapp", value: "+390000000000" });

Was die Wrapply Bridge macht

Die Bridge stellt in der WebView eine JavaScript API bereit. Ihre Website ruft window.Wrapply auf und die Flutter App führt native Aktionen nur aus, wenn das Modul aktiviert wurde.

Bei Bridge-Funktionen liefert Wrapply zusätzlich eine PDF-Anleitung mit exakten Aufrufen, aktiven Modulen und Konfigurationshinweisen.

Nur benötigte Module aktivieren

Notifications
Local/Firebase/OneSignal provider, permission request, token read/refresh and local notification display.
Actions and deeplinks
Open internal WebView URLs, external browser URLs, phone, email and WhatsApp from your website.
Inbound links
Open the installed app from a configured scheme or app link, then route the user to the right page.
In-app purchases
Query store products, start purchase, restore purchases and send results to your backend for validation.
Location
Add the native permission base for maps, nearby results or geolocation flows.

Setup flow

1. Configure features

Enable only the modules you need in the Wrapply configurator.

2. Add required files

Upload Firebase files or provider identifiers when the selected provider requires them.

3. Generate source code

Wrapply writes conditional dependencies, AndroidManifest entries, Info.plist keys and bridge modules.

4. Add JavaScript calls

Call window.Wrapply from your website only after checking the bridge exists.

5. Test before publishing

Test native permissions, tokens, purchases and links on real Android/iOS devices.

Echte JavaScript Beispiele

Use these calls from your website only after verifying that window.Wrapply exists.

Notifications

async function enablePush() {
if (!window.Wrapply?.notifications) return;
await window.Wrapply.notifications.requestPermission({ provider: 'firebase' });
const token = await window.Wrapply.notifications.getToken({ provider: 'firebase' });
await fetch('/api/device-token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token: token.token, platform: 'app' })
});
}
window.Wrapply?.notifications?.show({ title: 'Order updated', body: 'Your request is ready' });

Actions and deeplinks

window.Wrapply?.deepLinks?.open({ type: 'internal_url', url: 'https://example.com/account' });
window.Wrapply?.deepLinks?.open({ type: 'mailto', value: 'support@example.com' });
window.Wrapply?.deepLinks?.open({ type: 'tel', value: '+390000000000' });
window.Wrapply?.deepLinks?.open({ type: 'whatsapp', value: '+390000000000' });
window.Wrapply?.deepLinks?.open({ type: 'url', url: 'https://example.com/help' });

In-app purchases

async function buyPremium() {
if (!window.Wrapply?.iap) return;
await window.Wrapply.iap.getProducts({ productIds: ['premium_monthly'] });
const result = await window.Wrapply.iap.purchase({
productId: 'premium_monthly',
consumable: false,
applicationUserName: currentUser.id
});
await fetch('/api/iap/verify', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(result)
});
}

Location

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
console.log(position.coords.latitude, position.coords.longitude);
});
}

Was Sie erhalten

Conditional source code
Only selected dependencies, permissions and bridge files are included.
Configuration files
Firebase files, OneSignal App ID and iOS optional files are inserted only when requested.
PDF implementation guide
Bei Bridge-Funktionen liefert Wrapply zusätzlich eine PDF-Anleitung mit exakten Aufrufen, aktiven Modulen und Konfigurationshinweisen.
Store review support
Payment, notification and permission modules should be tested before publishing.

Bridge FAQ

Does the bridge work on the public website?

No. It works inside the generated app WebView. Always check window.Wrapply before calling native APIs.

Do I need a backend?

For Firebase push and in-app purchase validation, yes. The app exposes tokens and purchase events, but the backend should send messages and validate receipts.

Can Wrapply implement it?

Yes. Managed publishing can include configuration, testing and documentation for the enabled bridge modules.

Ready to connect native features?

Praktische Anleitung zu Wrapply Bridge APIs für Benachrichtigungen, Deep Links, eingehende Links, In-App-Käufe und Standort in generierten Flutter Apps.

App generierenHilfe anfragen