UniWebView - Integrating WebView to your mobile games in a simple way

If you are seeking a reliable, bug-free and effective webview plugin for Unity mobile games, now you are in right place.

What is UniWebView?

UniWebView is to help you using WebView easily on iOS and Android platform (WP8 support is under development). You can set up a web view and embed web content in your game with less than 10 lines of code. There is also a clean and simple interface for you to interact between the game and webview.

Main features:

• A native webview (UIWebView for iOS, WebView for Android). Compatible with html5, css3 and javascript.
• Send a message from webpage to Unity, using a specified url scheme. You can control the game flow and run your script code by clicking a url in the web page. By this strategy, you can implement a dynamic workflow to change your game logic on air.
• Excute and eval javascript defined in Unity game or webpage.
• The size and apperence of webview is customizable. Users can keep your game scene visble and running even when they interacting with web page.
• Play youtube video and other media.
• All source code of C# script and native plugin is included for a reference, with detailed documentation.
• Easy debug for Unity Mac Editor. There is no need to build and run again and again in your device. You can preview and interact with the webview just in editor. (Supporting for Windows Editor is on the way)

Supporting
The code itself is well documented. There is also online user manual, script reference and supporting forum for you. Use the link below and feel free to visit them and ask if you have any question.

• Home Page of the asset - http://uniwebview.onevcat.com
• Online Manual - http://uniwebview.onevcat.com/manual.html
• Script Reference - http://uniwebview.onevcat.com/reference/class_uni_web_view.html
• Support Forum - https://groups.google.com/forum/#!forum/uni_webview or this thread.

Get it from unity asset store and make mobile web view easy today!

Asset Store Link - https://www.assetstore.unity3d.com/#/content/12476

View attachment 74482

 

The first big update comes out, with these fix and new features:

New: A better and more intersting demo scene to explain how to make the UniWebView work.
New: Add Youtube video playing support for Android.
New: Add a tool bar to iOS.
New: The users can use back button (Android) or a native toolbar (iOS) to close the webview now.
New: Add an event to control whether the webview can be closed or not.
Fix: A problem which cause the keyboard not working on Android.
Fix: A rotation issue which cause the webview can not rotate correctly in iOS.
Fix: Update the demo scene to make it clearer and more interesting.

If there is any new features you need, please let me know. This plugin is under rapid development now and I will choose some more to add and try to make it the best web view solution for Unity3D mobile games.

 

It seems to be a very interresting asset !

You said it will be later available on WP8, Do you think it will works too on Windows RT ?

 

Hi, Ohms. In fact I am new to Windows development (including WP and Windows), so I can not say now if I can finish it shortly. The first thing I want to do is making it available in Unity Windows Editor. And then I will begin to implement the WP support.

 

Thanks for your answer. I've just bought this asset on the store. I will use it in an Android and iOS application for the moment.

I hope in the future you could implement a Windows Phone and Windows RT release too !

 

Just bought this and I'm very happy with it so far!
Tested on both Android (Nexus 7) and iOS (iPad 3) and I have a question regarding insets.
You already provide an helper class (UniWebViewHelper) to know if the device has a retina display on iOS. I'm not familiar with Android various screens but is there something equivalent? Setting the insets in pixel on iOS doesn't work on retina displays so can I expect it to break on Android "retina" displays as well?

Also, I would suggest adding a function to the helper class to convert from pixel to inset that would manage all this in a platform independent fashion.

Thanks a lot!

 

Hi, Dgizusse. Thanks for the reply.

As I know, the Android devices is not using the same way to implement retina effect as what iOS does. Unity will always use pixel of the screen to decide position or size. The pixel is exactly what it is on Android devices, while on iOS, the pixel and point means different things. Because of Android and Unity are using the same strategy, so there is no need to apply the similar helper method to Android.

I will check it again and add some convenient method in update version, to make it easier to specify the position and size.

 

