Web Monetization API Wrapper for Android WebView
Tags: showdev, gftwhackathon, webmonetization, webview
Published: 2020-05-21 23:26:07

---
title: Web Monetization API Wrapper for Android WebView
published: true
description: My submission to the Grant For The Web x DEV Hackathon!
tags: showdev, gftwhackathon, webmonetization, webview
---

## What I built

I built a Web Monetization API events wrapper JavascriptInterface for Android WebView using Java.
The usage and logic is quite the same as with the JavaScript API, as the events are actually the same. :)

Getting the events wrapped on the Java side in the end is as easy as follows:

``` java
WebMonetizationWrapper wrapper = WebMonetizationWrapper.createAndAddInterface(webview);
wrapper.addPendingEventHandler(/*your Handler*/);
wrapper.addStartEventHandler(/*your Handler*/);
wrapper.addStopEventHandler(/*your Handler*/);
wrapper.addProgressEventHandler(/*your Handler*/);
```

## Submission Category: 

Foundational Technology

## Link to Code

{% github moagggi/AndroidWebMonetizationWrapper %}

## Demo

I built a small demo app around the wrapper, for testing, with a TextView, Button and a WebView (the white area with 5 buttons).
As the demo app just mimics/polyfills the embed Web Monetization browser/extension logic the demo app has to be manually initialized and attached via two button clicks (init, attach).

![First screen with init and attach button](https://dev-to-uploads.s3.amazonaws.com/i/e4dnl2g3s2njknptwztd.jpg)

IRL no polyfill is needed, as the API is then already populated (or absent) from the start.

After initialization and attaching, the API events are the same as *you wouldn't get from any other guy* (c). I mean, legit Web Monetization API. 

There is the stopped alas pre-pending state

![pre-pending state screen](https://dev-to-uploads.s3.amazonaws.com/i/nvzh0ywnc3a1d3nog6ga.jpg)

as well as the then following pending state with event data

![pending state screen](https://dev-to-uploads.s3.amazonaws.com/i/vaby17dbs0usbwmcxo8o.jpg)

The data ATM is the same (despite the event name) for pending, started

![started state screen](https://dev-to-uploads.s3.amazonaws.com/i/zhayq602fo6lke9sewkb.jpg)

and stopped

![stopped state screen](https://dev-to-uploads.s3.amazonaws.com/i/kxkcam8jfnwu2ljlq30s.jpg)

Then there's also the progress event between with the current fragment and the total (that's the manual sum of all previous fragments)

![progress screen](https://dev-to-uploads.s3.amazonaws.com/i/ztgjsuffixjp5mh4gcg6.jpg)

## How I built it 

I basically started with noting the event names and data as well as creating the needed String constants and separate Java sub- and super-classes.

After that I created the Java side Handler register and invoke logic.

Finally I've written the JavaScript code registering all events, that's wrapping them and passing it through to the Java side.

It is important to re-attach the wrapper after each page load, something fast accomplished with the next lines

``` java
webview.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        //attach after every page load
        wrapper.attach(view);
    }
});
```

Now you're having the Web Monetization events fully in your Android app.

## Additional Resources/Info 

See https://webmonetization.org/docs/api#browser-events for more.

(c) RCA / Rick Astley