Why You Should Build a Wrapper App with MobiLoud Canvas

Considering a wrapper app? In this article we’re going to look at a few key points that will help you to make a decision on what kind of apps you should build. 

Firstly we’re going to look at what a wrapper mobile app, also known as a webview, is – and contrast that with traditional native mobile applications. We’re then going to introduce our own app wrapper solution, Canvas, and explain how we’ve built the ultimate app wrapper that can get you top class iOS and Android apps efficiently and affordably. 

We’ll take an objective look at some of the pros and cons of wrapper apps, and by the end of the article you’ll know if this route is right for you. 

What is an app wrapper? 

Wrapper apps, also known as “webview” apps, are apps that are converted from the web into apps that run natively on the operating system of a smartphone, tablet, or desktop computer. 

The apps run on web code like HTML, CSS and JavaScript – sharing the same database and codebase as the original web app – but are “wrapped” in a native container so that they look and function similarly to applications native to the operating system. 

Instagram is an example of a popular native app (credit)
Instagram is an example of a popular native app (credit)

Wrapper apps are websites or web applications, inside a native container which is analogous to a dedicated browser. The underlying website/web app works the same way that it does on the web, but it’s inside a native application that can be installed on the device in the same way as a traditional app. 

Wrapper apps do not have to just be the website running inside a container. It’s possible to combine the web code with native-specific features to create a good app user experience and add features to enhance the functionality and UI. 

Wrapper apps vs native

In order to clarify this a little better, let’s contrast wrapper apps with traditional native applications. 

Native apps are the “original” apps. Rather than being built to run on a web browser, they are built using programming languages that interact directly with the device’s operating system. 

For example, native iOS apps are built with languages that are native to Apple’s platform – Objective-C and Swift. The Android equivalent would be Java and Kotlin. Native apps are built “from the ground up” to directly interface with the hardware of the device through the iOS or Android operating systems.

Wrapper apps on the other hand are built with web languages. They were already a website or web app that could be accessed through a mobile browser. Then they were “wrapped” within a webview that displays them in native app form. The wrapper itself is native, and generally so are parts of its UI, but it displays web content.

This could also be classed as a “hybrid” app, although there is some controversy over the term.

App Wrapper pros and cons

There are pros and cons of wrapper apps. Whether these are an issue for you depends on your specific business and the job that you want a mobile app to do for your organization. Let’s take a look at them.

Wrapper app pros

  • Extremely efficient. You can build a wrapper app and have it live on the App Stores and installed on users devices in just a matter of weeks, whilst saving 90% of the cost of native app development
  • Far less to rebuild and manage. The apps will reflect the existing content and logic of the website and update with anything you change on the web. You can run everything from a single core codebase.

Wrapper app cons:

  • Hybrid apps made with a webview wrapper can offer worse performance compared to native apps. Webview technology has evolved a lot over the past few years though. Provided the underlying web platform is fast and well built, and the wrapper app is high-quality, then performance can be more than satisfactory. 
  • Feature limitations. As wrapper apps are built with web technologies, they are somewhat limited by the features possible on the original web platform. If you want to access native APIs of the device like GPS, facial recognition or the accelerometer – it will be very challenging and require custom work and compromises. 

Is a Wrapper App Good Enough?

A wrapper app is not better or worse than a native app. They are simply different, with relative advantages and disadvantages, and ideal for different use cases. 

Wrapper apps are not just hack jobs for companies that cannot afford native apps, they are a 100% legitimate technology choice in the appropriate situation. If time and cost were no consideration, native apps would indeed be better. In the real world though, the vast difference in investment required to bring native apps live compared to wrapper apps requires consideration. 

Do you need a native app?

If you want apps that are similar in performance and functionality to your existing web app or site – then a wrapper app is a great choice. You can save tens of thousands of dollars, get to market in just weeks, and make your life easier going forward with just one codebase to manage and maintain. You can get wrapper apps built for iOS and Android that reflect the best of what you’ve built for the web, with native UI features added to ensure a good experience. 

If, on the other hand, you want to build mobile apps that differ significantly from your web platform, and you absolutely must have native only features – then you will need to invest in native mobile apps. 

