Turn your Website into an App for iOS
Need to avoid the hassle of having an App build from a scratch? This is your solution, no matter your website is code or no-code.​
Tashbeeb Adnan
May 25, 2022
wrap web app in IOS app

What is Webview?

Trying to find a solution that is both time-saving and efficient when you require an iOS app, Webview is the way to go. You will not be obliged to hire an iOS developer, go through all the processes, or gather requirements.

Webview is just another wrapper that provides you with a frame that is fixed within the app and when the app is launched it will show you the website hope page you provide to it.

Everything you can do on the website, you can do in the webview, the only difference is that you now are using it as an app, the app functions just like all other apps. You can access your device’s storage, and hardware components (i.e Camera, microphone), the app can communicate with other apps on your device (i.e Messages, Calls, Emails), and it can be shared from and to just like normal apps do and you will have no trouble identifying what user is logged into the app as the app stores its cache.

Your to-do list:

The Webview app doesn’t discriminate between code or no-code web applications, so you don’t need to worry about combining the databases of your app and website and storing the same information twice. You won’t feel a need to move towards getting a full fledge app developed after you have had an experience using this app.

The only thing that is required of the website is its responsiveness on devices with all screen sizes, as iOS devices come in different sizes ranging from small 4-inch screens to iPads larger than 12 inches, so your website supports all screen sizes.

Here are some advantages of using Webview with iOS

  • Runs outside of the app’s main process
  • Uses Nitro, a faster JavaScript engineHandles JavaScript asynchronously
  • Eliminates certain touch delays
  • Supports server-side authentication challenges
  • Supports authenticating self-signed security certificates & certificates with error

Step-1 WK Webview in XCode:

You can easily find code snippets for WKWebview on apple’s developer forum and all the documentation is available along with it. All kinds of use cases are listed there. It will look something like this:

import UIKit

import WebKit

class ViewController: UIViewController, WKUIDelegate {

   var webView: WKWebView!

   override func loadView() {

       let webConfiguration = WKWebViewConfiguration()

       webView = WKWebView(frame: .zero, configuration: webConfiguration)

       webView.uiDelegate = self

       view = webView

   }

   override func viewDidLoad() {

       super.viewDidLoad()

       let myURL = URL(string:“https://www.apple.com”)

       let myRequest = URLRequest(url: myURL!)

       webView.load(myRequest)

   }}

Copy

Step-2 Add your extensions:

Once you have a running WebView, you can add all the built-in extensions as targets. That may contain, share extension, and even custom built-in extension. With iOS you can easily add extensions to run your app smoothly, like any other app, your app will appear on the share sheet, which would send you notifications, and also it would function like any other app, you want it to function.


Step-3 POST API calls:
The only problem yo would face in the long run using a WebView app is to sort data between the users while multiple users are logged in using WebView apps, in the case of bubble.io, it exposes its API end-point. You can make a POST call to the exposed API end-point wherever you need to send it and the user credentials that you have extracted from the session cookie of WebView.

You need to use the bubble end-point with the authorization key that bubble you'll get in your bubble.io apps' API setting and authorize the address your POST call as shown below.  

Using this approach you can eliminate any limitations that the WebView poses. Building apps in bubble.io and converting them to apps is convenient and time-saving as compared to building apps or websites on other stacks.

Once all this is done and you have followed all these steps, you can run your app on a simulator or your own device and voila! Your webview app is ready to be used!

Like the blog? Check out our latest posts for more bubble.io tutorials. Happy Bubbling!

Looking to build something?
Chat with our team to see what we can do
Get Started 🚀