WeSetupYourWebViewApp Documentation




Get your app source code: Order
FAQs: Click here
Support: Click here
 

 

 

 

 

 

 




1) Setup your web app/website/HTML files

Option 1: Use URL (store files online):

Create a mobile-optimized website, for example, using jQuery Mobile and upload your site to your web space. Please make sure to optimize your website to feel like an app. For example, may disallow user zooming:

<meta name="viewport" content="width=device-width, user-scalable=no" />


Option 2: Use a local HTML folder (store files within the app):

WeSetupYourWebViewApp supports local HTML folders within the app itself too: Just copy your HTML/CSS/JavaScript files into a single zip archive.


2) Order your iOS & Android apps

Once, your web app/website is ready, it's time to convert that web app into iOS and Android apps. Open the WeSetupYourWebViewApp website and click on the Order button:



Amazing, this exciting journey begins right now. In the first step, enter the URL of your existing web application or upload a zip file containing local HTML files:



In the next level, choose if you want to open external hosts (e.g., a link calling facebook.com instead of your-webapp-domain.com) in the iOS/Android system browser instead of your WebView app itself:



Now you can choose additional native iOS and Android dialog boxes which can be shown to your app users. The First run dialog will be a welcome message when the app was started for the first time. Rate this app dialog will be shown after some days of usage and will ask the user to rate the app in the App Store and Play Store. For iOS, an In-App Rating dialog will be used.



Do you want to add banner & interstitial ads by AdMob to your app? Or do you want to use OneSignal push notifications? If so, please enter your API keys in this step. If you do not need ads or push notifications in your app, skip this step without entering any information.



Yay, it's time for your app icon. Please upload a 1024x1024px icon, and we will resize the image for any required sizes. If you do not own an icon yet, skip this step, and you can add the icon to your app later.



Psssst...do you want to tell us something? ;) For example, just let us know if we should provide a blue/green/pink status bar color for your app.



Whoop, whoop! Your app is almost ready! Just confirm your order and our IT guys and girls will start working on your project immediately.




Optional) Advanced setup of the iOS project

Download the Xcode app from the Mac App Store. If you do not own a Mac for running the required Xcode app, check out MacInCloud as it allows you to rent a virtual Mac online starting at 1 USD per hour (we are not affiliated with the provider of that service). Using that service, you can build your iOS apps based on WeSetupYourWebViewApp, even without owning a Mac. Interested in advanced and further setup of your delivered iOS project? Sure – just open WebViewController.swift take advantage of these, optional built-in configuration options:

