# Wrap your Site as App {% columns %} {% column width="41.66666666666667%" %} **Don't have a native iOS app?** No problem. If you have a Progressive Web App (PWA) or a mobile-optimized website, Onside's **PWA Wrapper Service** can quickly convert it into a native iOS app, ready for distribution on our marketplace. This is a fast, cost-effective way to reach a new audience on iOS without needing to rebuild your application from scratch. {% endcolumn %} {% column %} ![](https://3698875069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV24VBLkTP47H3Kf48DFs%2Fuploads%2FC1IDb0ITbwCXs5uXy26m%2FFrame%202087328299%20\(1\).png?alt=media\&token=34bf864c-dfa1-4bdf-8408-89dac386ffb3) {% endcolumn %} {% endcolumns %} *** #### How It Works & Key Benefits Our system takes your web app and wraps it inside a lightweight, native iOS container. The result is a fully installable iOS app that appears on a user's Home Screen with its own icon. When they launch it, it opens directly into your web experience. * ✅ **Zero Native Code Required:** We handle the entire wrapping process, saving you significant development time and resources. * 🚀 **Fast Time-to-Market:** Go from a web link to a live iOS app in a matter of days, not months. * 📲 **Access Native Features:** Unlike a standard website, a wrapped app can access powerful iOS functionalities like **Push Notifications** to re-engage your users. * 🌐 **New Distribution Channel:** Reach a new audience on iOS and test the market before committing to full native development. ### **A Step-by-Step Guide to Publishing** The process is designed to be simple, with minimal effort required from your side. > 📌 **Before You Begin**\ > You must have an active **Apple Developer Account**. If you don't have one, you can enroll here: [Apple Developer Program](https://developer.apple.com/programs/enroll/). {% stepper %} {% step %} #### Prepare Your Web App URL Before we can wrap your app, you need a single, public URL where your web application lives. **Web App URL:** The `https://` link your native app will load on launch. {% hint style="warning" %} **Ensure your web app is mobile-ready:** * ✅ It must have a responsive design that works well on iPhones. * ✅ All navigation must be handled within your app (no browser "back" buttons). * ✅ It cannot rely on browser-specific features like multiple tabs or the address bar. {% endhint %} {% endstep %} {% step %} #### [**Create your developer account** ](https://docs.onside.io/console/getting-started-and-publishing/create-onside-account)in the **Onside Developer Console** {% endstep %} {% step %} #### **Grant Us Access to Your Apple Developer Account** To handle the app notarization and publishing process on your behalf, we need access to your App Store Connect account. ➡️ **Action:** Please invite the user **** to your App Store Connect team with the **Admin** role. This allows us to manage app listings and builds without accessing your account's financial information. {% endstep %} {% step %} #### **Provide Your App's Metadata and** Site URL Next, we need the metadata for your app's public store listing page and the URL of your web app. To make it easy, please copy the template below into an email or document, fill in your information, and send it back to us. [**Download Metadata template ->**](https://docs.google.com/document/d/1KUy9heaA55R-MMu2zvia872WwK30KnGx7975K6kCZr8/edit?usp=sharing) Here is a detailed breakdown of each required field: | Field Name | Requirements & Description | | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **App Identity** | | | Bundle ID | **Required.** Your app's unique identifier. Format: com.companyname.appname | | Version Number | **Required.** The initial version number. We recommend 1.0.0. | | App Name | **Required.** The name displayed in the Onside store (max 30 characters). | | App Home Screen Name | **Required.** The short name displayed under the icon on a user's phone (max 10-12 characters). | | **Store Listing Details** | | | Subtitle | A short, catchy phrase appearing below your app's name (max 30 characters). | | Description | **Required.** Your app's full description (max 4,000 characters). Use this to detail features and benefits. | | Keywords | Comma-separated search terms that help users find your app (max 100 characters total). | | Primary Language | **Required.** The default language code for your app (e.g., en for English). | | Age Rating | **Required.** Select one: 4+, 9+, 12+, 17+, or 18+. | | **Legal & Support** | | | Support URL | **Required.** A public URL where users can find support. | | Privacy Policy URL | **Required.** A public URL for your app's privacy policy. | | Marketing URL | Optional. A link to a promotional website for your app. | | Copyright | **Required.** The copyright notice, typically © \[Year] \[Your Company Name]. | | **Technical & Visual Assets** | | | Supported Orientations | **Required.** Choose one: Portrait, Landscape, or Both. | | App Icon | **Required.** Must be **1024x1024 pixels** in PNG format, with **no transparency**. | | Screenshots | **Required.** Minimum of 3, maximum of 10 PNG images. Use the correct dimensions for your app's orientation. Common sizes are 1290x2796 px for portrait or 2796x1290 px for landscape. | | {% endstep %} | | {% step %} #### We Wrap Your Web App Our system takes your web app and wraps it inside a lightweight, native iOS container. This container is essentially a dedicated, full-screen browser (a `WebView`) focused exclusively on your web experience. {% endstep %} {% step %} #### It Becomes a Real iOS App The result is a fully installable iOS app. Users can download it from the Onside Store, and it will appear on their Home Screen with its own icon, just like any other app. When they launch it, it opens directly into your web experience. {% endstep %} {% endstepper %} ### Key Benefits of Using the PWA Wrapper {% tabs %} {% tab title="Zero Rebuilding" %} You don't need to write a single line of native iOS code. We handle the "wrapping" process. This saves you significant development time and resources. {% endtab %} {% tab title="Unlock Native Features" %} Unlike a standard website in a browser, a wrapped PWA can access powerful native iOS functionalities, giving your users a richer experience: * **Push Notifications:** Re-engage your users directly on their devices. * **Works Offline:** If your PWA has service workers, it can provide offline functionality. * **And more...** The wrapper can be configured to access other native features as needed. {% endtab %} {% tab title="New Channel for Growth" %} Publishing on Onside gives you a new channel to acquire users and generate traffic. It's an excellent, low-cost way to test the waters with an iOS audience before committing to full native development. {% endtab %} {% endtabs %} *** ### Requirements for Your Web App To ensure a high-quality user experience, your web app should be: * **Mobile-Optimized & Responsive:** Your site must be fully responsive and provide a great user experience on iPhone screen sizes. * **Secure (HTTPS):** Your website must be served over HTTPS. * **A PWA (Recommended):** While most mobile-friendly sites will work, Progressive Web Apps with a manifest file and service workers will provide the best experience, enabling features like offline access and a more app-like feel. {% hint style="info" %} **What's the difference?** A user can browse your **Website** in Safari. The **Store App** created by our wrapper feels like a dedicated application, launching full-screen from the user's home screen and enabling extra features like push notifications. {% endhint %} #### Ready to Submit? Once you have everything collected, you can submit your app details through the Onside Console.

Go to Onside Console

If you have any questions about whether your web app is a good fit for our PWA Wrapper Service, please contact our developer support team at [**support@onside.io**](mailto:support@onside.io). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.onside.io/console/wrap-your-site-as-app.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.