CustomWebView : An extended form of Web Viewer

vknow360 · May 29, 2020, 9:41am

Download latest version here

1.Introduction

It is an extended version of web viewer with more customization and flexibility. Its customization and additional features make it different and much more better than Web Viewer from the perspective of App Developer as well as User.
Note: CustomWebView can work only on devices running on at least Android 5.0

Latest Version : 12
Required Api : 21
Released: 2020-05-12T18:30:00Z
Last Updated: 2023-03-08T18:30:00Z

2.Features

More customization options than normal web viewer
Long Click event
New window request event
Close window request event
Load local files and content using Html and Js
Find words and phrases in webview
Evaluate Js and get result
Upload files to websites
Error occurred event
Get output from console
Form Resubmission event
Get content height
Get SSL Certificate of website
Get/Set cookies for particular url
Event for permission(s) request and grant permission(s) manually
Print web content
A wide range of tools for working with JavaScript
Accepts external links/Adds your app in browsers list when you use BrowserPromptHelper extension
Download files using built-in download helper extension DownloadHelper
Scroll Changed event and function to scroll to particular position
Create and Remove webviews dynamically
Ad blocker
Full screen video feature (OnShowCustomView and OnHideCustomView)
Pause and Resume webview
Get internal history
Create webpage shortcuts
Download offline pages and load them without internet connection

3.Designer Properties

4.Blocks

5.Documentation

Events

AfterArchiveSaved	Event raised after 'SaveArchive' method.If 'success' is true then returns file path else empty string. _{success \| boolean filePath \| text}
AfterJavaScriptEvaluated	Event raised after evaluating Js and returns result. _{result \| text}
CookiesRemoved	Event raised after 'ClearCokies' method with result _{successful \| boolean}
FileUploadNeeded	Event raised when file uploading is needed _{id \| number mimeType \| text isCaptureEnabled \| boolean}
FindResultReceived	Event raised after 'Find' method with int 'activeMatchOrdinal','numberOfMatches' and 'isDoneCounting' _{id \| number activeMatchOrdinal \| number numberOfMatches \| number isDoneCounting \| boolean}
GotCertificate	Event raised after getting SSL certificate of current displayed url/website with boolean 'isSecure' and Strings 'issuedBy','issuedTo' and 'validTill'.If 'isSecure' is false and other values are empty then assume that website is not secure _{isSecure \| boolean issuedBy \| text issuedTo \| text validTill \| text}
GotPrintResult	Event raised after getting previus print's result. _{printId \| text isCompleted \| boolean isFailed \| boolean isBlocked \| boolean}
LongClicked	Event raised when something is long clicked in webview with item(image,string,empty,etc) and type(item type like 0,1,8,etc) _{id \| number item \| text secondaryUrl \| text type \| number}
OnCloseWindowRequest	Event triggered when a window needs to be closed _{id \| number}
OnConsoleMessage	Event raised after getting console message. _{message \| text lineNumber \| number sourceID \| number level \| text}
OnDownloadNeeded	Event raised when downloading is needed. _{id \| number url \| text contentDisposition \| text mimeType \| text size \| number}
OnErrorReceived	Event raised when any error is received during loading url and returns message,error code and failing url _{id \| number message \| text errorCode \| number url \| text}
OnFormResubmission	Event raised when resubmission of form is needed _{id \| number}
OnGeolocationRequested	Event raised when page asks for location access. Developer must handle/show dialog from him/herself. _{origin \| text}
OnHideCustomView	Event raised when current page exits from full screen mode
OnJsAlert	Event raised when Js have to show an alert to user _{id \| number url \| text message \| text}
OnJsConfirm	Tells to display a confirm dialog to the user. _{id \| number url \| text message \| text}
OnJsPrompt	Event raised when JavaScript needs input from user _{id \| number url \| text message \| text defaultValue \| text}
OnNewWindowRequest	Event raised when new window is requested by webview with boolean 'isDialog' and 'isPopup' _{id \| number isDialog \| boolean isPopup \| boolean}
OnPermissionRequest	Event raised when a website asks for specific permission(s) in list format. _{permissionsList \| list}
OnProgressChanged	Event raised when page loading progress has changed. _{id \| number progress \| number}
OnReceivedHttpAuthRequest	Notifies that the WebView received an HTTP authentication request. _{id \| number host \| text realm \| text}
OnReceivedSslError	Event for OnReceivedSslError _{errorCode \| number}
OnScrollChanged	Event raised when webview gets scrolled _{id \| number scrollX \| number scrollY \| number oldScrollX \| number oldScrollY \| number canGoLeft \| boolean canGoRight \| boolean}
OnShowCustomView	Event raised when current page enters in full screen mode
PageLoaded	Event raised when page loading has finished. _{id \| number}
PageStarted	Event indicating that page loading has started in web view. _{id \| number url \| text}
Swiped	Event raised when webview is swiped _{id \| number direction \| number}
WebViewStringChanged	When the JavaScript calls AppInventor.setWebViewString this event is run. _{value \| text}