host
required value
Your domain host (e.g. "example.org")
webviewurl
required value
Your full WebView URL (e.g. "example.org/app.html") which should be loaded in the WebView
uselocalhtmlfolder
true or false
Set to true to use local "local-www/index.html" HTML file instead of remote WebView URL
openallexternalurlsinsafaribydefault
true or false
Set to true to open all external hosts in Safari
preventoverscroll
true or false
Set to true to remove WKWebView bounce animation (recommended for most cases)
deletecache
true or false
Set to true to delete the WebView cache with every launch of your app
okbutton
optional
Set the text label of the "OK" buttons
bigiphonexstatusbar
true or false
Set to true to enhance the iPhone X/XS/XS Max status bar size
useloadingsign
true or false
Set to false to hide the loading sign while loading your URL
useragent_iphone
optional
Define a customized UserAgent on iPhone (or leave it empty to use the default iOS UserAgent)
useragent_ipad
optional
Define a customized UserAgent on iPad (or leave it empty to use the default iOS UserAgent)
activatefirstrundialog
true or false
Set to true to activate the "First run" dialog
firstrunmessagetitle
optional
Set the title label of the "First run" dialog
firstrunmessage
optional
Set the ext label of the "First run" dialog
offlinetitle
optional
Set the title label of the Offline dialog
offlinemsg
optional
Set the text of the Offline dialog
screen1
optional
Set the text label 1 of the Offline screen
screen2
optional
Set the text label 2 of the Offline screen
buttontext
optional
Set the text label of the Try again button
activateratemyappdialog
true or false
Set to true to activate the "Rate this app on App Store" dialog
activatefacebookfriendsdialog
true or false
Set to true to activate the "Follow on Facebook" dialog
becomefacebookfriendstitle
optional
Set the title label of the "Follow on Facebook" dialog
becomefacebookfriendstext
optional
Set the text label of the "Follow on Facebook" dialog
becomefacebookfriendsyes
optional
Set the text label of the "Yes" button of the "Follow on Facebook" dialog
becomefacebookfriendsno
optional
Set the text label of the "No" button of the "Follow on Facebook" dialog
becomefacebookfriendsurl
optional
Set the URL of your Facebook fan page (e.g., "https://facebook.com/OnlineAppCreator/")
imagedownloadedtitle
optional
Set the title label of the "Image saved to your photo gallery" dialog box
imagenotfound
optional
Set the title label of the "Image was not found" dialog box
statusbarbackgroundcolor
optional
Set the background color of the iOS status bar
usemystatusbarbackgroundcolor
true or false
Set to true to activate the custom status bar background color
statusbarcolor
optional
Set the text color of the iOS status bar
usemystatusbarcolor
true or false
Set to true to activate the custom status bar text color
AdmobBannerID
optional
Insert your AdMob ID for banner ads
AdmobinterstitialID
optional
Insert your AdMob ID for interstitial ads
showBannerAd
true or false
Set to true if you want to show AdMob banner ads
showFullScreenAd
true or false
Set to true if you want to show AdMob interstitial ads after X website clicks
showadAfterX
optional
Define number X to show an AdMob interstitial ads after each X (e.g., 10) website clicks
ShowExternalLink
optional
Set to true to register an iOS-wide URL scheme (like WebViewApp://) to open links in WebView app from other apps; example format: WebViewApp://url?link=https://www.google.com (would open google.com in WebView app).
ShowNotificationLink
optional
Set to true to activate OneSignal URL deeplinking functionality
sharingText
optional
Set the Sharing text of Share API (triggered by share://)
sharingURL
optional
Set the Sharing URL of Share API (triggered by share://)
kPushEnabled
true or false
Set to true to activate the OneSignal push functionality (this variable can be found in Constant.swift file)
kPushEnhanceUrl
true or false
Set to true if you want to extend WebView Main URL requests by ?onesignal_push_id=XYZ (this variable can be found in Constant.swift file)
kPushReloadOnUserId
true or false
Set to true if WebView should be reloaded after receiving the UserID from OneSignal (this variable can be found in Constant.swift file)
AppBundleIdentifier
optional
Set the App Identifier in order to activate In-App Purchase API (details can be configured in App Store Connect; this variable can be found in Constant.swift file)
IAPSharedSecret
optional
Set the App Secret in order to activate In-App Purchase API (details can be configured in App Store Connect; this variable can be found in Constant.swift file)
remainSplashOption
optional
Set to true if you want to display the Splash Screen until your page was loaded successfully
cssString
optional
Set any CSS classes to inject them into the HTML rendered by the WebView. Leave empty to not inject custom CSS into your webpage when accessed in WebView



Optional) Advanced setup of the Android project

Interested in advanced and further setup of your delivered Android project? Sure – just open Config.java take advantage of these, optional built-in configuration options:

HOST
required value
Your domain host without https:// or http:// prefix (e.g. "www.example.org")
HOME_URL
required value
Your full WebView URL (e.g. "https://www.example.org/app.html") which should be loaded in the WebView
USE_LOCAL_HTML_FOLDER
true or false
Set to true to use local "index.html" HTML file instead of remote WebView URL
USER_AGENT
optional
Define a customized UserAgent for web requests (or leave it empty to use the default Android UserAgent)
OPEN_EXTERNAL_URLS_IN_ANOTHER_BROWSER
true or false
Set to true to open all external hosts in an external browser (outside your app)
CLEAR_CACHE_ON_STARTUP
true or false
Set to true to clear the WebView cache on each app startup and do not use cached versions of your web app/website
IS_DEEP_LINKING_ENABLED
true or false
Set to true to enable deeplinking
SPLASH_SCREEN_ACTIVATED
true or false
Set to true to activate the splash screen
SPLASH_TIMEOUT
number value (seconds)
Set the splash screen timeout in milliseconds
SHOW_FIRSTRUN_DIALOG
true or false
Set to false to disable the First Run Dialog
SHOW_FACEBOOK_DIALOG
true or false
Set to false to disable the Follow On Facebook Dialog
SHOW_RATE_DIALOG
true or false
Set to false to disable the Rate This App Dialog
RATE_DAYS_UNTIL_PROMPT
number value (days)
Set the minimum number of days to be passed after the application is installed before the "Rate this app" dialog is displayed
RATE_LAUNCHES_UNTIL_PROMPT
number value (launches)
Set the minimum number of application launches before the "Rate this app" dialog will be displayed
FACEBOOK_DAYS_UNTIL_PROMPT
number value (days)
Set the minimum number of days to be passed after the application is installed before the "Follow on Facebook" dialog is displayed
FACEBOOK_LAUNCHES_UNTIL_PROMPT
number value (launches)
Set the minimum number of application launches before the "Rate this app" dialog is displayed
FACEBOOK_URL
value (URL)
Set the URL of your Facebook site
PUSH_ENABLED
true or false
Set to true to activate OneSignal Push (set OneSignal IDs in the build.gradle file)
PUSH_ENHANCE_WEBVIEW_URL
true or false
Set to true if you want to extend URL request by ?onesignal_push_id=XYZ (set the OneSignal IDs in the build.gradle file)
PUSH_RELOAD_ON_USERID
true or false
Set to true if WebView should be reloaded when the app gets a UserID from OneSignal (set the OneSignal IDs in the build.gradle file)
SHOW_BANNER_AD
true or false
Set to true if you want to display AdMob banner ads (set the AdMob IDs in the strings.xml file)
SHOW_FULL_SCREEN_AD
true or false
Set to true if you want to display AdMob fullscreen interstitial ads after X website clicks (set the AdMob IDs in the strings.xml file)
SHOW_AD_AFTER_X
value (website reloads)
Set the number X of website clicks for AdMob interstitial ads (set the AdMob IDs in the strings.xml file)
PURCHASE_LICENSE_KEY
value (API Key)
Set the Google Play In-App Purchase Key (receive it from Google Play Developer Console)
PURCHASE_ITEM
value (Name)
Set the Purchase Item Name ID (same as in Play Store Developer Console)
HIDE_ADS_FOR_PURCHASE
true or false
Set to true to hide AdMob ads after successful In-App Purchase


Open strings.xml file to edit app name & text strings:



Open dimens.xml file to modify text formatting:




Open colors.xml file to edit colors of status bar and loading sign/loading indicator.


iOS: Modify iPhone X/XS/XS Max Safe Area size

Depending on your web app design, the lower menu bar may be positioned incorrectly on the iPhone X/XS/XS Max due to the safe area which replaces the Home button on these devices. The good news is that your app allows resizing the viewport height easily. Please search for this code snippet part (STRG+F) in WebViewController.swift file where you can set the border value to any desired value like 10, 20, 30, ...:

Resize Safe Area on iPhone X/XS/XS Max


iOS & Android: HTML5 Geolocation

HTML5 Geolocation will work by default. On iOS devices, Geolocation is available for https-sites only since iOS 10, so please make sure to use a web app URL starting with https:// instead of http:// when using location requests. Demo: https://www.w3schools.com/html/html5_geolocation.asp


iOS & Android: Push Notifications via OneSignal & JavaScript API

Option 1: Use Local Push Notification JavaScript API

You can insert a piece of code (JavaScript) in your website, to define a push notification, which can be shown after your app was closed (while scheduling it during the app is open). This works without OneSignal configuration at all.

<script>
var seconds = 120; //seconds from now on
var message = "It is Happy Hour now! Check it out!"; //the message
var button = "Open App"; //the text of the button
window.location.href = "sendlocalpushmsg://push.send?s="+ seconds +"=msg!"+ message +"&!#"+ button +"";
</script>

It could be used for different situations (countdowns, happy hours, specific reminders, ...).
To cancel all scheduled local push notifications run:
    <script>
    window.location.href = "sendlocalpushmsg://push.send.cancel";
    </script>

Option 2: Use OneSignal Remote Push Notifications

On iOS, you will need to add an iOS Push Certificate before submitting your app to the App Store. On Android, you can skip this step.



You can send push notifications now:



If you want to use OneSignal URL Deeplinking (opens a specific URL when clicking on your notification), please add the desired URL with a custom field called url:


Do you want to get each individual user ID on your server for further processing and individual user push messages? Just activate the „kPushEnhanceUrl“ option in Constant.swift (on iOS) or Config.java (on Android) in order to append ?onesignal_push_id=XYZ to your WebView URL. If your WebView URL is https://www.example.org, your app will call https://www.example.org?onesignal_push_id=XYZ instead. Only your FIRST URL request will get that GET variable, so save it in a session or in a cookie to access it on your linked pages.




iOS & Android: Image, PDF and Music file downloader API


Save images to the camera roll of the user by calling links with savethisimage://?url= prefix:

<a href="savethisimage://?url=IMAGE URL HERE">Link</a>

Save PDF files using iOS "Open with..." app dialog by calling links with .pdf suffix:

<a href="http://www.example.org/file.pdf">Link</a>

Save Music files by calling links with .mp3, .mp4 or .wav suffix:

<a href="http://www.example.org/file.mp3">Link mp3</a>
<a href="http://www.example.org/file.mp4">Link mp4</a>
<a href="http://www.example.org/file.wav">Link wav</a>

Call this link to reset your app (by clearing all cookies and cache):

   <a href="reset_app://">Link</a>

WeSetupYourWebViewApp allows configuring a link scheme like webviewapp:// which can be triggered from the Mail app, Safari app, ... and opens the attached link in your iOS WebView app. Please change the scheme to your own app name (like your-app-name:// instead of webviewapp://) in Info.plist:

Configure your WebView app on iOS

Afterward, activate the ShowExternalLink option in WebViewController.swift file:

Universal Links allow a lot of stuff when it comes to WebView apps

Done! :) Example format: webviewapp://url?link=https://www.google.com (would open google.com in your WebView app).


WeSetupYourWebViewApp allows configuring a link scheme like www.example.org/link= which can be triggered from Mail app, browser apps, ... and opens the attached link in the Android WebView app. Please change the scheme to your own app name (like www.your-domain-here.org/link= instead of www.example.org/link=) in AndroidManifest.xml. Afterward, activate the IS_DEEP_LINKING_ENABLED option in Config.java file. Done! :)

