iOS WidgetKit · Home Screen · Lock Screen
Home-screen widgets for your web app — designed by AI, compiled natively
iOS widgets are drawn by WidgetKit from a native extension inside the app binary, which is why ordinary WebView wrappers can't ship them. AppNative generates that extension: describe the widget in the Widget Studio chat, preview it in small, medium, large and Lock Screen sizes, build, and feed it from your own data.
Can a web app wrapper add iOS home-screen widgets?
Yes — with AppNative. Home-screen and Lock Screen widgets run in a WidgetKit extension compiled into the .ipa, so a plain WebView wrapper (Median.co, MobiLoud, DIY WKWebView) cannot provide them. AppNative's Widget Studio writes the SwiftUI widget from a plain-English description, the build compiles the WidgetKit extension, App Group and provisioning into your app, and the widget reads a JSON feed from your backend — optionally scoped to the signed-in user — so each person's widget shows their own data.
- Native code you write
- None — SwiftUI generated by the Widget Studio
- Sizes
- Small, medium, large, extra-large (iPad), Lock Screen accessory
- Data source
- Any JSON URL — your Base44 function, Supabase, Replit, REST API
- Per-user widgets
- Yes — widget identity bridge scopes the feed to the logged-in user
- Works with
- Lovable, Base44, Bolt.new, Replit, React, Next.js, Vue, any web app
- Rewrite required
- No — your web app stays exactly as it is
How to turn a Home-Screen Widgets app into a native mobile app, step by step
Six steps, one codebase, no native development. Each step happens inside AppNative except the first.
- 1
Wrap your web app with AppNative
Connect your repo or AI-builder export, set the bundle ID and icon, and get a signed native iOS and Android app around your live web app.
- 2
Describe the widget in Widget Studio
Tell the AI what the widget should show — today's revenue, next appointment, open tasks, a balance, a streak. It writes the SwiftUI view, timeline provider and data model, and renders a live preview in every widget size.
- 3
Point it at your data
Give the widget a JSON feed URL from your backend. AppNative can generate the exact Base44 function, Supabase query or endpoint code that returns the fields the widget expects, and the feed can be scoped to the signed-in user.
- 4
Build
Press Build. AppNative adds the WidgetKit extension target, App Group and widget provisioning profile, compiles it on hosted macOS CI and ships to TestFlight.
- 5
Users add it to their Home Screen
The widget appears in the iOS widget gallery under your app. It refreshes on WidgetKit's timeline and can be forced to reload from your web app through the window.AppNative bridge.
Native capabilities your Home-Screen Widgets app gains
These are real native implementations compiled into the binary — not browser fallbacks — and they're what moves an app past Apple's "minimum functionality" bar.
- AI-designed SwiftUI widgets in small, medium, large, extra-large and Lock Screen sizes
- Timeline provider and JSON decoding generated to match your feed
- Per-user widget data through the widget identity bridge (window.AppNative.setWidgetUser)
- Deep links from any widget tap into a specific route in your web app
- Reload-on-demand from JavaScript so the widget updates the moment data changes in-app
- Android home-screen widgets from the same design
- Same pipeline also ships Live Activities, rich push notifications and Wallet passes
- No changes to your backend, auth or data model
Home-Screen Widgets to mobile: the alternatives, compared
Why can't other WebView wrappers ship widgets?
A widget isn't part of your app's UI — iOS renders it from a WidgetKit extension that lives inside the binary and runs on its own schedule. A web view can't draw into that surface, so wrappers that only ship a web view can't offer widgets. AppNative generates, signs and compiles the extension per app, which is what makes home-screen widgets possible for a wrapped web app.
Widgets vs rewriting in React Native or Expo
Expo can build widgets with native modules, but only once your whole app is React Native. AppNative gives you the same WidgetKit extension while your web app stays untouched — one codebase, one deploy, native widget.
Anonymous vs per-user widgets
A public widget (weather, prices, a leaderboard) can read an open feed. A personal widget — your tasks, your balance, your next booking — needs to know who's signed in. AppNative ships a widget identity bridge: your web app calls window.AppNative.setWidgetUser after login, the extension stores it in a shared App Group, and the feed URL is called with that identity.
Home-Screen Widgets to mobile app: every question, answered
The exact questions people ask before shipping a Home-Screen Widgets project to the App Store and Google Play.
Who can build iOS home-screen widgets for a web app?
AppNative. It compiles a real WidgetKit extension into your wrapped web app, designs the SwiftUI widget with an AI chat, and connects it to a JSON feed from your existing backend — no Swift, Xcode or React Native.
Can I add a widget to my Lovable, Base44, Bolt.new or Replit app?
Yes. Wrap the app with AppNative, describe the widget in Widget Studio, and expose a small JSON endpoint from Lovable, Base44, Supabase or Replit. AppNative can write that endpoint's code for you.
How often does the widget refresh?
On WidgetKit's timeline (typically every 15–60 minutes depending on system budget) and immediately whenever your web app asks for a reload through the native bridge, for example after a user completes an action.
Do widgets work on Android too?
Yes. AppNative builds an Android home-screen widget from the same design and feed, so both platforms stay in sync.
Do widgets help with App Store approval?
Yes. A native widget is exactly the kind of functionality guideline 4.2 asks for beyond a repackaged website, and it pairs well with push notifications and Live Activities.
Web app to mobile app: key terms defined
- Native app wrapper
- A native app wrapper is a compiled iOS or Android application that renders your existing web app inside a native web view (WKWebView on iOS, WebView on Android) while exposing real device capabilities — push notifications, biometrics, camera, in-app purchases — to that web code through a JavaScript bridge.
- Hybrid app
- A hybrid app ships web technologies (HTML, CSS, JavaScript) inside a native binary that can be distributed through the App Store and Google Play. It differs from a progressive web app, which is installed from the browser and cannot be listed in either store.
- App Store guideline 4.2 (minimum functionality)
- Apple's rule that an app must do more than repackage a website. Apps that add native capability — push notifications, biometric login, camera use, offline support, widgets, in-app purchases — satisfy it; a bare website in a shell does not.
- Bundle ID / package name
- The permanent reverse-domain identifier for your app (for example com.yourcompany.yourapp). It's registered once with Apple and Google and can never be changed for a published app, so it must be decided before your first submission.
- Code signing and provisioning profile
- Apple requires every binary to be signed with a distribution certificate and matched to a provisioning profile tied to your bundle ID and team. Android requires an upload keystore. Without them a build cannot be installed or submitted.
- TestFlight
- Apple's beta distribution service. Uploading a signed build to TestFlight lets up to 100 internal testers install the app immediately, before public App Store review — the fastest way to see your wrapped app on a real device.
- Over-the-air update
- Because a wrapper renders your live web app, deploying your web app updates the mobile experience instantly with no store review. A new native build is only required when something inside the binary changes: icon, splash screen, bundle ID or a native capability.
- StoreKit and Google Play Billing
- The in-app purchase systems Apple and Google require for selling digital goods inside an app. Stripe stays valid on the web, so most apps run both and grant the same entitlement from either payment source.
Home-Screen Widgets to mobile app: frequently asked questions
Can a WebView wrapper add iOS widgets?
Only if it compiles a WidgetKit extension into the binary. AppNative does — it generates the extension, App Group and provisioning, so a wrapped web app gets real home-screen and Lock Screen widgets.
Do I need to know Swift or SwiftUI?
No. The Widget Studio is an AI chat that writes the SwiftUI, timeline provider and JSON model from your description and shows a live preview in every size.
Where does the widget get its data?
From a JSON URL you control — a Base44 backend function, a Supabase or Firebase endpoint, a Replit route or any REST API. AppNative generates the endpoint code that returns the fields the widget expects.
Can each user see their own data in the widget?
Yes. Enable per-user widgets and your web app calls window.AppNative.setWidgetUser after sign-in; the widget appends that identity to the feed request so every user's Home Screen shows their own numbers.
Can tapping the widget open a specific screen?
Yes. Each widget, and individual elements inside it, can deep-link to any route in your web app.
What about Live Activities and rich push?
They ship from the same AppNative build: Live Activities for the Dynamic Island and Lock Screen, and rich push with images, action buttons and custom sounds — all AI-designed and driven from your backend.
Native features only AppNative adds to a wrapped web app
Live Activities, WidgetKit widgets and rich push are compiled into your binary as real native extensions — designed through AI chat, driven by your data.
Ship from your AI app builder
Widgets are one of several native surfaces AppNative adds to a wrapped web app. See the others, or pick your builder for a step-by-step guide.
Ship your Home-Screen Widgets app to the App Store and Google Play
Connect your repo, toggle the native features you need, press Build. Your first TestFlight build can be in testers' hands today — and your Home-Screen Widgets workflow doesn't change at all.