Methods

AllowGeolocationAccess	Method for AllowGeolocationAccess _{allow \| boolean remember \| boolean}
CanGoBack	Gets whether this WebView has a back history item
CanGoBackOrForward	Gets whether the page can go back or forward the given number of steps. _{steps \| number}
CanGoForward	Gets whether this WebView has a forward history item.
CancelPrinting	Cancels current print job. You can request cancellation of a queued, started, blocked, or failed print job.
ClearCache	Clears the resource cache.
ClearCookies	Removes all cookies and raises 'CookiesRemoved' event
ClearFormData	Clears the form data of the webview Added by Xoma _{id \| number}
ClearInternalHistory	Tells this WebView to clear its internal back/forward list.
ClearLocation	Clear all location preferences.
ClearMatches	Clears the highlighting surrounding text matches.
ConfirmJs	Whether to proceed JavaScript originated request _{confirm \| boolean}
ContentHeight	Gets height of HTML content
ContinueJs	Inputs a confirmation response to Js _{input \| text}
CreateShortcut	Creates a shortcut of given website on home screen _{url \| text iconPath \| text title \| text}
CreateWebView	Creates the webview in given arrangement with id _{container \| component id \| number}
CurrentId	Returns current id
DismissJsAlert	Dismiss previously requested Js alert
EvaluateJavaScript	Asynchronously evaluates JavaScript in the context of the currently displayed page. _{script \| text}
Find	Finds all instances of find on the page and highlights them, asynchronously. Successive calls to this will cancel any pending searches. _{string \| text}
FindNext	Highlights and scrolls to the next match if 'forward' is true else scrolls to previous match. _{forward \| boolean}
GetCookies	Get cookies for specific url _{url \| text}
GetIds	Returns a list of used ids
GetInternalHistory	Get internal history of given webview. _{id \| number}
GetProgress	Gets the progress for the given webview _{id \| number}
GetScrollX	Return the scrolled left position of the webview
GetScrollY	Return the scrolled top position of the webview
GetSslCertificate	Gets the SSL certificate for the main top-level page and raises 'GotCertificate' event
GetWebView	Returns webview object from id _{id \| number}
GoBack	Goes back in the history of this WebView.
GoBackOrForward	Goes to the history item that is the number of steps away from the current item. Steps is negative if backward and positive if forward. _{steps \| number}
GoForward	Goes forward in the history of this WebView.
GoToUrl	Loads the given URL. _{url \| text}
GrantPermission	Grants given permissions to webview.Use empty list to deny the request. _{permissions \| text}
HideCustomView	Hides previously shown custom view
InvokeZoomPicker	Invokes the graphical zoom picker widget for this WebView. This will result in the zoom widget appearing on the screen to control the zoom level of this WebView.Note that it does not checks whether zoom is enabled or not.
LoadHtml	Loads the given data into this WebView using a 'data' scheme URL. _{html \| text}
LoadInNewWindow	Loads requested url in given webview _{id \| number}
LoadWithHeaders	Loads the given URL with the specified additional HTTP headers defined is list of lists. _{url \| text headers \| dictionary}
PageDown	Scrolls the contents of the WebView down by half the page size _{bottom \| boolean}
PageUp	Scrolls the contents of the WebView up by half the page size _{top \| boolean}
PauseWebView	Does a best-effort attempt to pause any processing that can be paused safely, such as animations and geolocation. Note that this call does not pause JavaScript. _{id \| number}
PostData	Loads the URL with postData using 'POST' method into active WebView. _{url \| text data \| text}
PrintWebContent	Prints the content of webview with given document name _{documentName \| text}
ProceedHttpAuthRequest	Instructs the WebView to proceed with the authentication with the given credentials.If both parameters are empty then it will cancel the request. _{username \| text password \| text}
ProceedSslError	Method for ProceedSslError _{proceed \| boolean}
RegisterDeepLink	Registers to open specified link in associated external app(s) _{scheme \| text}
Reload	Reloads the current URL.
RemoveWebView	Destroys the webview and removes it completely from view system _{id \| number}
RestartPrinting	Restarts current/previous print job. You can request restart of a failed print job.
ResubmitForm	Whether to resubmit form or not. _{reSubmit \| boolean}
ResumeWebView	Resumes the previously paused WebView. _{id \| number}
SaveArchive	Saves the current site as a web archive _{dir \| text}
ScrollTo	Scrolls the webview to given position _{x \| number y \| number}
SetCookies	Sets cookies for given url _{url \| text cookieString \| text}
SetVisibility	Sets the visibility of webview by id _{id \| number visibility \| boolean}
SetWebView	Set specific webview to current webview by id _{id \| number}
StopLoading	Stops the current load.
UploadFile	Uploads the given file from content uri.Use empty string to cancel the upload request. _{contentUri \| text}
ZoomBy	Performs a zoom operation in the WebView by given zoom percent _{zoomP \| number}
ZoomIn	Performs zoom in in the WebView
ZoomOut	Performs zoom out in the WebView