Wrapper apps are a great choice for eCommerce stores, marketplaces, communities, news sites, learning platforms or anything application that can function well as a web app already! 

If what you want is your web app converted into mobile apps – so that you can make it installable on your users’ devices, send push notifications, and build an App Store presence, then a wrapper app is for you. In most cases this works great – for businesses that are already thriving on the web then having the “app version” of that is generally all that is needed to get the most important benefits of mobile apps like a better UX, push notifications, an App Store brand presence and higher loyalty and engagement rates.

Wrapper Apps Examples

If you build a wrapper mobile app, you’ll be in good company. Lot’s of large tech companies went the wrapper route too, because of the efficiency and the fact that it matched their requirements. According to UX Matters:

“Quora is a WebView app of some sort, with a few clearly native components along the edges”

It’s true, the Quora app is a webview wrapper app with some extra native elements added to ensure a good UX. Instead of building native apps from scratch for iOS and Android, then going through the challenge of hooking them up to their existing backend – they made a smart choice and wrapped the main web app. It isn’t just Quora either. 

“We know that Facebook, Evernote, Instagram, LinkedIn, Uber, Slack, Twitter, Gmail, the Amazon Appstore, and many others are or have been WebView apps”

Amazon relies heavily on webview wrappers for their mobile apps. Basecamp also does this and wrote extensively about their app wrapper project. 

Quora app is a webview wrapper app with some extra native elements added to ensure a good UX

These brands did not go with webview wrappers because they lack capital or technical talent. They did so because it simply made sense in the context of their goals and priorities. 

If you want to replicate this with your own business, your best bet is MobiLoud Canvas. Let’s see why. 

What is Canvas? 

Canvas is our take on the app wrapper. We built it as a platform that turns any website or web app into iOS and Android apps. We built the best wrapper solution on the market, and have refined the platform over 7 years and more than 1000 apps. 

Canvas doesn’t just take your web app and put it in a native box, it adds the native features that you need to get the most important business benefits while also giving your users a great app experience. 

With Canvas you don’t just get software either. You get a team of app experts working with you to make the project a success, during both the development phase and after the launch. 

Why Canvas?

If you decide that you want to build a wrapper app – then Canvas is for you. Canvas has been used to turn WordPress sites, Laravel web apps, eLearning platforms, social networks, eCommerce stores and everything in between into iOS and Android apps – and it can do the same for your site.

Although building your own wrapper apps yourself would be much easier than building native apps from scratch – it would still be a fiddly process and take technical talent to get a good result. You’d struggle to property integrate some features from your site, and the apps might end up looking like an “obvious” webview. 

An eLearning platform transformed into a Canvas wrapper app
An eLearning platform transformed into a Canvas wrapper app

Canvas eliminates all this, automating the tricky parts of wrapper app development. All you need to do is configure and customize the apps on the Canvas platform, with no code required, and Canvas does the rest. Every feature, plugin, integration and functionality from your site will work straight out of the box – and our team will be on hand throughout the whole process to help out and handle any challenges that crop up. 

Within just days your apps will be ready to test on your own devices – and from there we handle the often tricky process of submitting them to the App Store and Google Play. Once the apps are live you can manage them easily – sending push notifications, adding custom code through our editor, and accessing app store analytics  through our dashboard. The apps will update automatically with your site, so there’s little to add to your existing workflow, and our team handles all ongoing updates and maintenance as part of our license. 

How to Build Wrapper Apps with Canvas

The process for building apps with Canvas is simple. It goes something like this:

Step 1: Schedule a Consultation Call

Request a demo first

One of the great things about Canvas is how quick and easy it is to get started by requesting a demo with one of our app team.

During your demo, we will talk about your site, your goals, and what you want from an app. We’ll go over our plans and all the options open to you, and you’ll decide if Canvas is right for you. Then it’s just a case of signing up and starting the app build.

Step 2: Your Mobile App Gets Built By MobiLoud

In this next step, there is nothing for you to do. Our app development team will take the information you provided to us, along with your site, and build out the first version of your mobile app.