Have bought and use this plugin, works great..

Feature wishes
- Can detect Http status code, so we can decide to open the webview or not.
- More responsive webview if possible

Thanks for the great plugin.

 

Version 1.2.0 is released! Rewrite most of the Android plugin code to make it more reliable on Unity 4.3. Here is a detailed release:

Fix: Rewrote all the Android native code, to make it working properly under Unity 4.3.
Add: A spinner is added to webview, which will show when the webpage is under loading. The spinner is on by default, if you don't want it, you can set it not show by the SetShowSpinnerWhenLoading method of UniWebView.
Add: We also added a text label in the spinner, to show some information to your users.
Add: Added an OnEvalJavaScriptFinished event for eval js script. Now EvaluatingJavaScript will not return a value, but raise the event. So you can use the same API for both iOS and Android.
Add: Local file load for Android 4.x.
Fix: A problem which may cause unity game scene disappeared when game goes to background with webview opened in some old Android devices.

 

Hello. I buy your pluggin but not understand one thing.

How I know what page the user is located.
I need to run authorization on example.com. If authentication was successful, the site makes a redirect to example.com?token=123123123 and this token I need assume.

I try OnReceivedMessage but this method only works only with uniwebview:// links.
I try log Load(string aUrl) method but it is only called when loading the first page.

P.S. example.com not my.

 

Hi, echeg. Thanks for your reply.

Normally, in a auth process, there should be a chance to specify a customized call back URL(maybe in the API console or somewhere equally on that site). If there is a setting in example.com, you can set it begin with scheme "uniwebview://" and get an event in the event listener. But if there is no chance to set a callback URL or it is not the standard auth, I am afraid you can not get it work in this way now.

An event when loading page is an in-plan feature, which will definately satisfy. Because you are in need of it, I will implement it first! I will add it as soon as possible, and could you please send me your invoice number by mail, so I can send you the update version directly when it is ready.

 

Yes I can write my callback url. But if I do, my application will not be considered for mobile devices. It's very strange, but for mobile applications as a callback url, I must write redirect_uri=https://oauth.vk.com/blank.html
vk.com use OAuth 2.0 (Implicit Flow). - docs in http://vk.com/dev/auth_mobile

But you gave me the idea that maybe I can abandon moblie\standalone permissions =)) And use "uniwebview://" for callback.

 

conflict file AndroidManifest.xml

what can i do for Work both ?

thanks.

 

Hi, skynovice
Thanks for your reply.

May I know what is the main activity you are using now? You can refer to Merge AndroidManifest.xml section of the online manual here (http://uniwebview.onevcat.com/manual.html). And there is also a step to step tutorial for you if you need to solve potential conflict with other plugin (http://uniwebview.onevcat.com/recompile.html) . If you have any other problems or failed to solve it yourself finally, a mail is welcome and I will see what I can do for you.

 

Hi onevcat,

Could you give me a clue how did you fixed the scene-disappear problem in version 1.2.0?

Your 1.2.2 version works fine in my device, but I am experiencing the scene-disappear problem after modifying your AndroidPlugin class not to inherit from UnityPlayerActivity(UPA).

- I made MyMainActivity inheriting from UPA (for InAppBilling and Facebook-Unity-SDK implementation)
- This class calls every your activity-overrided function such as 'onResume' or 'onActivityResult' appropriately, I think)

But, my app doesn't update the area except webview-area (disappear-problem?) after returning from background.

Or, Can I download old versions (1.2.0 and the previous version) for comparing the difference.

 

I changed the delay time onResume function (1->100) and solved the problem.

For your interest, my disappear-problem occurs when activating the app on selecting the app from the running app-list

(press home button awhile, and you can see running app-list)

the problem doesn't occur when activating app from background by touching app-icon in home-launcher

 

Hi, thanks for the report! I will check it and update soon. There is always surprise on Androids.. Anyway, thank you!

 

Hi onevcat,

