WebViewTools Extension for App Inventor

WebView Tools is an extension which provides a range of methods for adjusting settings for a WebViewer component in App Inventor. With 25 different blocks available this post won't document every block in the extension, however, it will document the most popular blocks and the ways you could use them in your mobile apps.

Extension Usage

SetWebViewer

Before you use any of the methods in this extension you first must use the "SetWebViewer" block, this sets the WebViewer in the extension and will be the WebViewer that the extension will apply settings to.

RemoveWebViewer

When you are finished applying settings to a WebViewer you can use the RemoveWebViewer method to disassociate the WebViewer from the extension, this will also disassociate the WebViewer from the "OnPageFinished" event, if working with multiple WebViewers if you don't remove the WebViewer the "OnPageFinished" event will fire for all WebViewers.

Methods

SetUserAgentString

This method allows you to set the user agent string for the WebViewer to use when loading websites, this can be useful if you need to stop websites detecting whether the device is a mobile device or not.

SetBuiltInZoomControls

This method allows you to disable a WebViews built-in zoom mechanisms, note this will not disable the zoom controls in the WebView, but it will disable zoom gestures such as pinch to zoom.

SetAppCacheEnabled

This method can be extremely useful if you are building web-based mobile apps, if your mobile website makes use of HTML5's AppCache then you can use this block to enable AppCache in the WebView enabling your users to view your app even when offline.

RunJavaScript

This method allows you to execute JavaScript in the current Web Viewer.

SetOverrideURLChange

Sets whether the URL should be checked prior to loading, enabling this will stop the page from loading if it does not contain the specified URL in the destination URL.

OnPageFinished

This event can be used to detect page changes in your applications, the event fires each time a page finishes loading, note if you are using this extension with multiple WebViewers this event will still fire if you set the current WebViewer to a different WebViewer in your app, you need to use the "RemoveWebViewer" block to disassociate the WebViewer from the event.

OnJavaScriptOutput

This event can be used to get the output after executing some JavaScript using the "RunJavaScript" block, note that this event will not fire on versions of Android prior to KitKat.

Example

In the following example, I cover a couple of the methods you can use, not all of the methods are easy to demonstrate and there are too many methods to cover in an example but this will cover at least a few of the different methods available in this extension.

The following example allows you to play with a couple of the different methods by using buttons to either enable or disable functionality. When you set the WebViewer, you get an alert when a page finished loading, you can disable zoom gestures in the WebView and get the User-agent string.

All the blocks used in this example, click the image to see a bigger version.

New in Version 5 Popup Handling

In version 5 the extension is able to handle popups which are usually needed in OAuth login flow. Popups are especially important in OAuth login used in a lot of websites (e.g., www.feedly.com). The popups in this project open in a dialog and can be dismissed by a close button or pressing Back or if the popup window closes itself (like what happens on most login authentication flow).

Example Block diagram:

Thanks to Haider Alwasiti

Download Here

WebViewTools version 9: WebViewTools Version 9.aix

WebViewTools version 8: WebViewTools Version 8.aix

WebViewTools version 6: WebViewTools.aix

WebViewTools Version 5: WebViewTools.aix - Thanks to Haider Alwasiti

Download the WebViewTools Example project here: WebViewToolsExample.aia

WebViewTools Version 4: WebViewTools.aix

Limitations

-While it is possible to disable zoom gestures in this extension all of the methods I tried to use to disable the onscreen zoom controls didn't work. There doesn't look like there's a good way to achieve this at this time.

Version History

Version 9

-Fixed bugs with RemoveWebView and override functions

-Added OnProgressChanged event

Version 8

-Added GetSourceHTML

-Added GotHTMLSource

-Added SetDesktopMode

-Added OnReceivedHttpError

-Added OnReceivedError

Version 7

Thanks to ady_irawan for contributing the following changes into Version 7

- Pop-up now has 2 buttons.

- Changed the method click on the popup, so that the popup is not immediately closed when the button is clicked. This method will helps the Back Button work properly.

- Added the Back button, to navigate Back or close the popup if Back is not possible.

- Added the “OnPopupBackPressed” event

- Added the “OnPopupDismissed” event

- Added the “DismissPopup” function

Version 6

Due to user request I have added the following functions:

-SetMediaPlaybackRequiresUserGesture

-GetMediaPlaybackRequiresUserGesture

Version 5

Thanks to Haider Alwasiti for contributing the onCloseWindow method which now enables the ability to load webpages with popups such as google oauth

Version 4

-Added "SetOverrideURLChange"

-Added "SetSupportMultipleWindows"

Version 3

-Added RunJavaScript

-Added OnJavaScriptOutput

Version 2

-Added "OnPageFinished" event

-Added "RemoveWebViewer"

-Removed "SetAppCachePath" - Now internally set to the app's default internal cache directory.

-Removed "SetDisplayZoomControls" - In testing, this method made no difference to showing or hiding onscreen zoom controls.

Version 1

-Added "SetUserAgentString"
-Added "SetWebViewer"
-Added "GetUserAgentString"
-Added "SetBuiltInZoomControls"
-Added "SetJavascriptEnabled"
-Added "SetAppCacheEnabled"
-Added "SetAppCachePath"
-Added "SetDatabaseEnabled"
-Added "SetTextZoom"
-Added "SetGeolocationEnabled"
-Added "SetInitialScale"
-Added "SetLoadWithOverviewMode"
-Added "SetBlockNetworkImage"
-Added "SetBlockNetworkLoads"
-Added "SetAllowFileAccess"
-Added "SetCacheMode"
-Added "SetJavascriptCanOpenWindowsAutomatically"

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY