Displaying a Message Center Message in a Custom Webview

This guide shows the minimum integration necessary to display a Message Center message in a custom webview.

While the Airship SDK provides built-in Message Center UI, sometimes it can be useful to create a custom implementation that bypasses the default implementation’s view hierarchy. Message Center messages are just HTML, and so they can be displayed in any webview. However, there are a few integration steps needed to ensure that authorization and the Native Bridge function properly.

Authentication

Message Center messages are fetched with basic authentication using the RichPushUser credentials in base64 encoding. This class persists a unique username and password to the device, and provides easy access to the information at runtime.

RichPushUser user = UAirship.shared().getInbox().getUser();
String username = user.getId();
String password = user.getPassword();

if (user.getId() != null && user.getPassword() != null) {
   // set auth here
}
val user = UAirship.shared().inbox.user
val username = user.id
val password = user.password

if (user.id != null && user.password != null) {
   // set auth here
}

We will look at a more detailed example in the context of a custom webView futher below.

Setting up the Native Bridge

The Airship Native bridge works by intercepting all links with the uairship:// scheme and translating specially URL-encoded paths into native commands and arguments. To do this in a custom web view, use or extend the UAWebViewClient, which handles the injection of JavaScript and related lifecycle callbacks.

Setting UAWebViewClient and Loading A Message

The example below shows how to put these pieces together in the context of a custom WebView class. An anonymous inner class extends UAWebViewClient to pass along auth credentials from the RichPushUser

public class MyWebView extends WebView {

   private WebViewClient webViewClient;

   ...

   // configure and set the UAWebViewClient
   public void initClient() {
      final RichPushUser user = UAirship.shared().getInbox().getUser();

      setWebViewClient(new UAWebViewClient() {
         @Override
         public void onReceivedHttpAuthRequest(@NonNull WebView view, @NonNull HttpAuthHandler handler, @Nullable String host, @Nullable String realm) {
            if (user.getId() != null && user.getPassword() != null) {
               handler.proceed(user.getId(), user.getPassword());
            }
            super.onReceivedHttpAuthRequest(view, handler, host, realm);
         }
      });
   }

   // load a message with auth set in the headers
   public void loadRichPushMessage(RichPushMessage message) {
      final RichPushUser user = UAirship.shared().getInbox().getUser();

      // Send authorization in the headers if the web view supports it
      HashMap<String, String> headers = new HashMap<>();
      if (user.getId() != null && user.getPassword() != null) {
         headers.put("Authorization", createBasicAuth(user.getId(), user.getPassword()));
      }

      loadUrl(message.getMessageBodyUrl(), headers);
   }

   // helper method for creating base64-encoded, basic auth header values
   private String createBasicAuth(@NonNull String userName, @NonNull String password) {
      String credentials = userName + ":" + password;
      return "Basic " + Base64.encodeToString(credentials.getBytes(), Base64.NO_WRAP);
   }
}
public class MyWebView(context: Context) : WebView(context) {

    ...

    // configure and set the UAWebViewClient
    public fun initClient() {
        val user: RichPushUser = UAirship.shared().inbox.user

        webViewClient = object : UAWebViewClient() {
            override fun onReceivedHttpAuthRequest(view: WebView, handler: HttpAuthHandler, host: String?, realm: String?) {
                if (user.id != null && user.password != null) {
                    handler.proceed(user.id, user.password)
                }
                super.onReceivedHttpAuthRequest(view, handler, host, realm)
            }
        }
    }

    // load a message with auth set in the headers
    public fun loadRichPushMessage(message: RichPushMessage) {
        val user: RichPushUser = UAirship.shared().inbox.user

        // Send authorization in the headers if the web view supports it
        var headers: HashMap<String, String> = HashMap()
        val userId = user.id
        val password = user.password
        if (userId != null && password != null) {
            headers["Authorization"] = createBasicAuth(userId, password);
        }
        loadUrl(message.messageBodyUrl, headers)
    }

    // helper method for creating base64-encoded, basic auth header values
    private fun createBasicAuth(userName: String, password: String): String {
        val credentials: String = "$userName:$password"
        return "Basic " + Base64.encodeToString(credentials.toByteArray(), Base64.NO_WRAP)
    }
}