Properties

AdHosts	Sets the ad hosts which will be blocked Property Type : write-only Accepts : text
AutoLoadImages	Sets whether the WebView should load image resources Property Type : read-write Accepts : boolean
AutoplayMedia	Sets whether the WebView requires a user gesture to play media Property Type : read-write Accepts : boolean
BackgroundColor	Sets background color of webview Property Type : write-only Accepts : number
BlockAds	Sets whether to block ads or not Property Type : write-only Accepts : boolean
BlockNetworkLoads	Sets whether the WebView should not load resources from the network.Use this to save data. Property Type : read-write Accepts : boolean
CacheMode	Sets cache mode for active webview Property Type : read-write Accepts : number
CurrentPageTitle	Title of the page currently viewed Property Type : read-only Accepts : text
CurrentUrl	URL of the page currently viewed Property Type : read-only Accepts : text
DeepLinks	Sets whether to enable deep links or not i.e. tel: , whatsapp: , sms: , etc. Property Type : read-write Accepts : boolean
DesktopMode	Sets whether to load content in desktop mode Property Type : read-write Accepts : boolean
DisplayZoom	Sets whether the WebView should display on-screen zoom controls Property Type : read-write Accepts : boolean
EnableJS	Tells the WebView to enable JavaScript execution. Property Type : read-write Accepts : boolean
FileAccess	Sets whether webview can access local files.Use this to enable file uploading and loading files using HTML Property Type : read-write Accepts : boolean
FollowLinks	Determines whether to follow links when they are tapped in the WebViewer.If you follow links, you can use GoBack and GoForward to navigate the browser history Property Type : read-write Accepts : boolean
FontSize	Sets the default font size of text. The default is 16. Property Type : read-write Accepts : number
InitialScale	Sets the initial scale for active WebView. 0 means default. If initial scale is greater than 0, WebView starts with this value as initial scale. Property Type : write-only Accepts : number
LayerType	Sets layer type Property Type : read-write Accepts : number
LoadWithOverviewMode	Sets whether the WebView loads pages in overview mode, that is, zooms out the content to fit on screen by width. This setting is taken into account when the content width is greater than the width of the WebView control. Property Type : read-write Accepts : boolean
LongClickable	Sets whether to enable text selection and context menu Property Type : read-write Accepts : boolean
OverScrollMode	Sets over scroll mode Property Type : read-write Accepts : number
PromptForPermission	Returns whether webview will prompt for permission and raise 'OnPermissionRequest' event or not Property Type : read-write Accepts : boolean
RotationAngle	Sets rotation angle Property Type : read-write Accepts : number
ScrollBar	Whether to display horizonatal and vertical scrollbars or not Property Type : write-only Accepts : boolean
ScrollBarStyle	Sets scroll bar style Property Type : read-write Accepts : number
Scrollable	Property for Scrollable Property Type : write-only Accepts : boolean
SupportMultipleWindows	Sets whether the WebView supports multiple windows Property Type : read-write Accepts : boolean
UseWideViewPort	Sets whether the WebView should enable support for the 'viewport' HTML meta tag or should use a wide viewport. Property Type : read-write Accepts : boolean
UserAgent	Get webview user agent Property Type : read-write Accepts : text
UsesLocation	Whether or not to give the application permission to use the Javascript geolocation API Property Type : write-only Accepts : boolean
VibrationEnabled	Sets whether vibration feedback enabled on long click Property Type : read-write Accepts : boolean
Visible	Returns the visibility of current webview Property Type : read-only Accepts : boolean
WebViewString	Set webview string Property Type : read-write Accepts : text
ZoomEnabled	Sets whether the WebView should support zooming using its on-screen zoom controls and gestures Property Type : read-write Accepts : boolean
ZoomPercent	Sets the zoom of the page in percent. The default is 100 Property Type : read-write Accepts : number

6.Open Source

This extension is open source so that anyone can modify and improve it
Here is the repo on GitHub:

You can find changelogs and beta aix there.
CustomWebView has two helper extensions named BrowserPromptHelper (adds your app to Browser's list) and DownloadHelper (for downloading files).

Please donate some amount to keep me motivated

Hope this helps !

Andy_Bulka · July 5, 2020, 4:57am

Looks promising. It doesn't appear as a visual component though, when I drag it onto the screen? It gets placed as a non visual component. How is it supposed to display html content?

vknow360 · July 5, 2020, 5:38am

Hi @Andy_Bulka Welcome
You will have to manually create webview in an arrangement.
You can find more information here:

Yoshi · July 17, 2020, 8:17am

Sry silly question... ofc CustomWebView is itself a Dynamic Component

I wanted to create it via DynamicComponentsExtension and asked myself why it didn't work like it supposed to do for me

vknow360 · July 17, 2020, 8:26am

Yes after latest update of his extension.
But there is no need to use it with his extension if you are using a version greater than >= v6.

Yoshi · July 17, 2020, 8:29am

I got this error when trying to create a WebView in Vertical Scroll Arrangement:

ScrollView can host only one direct child

Any reason?

Yoshi · July 17, 2020, 8:32am

No need to discuss, just something I ranodmly discovered, this is not a problem

vknow360 · July 17, 2020, 8:35am

ChangeLog Version5

New blocks

Changes

Added secondaryUrl parameter in LongClicked event

ChangeLog Version6

New Blocks

Changes

Added 'id' parameter in CreateWebView method
Added 'mimeType' and 'isCaptureEnabled' values in FileUploadNeeded event
Removed most of the designer properties
Some internal changes
Fixed grammar and spelling mistakes

ChangeLog Version7

New Blocks

Bug Fixes

Fixed bug in PrintWebContent method
Fixed bug in FileUploadNeeded method

What's new

Ad Blocker

ChangeLog Version7.1 (Patch Update)

Changes

Re-added some properties to designer
Added missing permissions

Bug Fixes

Fixed bug in LongClickable property

Version 7.1: com.sunny.CustomWebView.aix (64.0 KB)

CustomWebView - lite

Presenting just another variant of CustomWebView.
Note: This version can run even on Api 11 i.e. Honeycomb

Blocks

Documentation
Most of blocks work same as original version except this new event:

OnSwipe
Event raised when left or right swipe occurs in webview.It returns 1 for left swipe and 2 for right swipe.

direction ~ int

Aix
com.sunny.CustomWebView.aix (14.0 KB)

Yoshi · July 17, 2020, 8:37am

Oh yeah! This is EXACTLY what I needed!!! Thank you very much! I wanted to make a Slideshow with Gifs, and this is now possible thanks to you!

vknow360 · July 17, 2020, 8:40am

That's why it is lite version

vknow360 · July 17, 2020, 8:41am

I, vknow360 aka Sunny Gupta, attest that I am the author of the CustomWebView extension , grant that the extension included in this project is free and that MIT has a non-exclusive irrevocable license to republish the extension as part of the project file for the purposes of the MIT App Inventor Hackathon 2020.

Thanks to @Yoshi

Yoshi · July 17, 2020, 8:47am

Thanks, now I have everything for my app

Yoshi · July 17, 2020, 11:33am

Problem solved forgot about the container

vknow360 · July 24, 2020, 9:59am

Version 8:

TIMAI2 · August 6, 2020, 8:40am

Set UserAgent not working in a companion/compiled app, getting "403 disallowed_userAgent" when attemptng google sign up? (Tried five different user agents, all without ;wv)

vknow360 · August 6, 2020, 9:36am

Hi @TIMAI2
Can you share your blocks and respective User Agents?

ChrisWard · August 6, 2020, 9:51am

Hi Sunny

Is your extension working with HTML files, stored in App Assets, AI2 version nb184? The native WebViewer component cannot load files from anywhere, though it was perfectly fine in nb183.

vknow360 · August 6, 2020, 9:53am

I have not tested it yet.
Let me check.
But android version plays an important role here.
(I can test it only on Kitkat,Lollipop and Nougat)

TIMAI2 · August 6, 2020, 10:38am

Please see your PMs

vknow360 · September 10, 2020, 2:16pm

ChangLog Version 9

Documentation

AfterArchiveSaved
Event raised after 'SaveArchive' method.If 'success' is true then returns file path else empty string.

success ~ boolean
filePath ~ text

GetInternalHistory
Get internal history of given webview.

id ~ int
Returns: list<String>

InvokeZoomPicker
Invokes the graphical zoom picker widget for this WebView. This will result in the zoom widget appearing on the screen to control the zoom level of this WebView.Note that it does not checks whether zoom is enabled or not.

LoadWithHeaders
Loads the given URL with the specified additional HTTP headers defined is list of lists.

url ~ text
headers ~ List<List<String>>

SaveArchive
Saves the current view as a web archive

dir ~ string
Note: Use absolute path here

CacheMode
Sets cache mode for active webview

Accepts : int
Possible Values: WebSettings | Android Developers

Hope it helps!
Thank you.