I have a couple of problems.

First.
I want to hide already loaded and showed html page and to do that I'm using UniWebView.Dismiss() and, as a result, page dissapears, BUT when I'm trying to show it again (for that I'm using UniWebView.Show()) nothing happens =(

Second.
I want to see a GUI object over uniwebview-page. Problem is that uniweb overlays all objects at the screen (screenshot attached). Does this problem have a solution?

 

Hi, Ivan.

1. The "Dismiss" method means close the web view, instead of just hide it. I will add a "Hide" interface in the next update, and for now, I guess you can set the top and left insets of the web view to a very large number to hide it. eg. _webView.insets = new UniWebViewEdgeInsets(99999,99999,1,1);
And when you want to show it again, just set the insets to a normal value.

Edit: It is not true for the gray text. I checked the code just right now and it turned the documentation is correct. The Dismiss() method was designed to hide the web view, not closing it. So I decide not to add another "Hide" method but change a bit of current "Dismiss" and release an update to make everything works as designed. Just in case, if you wish to close the web view, you should Dismiss it and then use Destroy on the UniWebView component to release the memory properly. Please refer to the Demo code for more.
-----
2. It is not possible to show a unity GUI over the web page, because the web view is created by native code and added above the whole unity scene. A possible solution is you can set some part of your web page transparent, and then use SetTransparentBackground method to set the web view background transparent. You can then see and interactive with the GUI in Unity through the web view.

 

Oh!) Thanks for so prompt and helpfull reply!) I've just read a discription about "Dismiss" method in reference (http://uniwebview.onevcat.com/refer...b_view.html#aec76c93b91437d5c2c6bc33d59ee9183) and thought that this method just hides the web view.

 

Oops, sorry for that misleading. I am updating it as well. Thank you!

 

Hi again, Ivan.

I checked the code just right now and it turned the documentation is correct. The Dismiss() method was designed to hide the web view, not closing it. So I decide not to add another "Hide" method but change a bit of current "Dismiss" and release an update to make everything works as designed. Just in case, if you wish to close the web view, you should Dismiss it and then use Destroy on the UniWebView component to release the memory properly. Please refer to the Demo code for more.

 

Hi onevcat!)

It is again about the Dismiss. I checked the last update and found a bit problem. The Dismiss() method hides the web view only visually. I mean, when I hide uniweb I cannot interact with other objects on the screen. Seems like uniweb still overlays all other objects. Does this method works correctly?

 

Oops, sorry for that. Fix it again soon!

 

Really Great Plugin,

Can you post some example videos to show potential buyers what is possible and some tutorials how to set up various scenarios.

Also it would be super nice if you could also include Win8 in a future update. This will make the plugin truly Universal for mobile web solution.

Cheers.

 

Hi!

Does this plugin also work on:
Webplayer
Standalone builds

Do you support a drggable/moveable webview?


I'm planning on running something like this in the treeview:
http://www.jstree.com/
Would that work?

 

Hi,

I´m an artist (0 coding knowledge) and using Playmaker to create my game, a webview is a part of the game design, there´s a chance to add Playmaker Actions in your package? If so I will buy this instantly. Thanks in advance!

 

@rocki Hi, thanks for your reply. I will consider make a tutorial video soon. For now you can find the manual and feature list on our official website: http://uniwebview.onevcat.com

Windows Editor and WP8 support is in plan and will be added later. Please keep an eye on it. Thank you

 

@krillmcrawl0 Thank you for your reply.

I am sorry but UniWebVIew is designed for mobile platform and right now there is no standalone or web player support.

For the drggable/moveable web view, for example the jstree, the answer is yes. You can open a mobile browser (Safari on iOS or Browser on Android) to try the jstree demo page. UniWebView will behave the same as the native does, because under hood UniWebView is using the same web view of system.

 

Hi @Zetax, thanks for you reply.

