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

Was this helpful?

Yes No

Comments

  1. Replies
    1. Apologies, it wasn't here because it was contributed by another user, however I've just released Version 8, check it out! :)

      Delete
  2. Help the the use agent block isn't working. The Page doesn't load

    ReplyDelete
  3. WebView desktop site Request Please Help

    ReplyDelete
    Replies
    1. Hi there,

      I will keep that in mind for a future update if this functionality is possible to implement.

      Delete
    2. Good news! I've just released Version 8 which includes this feature, check it out! :)

      Delete
  4. Thank You for your feedback, I will keep this in mind for a future update.

    ReplyDelete
  5. My name is BEnito Piñeiro,
    I installed in my APP INVENTOR your webviewtools version 6 , and i had thi s error:
    java.lang.NoSuchMethodError: android.webkit.WebSettings.setMediaPlaybackRequiresUserGesture

    what i can do ?

    ReplyDelete
    Replies
    1. Hi Benito,

      If you can PM me your issue on Kodular and what code you are using I'll add it to my list of things to investigate, you can find me at https://community.kodular.io/u/lukegackle/summary

      Delete
  6. blob:https://www.remove.bg/57451952-e601-40b9-8294-d7c1925272ed this type URL uri download Not sporting in app please tell me how to fix this type error

    ReplyDelete
    Replies
    1. Hi Mohammed,

      I'm not sure how easy this will be to integrate, however I will add it to the list for version 9, if it gets added I will reply to your comment here!

      Delete
  7. SetTextZoom is not working with kodular webviewer .. I really need this in my apps

    ReplyDelete
    Replies
    1. Hi Peter,

      If you can PM me your issue on Kodular and what code you are using I'll add it to my list of things to investigate, you can find me at https://community.kodular.io/u/lukegackle/summary

      Delete
  8. Good news! I've just released Version 8 which includes this feature, check it out! :)

    ReplyDelete
  9. hello add web video full screen Thankss

    ReplyDelete
    Replies
    1. Hi Gezgin, I'm not sure if this will be possible as it requires hardware acceleration to be enabled in the android manifest, however I will add this to my list of future improvements.

      Thanks for the feedback :)

      Delete
  10. Terima kasih informasinya dan izin download extension. :-)

    ReplyDelete
  11. Hello, Can I Ask how to read the value of data from webviewer? thank you

    ReplyDelete
  12. Bro Why desktop mode is not working in version 9

    ReplyDelete
  13. Please Add OnRequestnew window so we can opn any popup ads or web url in other tab too.Thanks 👍

    ReplyDelete
  14. Hi Luke, I can get the setuseragentstring to "take" when in companion, but not with a compiled version. Have tried clocks here and there to no avail. Any suggestions ? Thanks Tim

    ReplyDelete
  15. Every think is Good but Deep link like Whatapp, Contect, Email is not working If new verison Add this feature then its Awesome

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete

Post a Comment

Popular Posts

Thunkable Components