CustomWebView : An extended form of Web Viewer

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

image

4.Blocks

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

5.Documentation

AfterArchiveSavedEvent raised after ‘SaveArchive’ method.If ‘success’ is true then returns file path else empty string.
success | boolean
filePath | text
AfterJavaScriptEvaluatedEvent raised after evaluating Js and returns result.
result | text
CookiesRemovedEvent raised after ‘ClearCokies’ method with result
successful | boolean
FileUploadNeededEvent raised when file uploading is needed
id | number
mimeType | text
isCaptureEnabled | boolean
FindResultReceivedEvent raised after ‘Find’ method with int ‘activeMatchOrdinal’,’numberOfMatches’ and ‘isDoneCounting’
id | number
activeMatchOrdinal | number
numberOfMatches | number
isDoneCounting | boolean
GotCertificateEvent 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
GotPrintResultEvent raised after getting previus print’s result.
printId | text
isCompleted | boolean
isFailed | boolean
isBlocked | boolean
LongClickedEvent 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
OnCloseWindowRequestEvent triggered when a window needs to be closed
id | number
OnConsoleMessageEvent raised after getting console message.
message | text
lineNumber | number
sourceID | number
level | text
OnDownloadNeededEvent raised when downloading is needed.
id | number
url | text
contentDisposition | text
mimeType | text
size | number
OnErrorReceivedEvent 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
OnFormResubmissionEvent raised when resubmission of form is needed
id | number
OnGeolocationRequestedEvent raised when page asks for location access. Developer must handle/show dialog from him/herself.
origin | text
OnHideCustomViewEvent raised when current page exits from full screen mode
OnJsAlertEvent raised when Js have to show an alert to user
id | number
url | text
message | text
OnJsConfirmTells to display a confirm dialog to the user.
id | number
url | text
message | text
OnJsPromptEvent raised when JavaScript needs input from user
id | number
url | text
message | text
defaultValue | text
OnNewWindowRequestEvent raised when new window is requested by webview with boolean ‘isDialog’ and ‘isPopup’
id | number
isDialog | boolean
isPopup | boolean
OnPermissionRequestEvent raised when a website asks for specific permission(s) in list format.
permissionsList | list
OnProgressChangedEvent raised when page loading progress has changed.
id | number
progress | number
OnReceivedHttpAuthRequestNotifies that the WebView received an HTTP authentication request.
id | number
host | text
realm | text
OnReceivedSslErrorEvent for OnReceivedSslError
errorCode | number
OnScrollChangedEvent raised when webview gets scrolled
id | number
scrollX | number
scrollY | number
oldScrollX | number
oldScrollY | number
canGoLeft | boolean
canGoRight | boolean
OnShowCustomViewEvent raised when current page enters in full screen mode
PageLoadedEvent raised when page loading has finished.
id | number
PageStartedEvent indicating that page loading has started in web view.
id | number
url | text
SwipedEvent raised when webview is swiped
id | number
direction | number
WebViewStringChangedWhen the JavaScript calls AppInventor.setWebViewString this event is run.
value | text
AllowGeolocationAccessMethod for AllowGeolocationAccess
allow | boolean
remember | boolean
CanGoBackGets whether this WebView has a back history item
CanGoBackOrForwardGets whether the page can go back or forward the given number of steps.
steps | number
CanGoForwardGets whether this WebView has a forward history item.
CancelPrintingCancels current print job. You can request cancellation of a queued, started, blocked, or failed print job.
ClearCacheClears the resource cache.
ClearCookiesRemoves all cookies and raises ‘CookiesRemoved’ event
ClearFormDataClears the form data of the webview
Added by Xoma
id | number
ClearInternalHistoryTells this WebView to clear its internal back/forward list.
ClearLocationClear all location preferences.
ClearMatchesClears the highlighting surrounding text matches.
ConfirmJsWhether to proceed JavaScript originated request
confirm | boolean
ContentHeightGets height of HTML content
ContinueJsInputs a confirmation response to Js
input | text
CreateShortcutCreates a shortcut of given website on home screen
url | text
iconPath | text
title | text
CreateWebViewCreates the webview in given arrangement with id
container | component
id | number
CurrentIdReturns current id
DismissJsAlertDismiss previously requested Js alert
EvaluateJavaScriptAsynchronously evaluates JavaScript in the context of the currently displayed page.
script | text
FindFinds all instances of find on the page and highlights them, asynchronously. Successive calls to this will cancel any pending searches.
string | text
FindNextHighlights and scrolls to the next match if ‘forward’ is true else scrolls to previous match.
forward | boolean
GetCookiesGet cookies for specific url
url | text
GetIdsReturns a list of used ids
GetInternalHistoryGet internal history of given webview.
id | number
GetProgressGets the progress for the given webview
id | number
GetScrollXReturn the scrolled left position of the webview
GetScrollYReturn the scrolled top position of the webview
GetSslCertificateGets the SSL certificate for the main top-level page and raises ‘GotCertificate’ event
GetWebViewReturns webview object from id
id | number
GoBackGoes back in the history of this WebView.
GoBackOrForwardGoes 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
GoForwardGoes forward in the history of this WebView.
GoToUrlLoads the given URL.
url | text
GrantPermissionGrants given permissions to webview.Use empty list to deny the request.
permissions | text
HideCustomViewHides previously shown custom view
InvokeZoomPickerInvokes 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.
LoadHtmlLoads the given data into this WebView using a ‘data’ scheme URL.
html | text
LoadInNewWindowLoads requested url in given webview
id | number
LoadWithHeadersLoads the given URL with the specified additional HTTP headers defined is list of lists.
url | text
headers | dictionary
PageDownScrolls the contents of the WebView down by half the page size
bottom | boolean
PageUpScrolls the contents of the WebView up by half the page size
top | boolean
PauseWebViewDoes 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
PostDataLoads the URL with postData using ‘POST’ method into active WebView.
url | text
data | text
PrintWebContentPrints the content of webview with given document name
documentName | text
ProceedHttpAuthRequestInstructs 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
ProceedSslErrorMethod for ProceedSslError
proceed | boolean
RegisterDeepLinkRegisters to open specified link in associated external app(s)
scheme | text
ReloadReloads the current URL.
RemoveWebViewDestroys the webview and removes it completely from view system
id | number
RestartPrintingRestarts current/previous print job. You can request restart of a failed print job.
ResubmitFormWhether to resubmit form or not.
reSubmit | boolean
ResumeWebViewResumes the previously paused WebView.
id | number
SaveArchiveSaves the current site as a web archive
dir | text
ScrollToScrolls the webview to given position
x | number
y | number
SetCookiesSets cookies for given url
url | text
cookieString | text
SetVisibilitySets the visibility of webview by id
id | number
visibility | boolean
SetWebViewSet specific webview to current webview by id
id | number
StopLoadingStops the current load.
UploadFileUploads the given file from content uri.Use empty string to cancel the upload request.
contentUri | text
ZoomByPerforms a zoom operation in the WebView by given zoom percent
zoomP | number
ZoomInPerforms zoom in in the WebView
ZoomOutPerforms zoom out in the WebView
AdHostsSets the ad hosts which will be blocked
Property Type : write-only
Accepts : text
AutoLoadImagesSets whether the WebView should load image resources
Property Type : read-write
Accepts : boolean
AutoplayMediaSets whether the WebView requires a user gesture to play media
Property Type : read-write
Accepts : boolean
BackgroundColorSets background color of webview
Property Type : write-only
Accepts : number
BlockAdsSets whether to block ads or not
Property Type : write-only
Accepts : boolean
BlockNetworkLoadsSets whether the WebView should not load resources from the network.Use this to save data.
Property Type : read-write
Accepts : boolean
CacheModeSets cache mode for active webview
Property Type : read-write
Accepts : number
CurrentPageTitleTitle of the page currently viewed
Property Type : read-only
Accepts : text
CurrentUrlURL of the page currently viewed
Property Type : read-only
Accepts : text
DeepLinksSets whether to enable deep links or not i.e. tel: , whatsapp: , sms: , etc.
Property Type : read-write
Accepts : boolean
DesktopModeSets whether to load content in desktop mode
Property Type : read-write
Accepts : boolean
DisplayZoomSets whether the WebView should display on-screen zoom controls
Property Type : read-write
Accepts : boolean
EnableJSTells the WebView to enable JavaScript execution.
Property Type : read-write
Accepts : boolean
FileAccessSets whether webview can access local files.Use this to enable file uploading and loading files using HTML
Property Type : read-write
Accepts : boolean
FollowLinksDetermines 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
FontSizeSets the default font size of text. The default is 16.
Property Type : read-write
Accepts : number
InitialScaleSets 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
LayerTypeSets layer type
Property Type : read-write
Accepts : number
LoadWithOverviewModeSets 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
LongClickableSets whether to enable text selection and context menu
Property Type : read-write
Accepts : boolean
OverScrollModeSets over scroll mode
Property Type : read-write
Accepts : number
PromptForPermissionReturns whether webview will prompt for permission and raise ‘OnPermissionRequest’ event or not
Property Type : read-write
Accepts : boolean
RotationAngleSets rotation angle
Property Type : read-write
Accepts : number
ScrollBarWhether to display horizonatal and vertical scrollbars or not
Property Type : write-only
Accepts : boolean
ScrollBarStyleSets scroll bar style
Property Type : read-write
Accepts : number
ScrollableProperty for Scrollable
Property Type : write-only
Accepts : boolean
SupportMultipleWindowsSets whether the WebView supports multiple windows
Property Type : read-write
Accepts : boolean
UseWideViewPortSets whether the WebView should enable support for the ‘viewport’ HTML meta tag or should use a wide viewport.
Property Type : read-write
Accepts : boolean
UserAgentGet webview user agent
Property Type : read-write
Accepts : text
UsesLocationWhether or not to give the application permission to use the Javascript geolocation API
Property Type : write-only
Accepts : boolean
VibrationEnabledSets whether vibration feedback enabled on long click
Property Type : read-write
Accepts : boolean
VisibleReturns the visibility of current webview
Property Type : read-only
Accepts : boolean
WebViewStringSet webview string
Property Type : read-write
Accepts : text
ZoomEnabledSets whether the WebView should support zooming using its on-screen zoom controls and gestures
Property Type : read-write
Accepts : boolean
ZoomPercentSets the zoom of the page in percent. The default is 100
Property Type : read-write
Accepts : number

6. Downloads

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

7. Want to donate?

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

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.

Thank you.

Hope it helps!

2 thoughts on “CustomWebView : An extended form of Web Viewer

Leave a Reply