Mobile App Browser Wrapper

broken image


The theoretical solution to a lot of the problems that are characteristic of native apps is a hybrid Web app—meaning a write-once solution of some sort that runs in the native browser, within a native wrapper that provides access to native platform features. Some or all of the code is in some commonly interpretable language such as HTML. Cross-platform Java executable wrapper for creating lightweight Windows native EXEs. Provides advanced JRE search, application startup configuration and better user experience. ค้นหางานที่เกี่ยวข้องกับ Android mobile app browser wrapper หรือจ้างบนแหล่งตลาด. Each app container is also connected to other secure app containers through the MobileIron management platform, so policies such as app single sign-on (SSO) can be easily shared and updated across devices. MobileIron AppTunnel protects network data with an innovative, multi-OS app VPN that supports iOS, Android, and Windows 10 devices.

There are three main types of mobile apps including native apps, web-based mobile apps and hybrid apps. Hybrid mobile apps combine elements of native and web-based apps. Native apps include Android, Windows Phone, and iOS. Hybrid apps are designed for platforms including Xamarin, Angular Mobile Sencha Touch, React Native, Iconic and others. On the other hand, web-based apps are responsive versions of websites designed in order to work on any mobile device.

Native Mobile Apps

Native apps are developed for a certain mobile device operating system like Windows Phone or Android. Therefore, they are native for a certain device or platform. Apps built for Android, Windows Phone, Blackberry, Symbian cannot be used on any other platform expect on their own. Therefore, a mobile app designed for Android can only be used on an Android device. Main advantages of native apps are good user experience and high performance. In addition, an access to broad range of APIs puts no limits on app usage. Native mobile apps are accessible form app stores of their kind and have that very clear tendency of reaching target customers. Some disadvantages of native mobile apps include higher costs in comparison to other types of mobile apps. Creating a native mobile app duplicates costs since maintenance and separate supports for different apps are required that result in greater product price.

A hybrid mobile app takes an HTML mobile app and inserts it inside a native wrapper. So while the inside of this app is made with HTML, JavaScript and CSS, the outside is a native shell.


'In my opinion, the future of mobile is the future of everything.'
Matt Galligan, Digital Transformation Manager at Salesforce

Hybrid Mobile Apps

Hybrid mobile apps are specifically built using different multi-platform web technologies like JavaScript and HTML5. Hybrid apps are website applications created in a native wrapper that means they use elements of both native and web-based apps. Hybrid apps also possess common cons and pros of both web mobile and native mobile applications. Hybrid multi-platform mobile apps are relatively easy to develop which is a clear advantage. Since code base for hybrid apps ensures that low-cost maintenance alongside smooth updates. On the other hand, hybrid application lack in speed, performance and overall optimization compared to native mobile apps. There are also specific design issues thanks to apps inability to look in the same way on different platforms.

Web-Based Apps

Web-based applications behave in very similar fashion to those native mobile apps. Web apps use a certain browser in order to run and they are commonly written in CSS, JavaScript or HTML5. Web apps redirect users to URL and further offer install options by creating a bookmark on their browser. The greatest advantage of web apps is that they require a minimum of device memory. Users can access web apps from any device that is connected to the Internet. All personal databases are saved on a certain server, so the use of web applications with poor internet connection commonly results in very bad user experience. Another drawback on web apps is access to not so many APIs, with exception of geolocation and several others. In addition, a performance of web-based apps is inextricably linked to network connection and browser work. Therefore, only around fourteen percent of time users spend on web-based apps as only some of device APIs can be used like geolocation.


Categories of Apps

There are thirty-three categories of application in Google Play and twenty-to categories in Apple's App Store. However, there are only seven app categories which have managed to reach more than three percent of users according to latest studies. Commonly used seven categories of apps include gaming apps, business, education, lifestyle, entertainment, utilities, travel, book, health and fitness and food and drink. Around twenty-four percent of users download gaming apps. Gaming apps are followed by ten-percent of users who download business, education and lifestyle apps. By far the most popular category is gaming apps. This is not surprising since the average personal time spent playing mobile games is constantly inversing according to the latest research. Mobile gaming and gaming apps have always been thriving, so developers spend more time and money into creating new games on regular basis. Gaming apps in popularity are followed by business app commonly referred to as productivity apps. Modern-day portable devices are capable of performing various complex tasks, so there is no wonder business apps used for billing, sending emails and checking working progress are on the second place. The most commonly used business apps include Adobe Acrobat Reader, Voxer Walkie-Talkie Messenger, and Indeed Job Search. On the third place are educational apps. Leading apps in education category are Duolingo, Photomath, and Quizlet. Educations apps are followed by popular lifestyle apps like Tinder, Text Free, and AroundMe. Entertainment apps are also very popular like Netflix, Dubsmash, Talking Tom Cat, Amazon Prime Video and other. Utility apps closely follow entertainment apps in a number of downloads. The most popular utility apps include Bitmoji, Flashlight, QR Reader, Speed Test and My Verizon. Other popular categories of apps include travel apps like Google Earth and Uber.


