CustomWebView : An extended form of Web Viewer

Table of Contents

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: May 13, 2020
Last Updated: March 9, 2023

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 pages and view them offline without internet connection

3.Designer Properties

4.Blocks

5.Documentation

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}
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
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. Downloads

Download Aix

CustomWebView is an open-source extension so that anyone can modify it (according to their needs) and make it better.

View Github Repo

7. Want to donate?

If you liked this extension then please donate some amount to keep me motivated to create new extensions like this.

Donate via PayPal

Donate via UPI

8. Additional Resources

There has been a lot of discussion related to CustomWebView in various builder’s communities. I recommend to have a look at the discussions as they will be surely helpful to you.

I have published some of my own snippets related to CustomWebView in this post.

Snippets related to CustomWebView extension

Thank you.

Hope it helps!

2 Comments

Oldest

Newest

Inline Feedbacks

View all comments

koko

10 months ago

i want make app webview support (deeplink, download, upload, open camera, javascript) how much ?

Sunny Gupta

Author

Reply to koko

You can find blocks for all these features in Kodular and AppInventor communities.
https://community.appinventor.mit.edu/search?q=customwebview
https://community.kodular.io/search?q=customwebview

CustomWebView : An extended form of Web Viewer

1.Introduction

2.Features

3.Designer Properties

4.Blocks

5.Documentation

6. Downloads

7. Want to donate?

8. Additional Resources

Related Post

[PAID] FirebaseIAM : Implement In App Messaging with Latest SDK – v21.0.0 ($5 or INR 301)

[PAID] FcmSender: Send FCM notifications and messages using latest HTTP v1 API ($5 or INR 301)

[PAID] CashfreePG: Add Cashfree Payment Gateway in your app ($8 or INR 501)