I don't have any experience on PlayMaker and right now have no idea about how to make a Playmaker Action for it. I will investigate it soon and to see what I can do.

By the way, if you only want to show a webpage and will do nothing complicate task about it, it is quite easy for you to integrate UniWebView to your game. We have prepared a prefab for you and all you need to do is input the url and configure it in the Inspector, and then call show on it. It could be simple even you have no coding knowledge. (And I guess PlayMaker can handle this kind of task too?)

 

@onevcat Ok thanks for the fast replay. I´ve checked the Playmaker forums and there´s a lot of ppl asking them about webview support, I think you should contact the Playmaker dev team and try integrate your awesome tool with Playmaker. You will have a boost on your sales for sure

http://www.hutonggames.com/

I´m buying your asset right now Keep the great work up!

 

can I just put a unity web player build inside web view?

 

Hi @Zetax, thanks for you your reply. Sure, I will take a look at it soon! If it is possible, I will implement it ASAP as well. Thank you.

 

Hi @rahuxx. I am sorry but it is not possible now. Unity web player build is requiring a plugin, while it is impossible to install the player plugin in the web view. So it seems no way to do it.

 

Hello,

Is it possible to set the User Agent string?

Thanks!

 

Hi, @shess . Thanks for your reply. Right now there is no interface for it in UniWebView, but it is quite easy to implement. May I know in which situation you want to change the user agent? So I can do it in a more accurate way.

 

Hi! I appreciate the quick response!

It isn't vital functionality, but is handy sometimes to sometimes inspect the user agent on the server side (though it can obviously be easily spoofed), as well as signaling that this is a mobile device.

 

hi onevcat,

admob subaltern. how to make admob upper?

thank you

 

Hi, sorry for the late response. You can add your admob banner again after showing the web view to make it upper. The order of adding these views above unity may cause the different overlap, if the view added later, it can show in upper.

 