Clients often want their website available in the app store, mostly just for app store presence. I got asked to do app wrapping at work a while ago, because the client purchased a tool that did not have a native app available, only a mobile website. It just had to be made available in the internal app store. Colleagues had to be able to install it by themselves and use it on their own devices without too much fuzz.

In this post I want to show you some of the hurdles while developing a website wrapper and how to overcome them.

What is app wrapping?

It's how I call packaging a website into an app. Wrapping a website into an app. Or just wrapping an app around a website. Hence, app wrapping. It's actually just a form of hybrid app where you make a website available as an app.

Enterprise environment

When you are dealing with internal apps, you often have an internal app store available that is provided by an MDM (Mobile Device Management) solution. A few examples of these are Mobile Iron, AirWatch, Microsoft Intune and many more. In my case there is a mobile browser available, provided by the MDM solution as well, which sets up a secure tunnel to the intranet website that the client wanted to package as an app.

So you can already see that internal apps have to deal with different constraints than public apps.

There is only a requirement to support iOS in this case, so I'm using Xamarin.iOS for this one. You could easily extend the solution to Xamarin Forms by creating the appropriate renderers.

Show the website full screen

First thing to do when app wrapping is show the website in a full screen browser. You don't get a navigation bar like a normal browser in this case, so this poses a few requirements on your mobile website:

  • Supply navigation on all pages
  • Show a back button at all times

In the main Storyboard, you need to create a Web View (UIWebView) that spans the whole screen, so set the constraints accordingly. Then in the controller, use the ViewDidLoad method to load the website:

View the code on Gist.

In this snippet, you can see I did some other settings as well. First is supplying a background color that matches the background of the website that is loaded. This is to prevent a white flash while loading the website. Secondly, I disable the bouncing of the default browser, so the website feels more like an actual app.

Opening links

This is an internal website, so there are 2 different kind of links available:

Browser Apps For Windows

  • Intranet pages – these need to be handled by our MDM browser
  • Internet pages – these can be handled by the normal browser

The UIWebView has a method ShouldStartLoad that can check which link is about to be opened, and allow you to handle the request yourself. Spotify v0 8 8 454.

View the code on Gist.

Browser App Download

You can notify the UIWebView that you handled the request yourself, by returning false from this method. In that case, the UIWebView won't handle the request anymore.

To open a different app on iOS, you can leverage app schemes:

View the code on Gist.

In the snippet above, I did a naive implementation to change http:// and https:// to the required app scheme. The mdmbrowser:// scheme is different depending on the app you want to open. A different MDM provider, means a different scheme.

So if you want to open a URL in Safari, outside of your app, you can do the same thing but leave the http:// or https:// scheme.

Dealing with impossible requests

It's not all about opening links though. Sometimes theres an action that's you want to prevent or leverage in your app. In my case I had to prevent users from changing their password through the app wrapper. For this, you can once again leverage the ShouldStartLoad method:

View the code on Gist.

This example shows that you can actually do whatever you want, depending on the request that comes in. In my case, that's just showing an alert to the user that the action is not possible. And in the end returning false so that the UIWebView won't deal with the request.

Mobile App Browser Wrapper

Apple App Store rejection?

Turn Your Favorite Website Into A Desktop App

If you try to submit these kinds of apps to the public App Store without a lot of added functionality, Apple will most likely reject it based on their Minimum Functionality rule which states:

Your app should include features, content, and UI that elevate it beyond a repackaged website. If your app is not particularly useful, unique, or 'app-like,' it doesn't belong on the App Store.

Mobile App Browser Wrapper Google Chrome

— App Store Review Guidelines, by Apple Developer

But for internal purposes you don't have to deal with Apple's review process, so you have more opportunities and no risk for rejection there.

Closing words

Browser Apps For Pc

There are still some other things to keep in mind. On iOS, you can't open http:// schemes in an app without configuring ATS. If you have a file upload somewhere, make sure that you include the permissions to use the camera and/or photo library in your Info.plist. Money pro 1 8 2 download free. If you don't, your app will crash.

Checking the reachability of the website is an important part as well. You should show the users an appropriate message when they don't have an internet connection, the VPN tunnel isn't available or the website they're trying to open is down.

I also have a requirement to login into ADFS without the user noticing, because they are logged out automatically every day. That means I need to open a different ViewController where I can store the credentials (in a safe way!) initially, and make use of Javascript to automate the login afterwards. How you can achieve this will be for another post. Copyless 1 8 9.

So it is certainly possible to do app wrapping with Xamarin, but I'm not sure if using Xamarin is actually the best possible approach. Which techniques do you use for app wrapping? Please leave a comment!





broken image