Example format: http://www.example.org/link=http://www.google.com (this link would open www.google.com in WebView app).


iOS & Android: App Sharing Dialog

Your app allows triggering a native App Sharing Dialog dialog (WhatsApp, SMS, Mail, ...) by calling shareapp:// links:

<a href="shareapp://">Share app</a>

On iOS, it's required to configure the Sharing parameters in WebViewController.swift file before using this kind of dialog:

Create a native Sharing dialog easily


iOS: In-App Purchases

Your WebView app is able to buy App Store In-App Purchases. In the first step, enter your In-App Purchase Bundle ID in IPAViewController.swift and IPAHelper.swift files:
In-App Purchases allow you to charge your users directly from the WebView apps on iOS and Android


Afterward, just insert the App Store Connect details of your In-App Purchase Product in Constant.swift file:

Setting up an In App Purchase can be so easy

Afterward, just link to this kind of URL:
<a href="inapppurchase://">Buy In-App Purchase</a>


Android: In-App Purchases

Your WebView app is able to buy Google Play In-App Purchases. Please insert the license key of your In-App Purchase Product in Config.java file:

Easily configure an In-App Purchase Product in your Web View app

Afterward, just link to this kind of URL:
<a href="inapppurchase://?successful_url=https://www.google.de">Buy In-App Purchase</a>