Step 3: Log into MobiLoud Canvas

Within a few days’ time, you will be given access to your new mobile app through the Canvas dashbord. This is where you’ll be able to review the app we have built for you and customize it to your liking.

The following steps detail what each of the modules allows you to do in terms of customizations

Step 4: Configure the Menu

Your new mobile app will come configured with a navigation menu specific to the app, to make it more user-friendly on mobile. Remember: the mobile app doesn’t need to be an identical match of the website (nor should it be), it needs to be the “app version” of your website.

Based on the demo call and the requirements defined during it, the MobiLoud team created this menu based on what you actually need.  

When you step inside your Menu within Canvas, you should see something like this.

MobiLoud Menu Tabs

‘Take time to review each of the pages, the links, as well as the icons. Each of these elements can be changed, so make sure you’ve carefully considered each before moving on. Sticking with clarity and simplicity when labelling your mobile navigation is usually a best practice here.

Also, if you’d like to reorganize the order in which the pages appear in the menu, you can do that here. Use the directional icon to the right of the URL to drag and drop your tabs into the order you want them to appear.

Further down this page you’ll encounter more customizations for the navigation related to animations, progress indicator, and more.

More Menu Options

One of the items you should pay close attention to on this page is the configuration of internal and external link behaviour.

Internal External Links

This allows you to control what parts of your app are internal and when you would like to move users out of the app to external sources.

Step 5: Configure the Color Palette

MobiLoud will have already taken care of customizing the colors of your mobile app based on what is defined in your website. However, if you decide to tweak any of these elements to give the mobile app a unique spin of the brand identity, you can do that under the Colors menu.

Canvas Builder Color Configuration

In this section, you can personalize the color palette of your app to ensure it matches your brand’s colors. Not only that, but you can choose different colors for different devices!

You have control over the basics like the splash screen and the tab bar colors. However, if you dig further into the options, you’ll see that you can apply color to the mobile app for iOS and Android users.

Android iOS Colors

There’s nothing that says the two have to be different. However, if you want to apply a slight variation, you can do so here.

Step 6: Configure Push Notifications

With the navigation and design settled, you can focus on what you want to do with push notifications.

Canvas Builder Notifications

First, you’ll have a choice as to what kinds of push notifications and alerts you send to your mobile app users. Main Alerts and Newsletter notifications are already added for you, but they are not activated. To switch them on for logged-in users, hit the toggle on the right.

To add new alerts, click “Add New Tag” and assign values to the custom alerts you want to generate.

If you’re building a news or blog app, you may want to notify users about new blog posts. If it’s an e-commerce app, special sales days or discount codes can be communicated to them through these. Social network apps would notify users about new activity in their feed or messages from connections.

Down below this section, you have the opportunity to rename the various alerts labels that appear in the app.

Push Notifications - Alerts Screens

Once you’ve completed filling out the page, save your changes. Your app will now allow you to send targeted messages to users. It will also allow your users to opt out of those notifications (per GDPR compliance), if they so choose.

All our apps also equip your users with push preferences so that they can choose which kinds of notifications they would like to receive, and a message centre that saves notifications that they miss for later. Both of these go a long way in making your push notifications more effective.

Now you’re ready to go. Through our integration with OneSignal, you’ll be able to send out unlimited push notifications from the dashboard whenever you see fit!

Step 7: Configure the Login Page

Even though you can already reach users through push notifications, enabling a login page would be nice if you want them to be able to create custom profiles for themselves. With a login, you can also provide a more personalized experience and communications for them.

Canvas Login Configuration

This will reveal settings related to where the login page is located, where they’ll be redirected to afterwards, and you can designate a signup page here, too.

WordPress Login and Subs

Step 8: Set up Analytics

Even if you don’t enable user logins, it’s still helpful to track user activity around the app. You can do this by setting up a Google Analytics (and/or Facebook) tracking ID.

Canvas Analytics

This will give you a good sense of what users do when they enter the app. It will also help you later determine if there’s any friction preventing them from fully enjoying the experience of the app.

Step 9: Automate Ratings Requests