Hi! I tried build applications for the Web player.
Assets/UniWebView/Script/UniWebView.cs(449,17): error CS0103: The name `UniWebViewPlugin' does not exist in the current context
But building for Android OK.

This plugin works with Web player applications?

 

Hi, @tim64

UniWebView is designed only for iOS and Android. You can not use it for web player. I fixed the compile error in the latest update version, you can download it from Asset store now and update it. The errors should go away when you export project for other platforms (But it will do nothing for a web player build yet).

 

I'm having troubles finalizing my implementation of this asset. I've successfully opened up a my target website, let it perform all necessary actions..which works as described. The problem that i'm encountering is getting the Messages back to the unity platform. The only way that i can force the data to be sent back to the game is to provide a link on the page that initiates a uniwebview://results?close=1&data1=bleh - which requires the user too click the link. This isn't very clean to the user experience, and would be best if I could close the page once data is available. The last event I receive to unity is the "Load Completed" - it's not until the user clicks the link do i get the "Message Received".

I've tried all different variance in code to make this happen.. but have been unsuccessful. The last thought of mine is too register the "Complete" button within the php page to DOM and then send a javascript.getelementbyid('button').click(); to mimic a user clicking that button. Do you have any examples along these lines to accomplish my task. This is a Android device i'm developing against.

 

Hi, sorry for the late reply. May I know what kind of data or when you want to call back to Unity. If you mean you want do it without user's interaction, you can just redirect the url after some time to a "uniwebview://" link, or use the javascript location.href wherever you want. The web view will handle the loading url begin with uniwebview:// and the link click is just one way to trigger it.

 

Hi,
UniWebView is only used to facilitate the retrieval of an OAuth2 auth code on Android, which it does SPLENDIDLY!

The problem I'm running into, is that I cannot close the browser and return to the Unity view once this is done! I am successfully receiving an event in my Unity Activity that tells my UniWebView to Hide() (and I can see this being called), but after disappearing for a fraction of a second, the web page pops back up!

The only way I can return to the app is by clicking the back button, which is not terribly intuitive for the user and prevents us from obtaining the streamlined flow we are looking for. I have tried hiding the web view, stopping it,] disabling it, and even doing all 3 of these (in that order) without success on my Nexus 7. I thought maybe this was an issue with my AndroidManifest, but I followed your directions to edit that. Can you help me figure ot what is going on here? I will post my androidmanifest below if that helps.

Thanks!

Code (csharp):

1. <?xml version="1.0" encoding="utf-8"?>
2. <manifest
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     package="com.unity3d.player"
5.     android:installLocation="preferExternal"
6.     android:theme="@android:style/Theme.NoTitleBar"
7.     android:versionCode="1"
8.     android:versionName="1.0">
9.     <supports-screens
10.         android:smallScreens="true"
11.         android:normalScreens="true"
12.         android:largeScreens="true"
13.         android:xlargeScreens="true"
14.         android:anyDensity="true"/>
15.  
16.     <application
17.         android:icon="@drawable/app_icon"
18.         android:label="@string/app_name"
19.         android:debuggable="true">
20.         <activity android:name="com.onevcat.uniwebview.AndroidPlugin"
21.                   android:label="@string/app_name">
22.                   android:hardwareAccelerated="true"
23.             <intent-filter>
24.                 <action android:name="android.intent.action.MAIN" />
25.                 <category android:name="android.intent.category.LAUNCHER" />
26.             </intent-filter>
27.             <meta-data android:name="unityplayer.UnityActivity" android:value="true" />
28.             <meta-data android:name="android.app.lib_name" android:value="unity" />
29.             <meta-data android:name="unityplayer.ForwardNativeEventsToDalvik" android:value="true" />
30.         </activity>
31.         <activity android:name="com.onevcat.uniwebview.UniWebViewCustomViewActivity"
32.             android:label="@string/app_name"
33.             android:hardwareAccelerated="true"
34.             android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"
35.             android:configChanges="fontScale|keyboard|keyboardHidden|locale|mnc|mcc|navigation|orientation|screenLayout|screenSize|smallestScreenSize|uiMode|touchscreen">
36.             <meta-data android:name="android.app.lib_name" android:value="unity" />
37.             <meta-data android:name="unityplayer.ForwardNativeEventsToDalvik" android:value="true" />
38.         </activity>
39.             <activity android:name="com.prime31.GoogleIABProxyActivity" android:configChanges="orientation"></activity>
40. </application>
41.  
42.         <uses-permission android:name="android.permission.INTERNET"/>
43.         <uses-permission android:name="com.android.vending.BILLING"/>
44.  
45. </manifest>
46.  

 

Any news about Win Phone support?

 

Is it possible to get the source html from the current webview? (using www to get the source isnt convenient for my uses)

 

Hi, you can do it by calling a javascript on the web view. Just like this:

_webView.EvaluatingJavaScript("document.documentElement.outerHTML");

and then you can expect the html result in the OnEvalJavaScriptFinished callback.

 

Hi.. terribly sorry for the late reply. The forum did not notify me until today...

It seems ok for the manifest file. The possible reason I can think of is, are you calling Show() method in some callback of web view? Maybe in didLoad callback or somewhere else. Because what Hide() doing is making the web view invisible, it does not stop the loading of web view. So if you are doing Show in any where else, it might be called even after it gets hide.

You can try to remove the callback listener, or destroy the web view if you do not need it anymore.

 

Hi, still working on it Get quite busy with other projects now, and the WP development is not as easy as I thought.

I will try to make it out quicker.

 

Hey, got it working, thanks!
Is it possible to render the webview to an texture?

Like here,

http://www.felixjones.co.uk/neo website/Android_View/

or

http://anuraagsridhar.wordpress.com...t-matter-any-android-view-directly-to-opengl/

or

http://stackoverflow.com/questions/...iew-to-bitmap-html5-javascript-callback-issue


?