Publish your app

Publish your WebView apps to iOS App Store & Google Play
Yay, you are ready for the App Store/Play Store submission of your web app! :) App Store/Play Store approval works in most cases without any problems but highly depends on the content you provide in your app as WeSetupYourWebViewApp does not provide content by itself. Please make sure to submit an app using a website/web app that behaves like a mobile app (for example, by using responsive design). Make sure that the content does not contradict the legal requirements of the Apple/Google Developer Programs. Use different link colors than standard HTML colors for better user experience.

Tutorial: How to Submit Your App to the App Store
Tutorial: How to Submit Your App to the Play Store

If Apple or Google rejects your app, please use Apple Resolution Center or the Google Play Developer Support to explain the app feature in general (like "Our app enables our existing users to login in/use our products on their handheld device/....). If Apple still rejects your app, we can offer you a full refund of the iOS/Android set up order fee. Just let us know by claiming within 14 days after purchase.

Congrats to your App Store/Play Store app! :)


Credits / License

All rights (e.g. of images) belong to their respective owners. The provider of this source code is WeSetupYourWebViewApp.com c/o jocapps GmbH - registered in Germany - and is not affiliated with Apple or Google. IOS is a registered trademark of Cisco and used under license by Apple Inc. iPad, iPhone, iPod, Xcode, and Xcode logo are registered trademarks of Apple Inc.




Designed and coded with lots of love and coffee in Germany. Made for everyone and made with 100% renewable energy. #MakeLoveNotWar

© 2019 WeSetupYourWebViewApp.com [Privacy Policy | Legal Disclosure]