In order to give your mobile app a fighting chance in the app stores, you’re going to have to promote it – on your website, in a blog post announcement, in a newsletter, on social media, and anywhere else you have a chance to speak about it. You’ll also need to make sure it’s optimized to rank well in the app stores.

This doesn’t all have to fall on you though. If you can generate enough customer reviews and ratings, you can leverage your current user base to grow the app.

To do this, just enable the Ratings prompt in Canvas:

Canvas Ratings Configuration

This will send out automated messages to users while they’re in the app, and ask them to leave a rating for their experience in the app store.

Step 10: Configure Miscellaneous Settings

In the Settings tab, you can decide what sort of technical features you want to enable for your app. You can enable Development mode if you are regularly updating your configuration and want changes to be made live to the app.

Canvas-Other Settings

This includes things like turning on push notifications for iOS and disabling location tracking for Android.

Step 11: Customize Your Settings with the Advanced Editor

Remember how we said you don’t have to know how to code in order to use MobiLoud Canvas?

Well, that’s still true. However, if you or your developer want to add additional customizations to the mobile app, or would rather just work in the code rather than the builder, you can do so through this module.

Canvas- Advanced Configurations

Using the Code View or Form View (which breaks the customizations down based on parts of the app), you can tweak every element of your app. There are also a few hidden settings you can apply to the JSON configuration.

Step 12: Test Your Mobile App

Once you have completed configuration, it’s time to test the mobile app using the live demo in MobiLoud Canvas. To do this, click the “Test App” button in the top-right corner of the page.

This is what you will see:

mobiloud canvas preview

When it’s done, your app can now be tested out in both the iOS and Android experiences (use the tab in the top-right corner to switch).

Step 13: Publish Your Mobile App

After you’ve completed reviewing the app, and you have approval from all stakeholders, it’s time to publish it to the app stores.

Either with the test module still open or when you’re back on the main Canvas builder screen, click the blue “Publish” button.

Publish App

This will send your fully configured app to the MobiLoud team to finish building the app and publish it to the app stores, which generally takes a few more business days.

Usually preparing all the necessities and communicating with Google and Apple is a lot of hassle. We’ve navigated the process more than a thousand times though and know it as well as anybody – so we handle all this for you.

Step 14: Optimize Your App Store Descriptions

With your mobile app available in store, give some love to its title and description. By optimizing its appearance inside the app store, you can make it all the more appealing for brand new users to discover it even when surrounded by the competition.

The description, screenshots, and ratings will then get potential users get excited about hitting that download button. We can offer you training materials on app marketing and App Store Optimization to help you to succeed with app promotion.

Step 15: Download and Use Your Mobile App

Once MobiLoud has completed publishing your app, you will be notified. And once it is available in the app store… Well, now it’s time for you to download and start using it!

And – Done!

Congratulations – you’ve built iOS and Android apps with Canvas, in just days with minimal fiddling. Now you can get to work promoting your apps, getting more downloads and engagement, and enjoying the business benefits of a great mobile UX.

Canvas takes all the hassle out of app development, and gives you a result that you can be proud of. As we’ve refined and optimized the platform over the years, performance will be just as good as that of your site or web app. If your web platform runs lightning fast – so will the apps. The apps will also have all the exact same features that you have on the web, and all the features you need to create a solid app experience like unlimited push notifications, a native tab bar and navigation, message centre and push preferences, image and video galleries, and much more.

An eCommerce wrapper app built with Canvas
An eCommerce wrapper app built with Canvas

Going forward, we’ll work with you to make the apps a success. You’ll know our team by name, and we’re never more than an email or a Zoom call away – we never leave your side!

Start Building Wrapper Apps today with Canvas

We’ve covered some important points about webview/wrapper apps in this article, and shown how Canvas makes app development easy. Now it’s time to get started. With Canvas there’s also no risk – we don’t do long term contracts and you can cancel and receive a full refund for any reason within 60 days.

It all starts with a consultation with one of our app experts where we walk you through the process, answer any questions you may have, and start working on a plan to bring your vision of the apps to life.

Book a Demo Today!