[TIMOB-17467] Android: Add setRequestHeaders() to WebView

[m1ga]

JIRA: https://jira.appcelerator.org/browse/TIMOB-17467

Optional Description:

var win = Ti.UI.createWindow();
var webView = Ti.UI.createWebView({
    requestHeaders: {
        "User-Foo": "FooBar",
        "foo": "bar",
        "other": "string"
    },
    url: "https://httpbin.org/headers"
});
var btn = Ti.UI.createButton({
    title: "Reload",
    bottom: 50
});

btn.addEventListener("click", function() {
    webView.reload();
});

var btnChange = Ti.UI.createButton({
    title: "Change Header",
    bottom: 0
});

btnChange.addEventListener("click", function() {
    var date = new Date().getTime();
    webView.setRequestHeaders({
        "User-Foo": "FooBar_" + date,
        "foo": "bar_" + date,
        "other": "string_" + date
    });
});

win.add(webView);
win.add(btnChange);
win.add(btn);
win.open();

[build]

Can one of the admins verify this patch?

[abada]

Very nice 👍

[abada]

What about iOS ?

[hansemannn]

should be a property and also return a getter to receive already stored request-headers. Otherwise, I can already see the improvement-ticket coming 😉

[m1ga]

added getter and changed the documentation!

$.index.addEventListener("open", function(e) {
    $.www.setRequestHeaders({
        "User-Blub": "blablabla",
        "something": "string1",
        "other": "string2"
    });
    $.www.setUrl("http://localhost/test.php");

    console.log("Len: " + Object.keys($.www.getRequestHeaders()).length);   
    console.log($.www.getRequestHeaders());
    console.log( $.www.requestHeaders );
});

$.index.open();

will return:

[INFO]  Len: 3
[INFO]  {"User-Blub":"blablabla","something":"string1","other":"string2"}
[INFO]  {"User-Blub":"blablabla","something":"string1","other":"string2"}

[hansemannn]

Sweet! Will plan the iOS-part then. @ashcoding to review for 6.1.0 :-)

[m1ga]

@hansemannn if you want to change something let me know and I'll adapt it.

[ashcoding]

@m1ga is there any alternative website that I can use to easily test this? Perhaps something similar to httpbin.org?

[m1ga]

@ashcoding never heard about httpbin before. Looks awesome! https://httpbin.org/headers should work. Or try my test-page at http://migaweb.de/test.php

[ashcoding]

I'm trying to do this in a classic app:

var webView = Ti.UI.createWebView({
    url: "https://httpbin.org/headers",
});

webView.setRequestHeaders({
    "User-Blub": "blablabla",
    "something": "string1",
    "other": "string2"
});

var win = Ti.UI.createWindow();
var btn = Ti.UI.createButton({
    title : "Reload"
});

btn.addEventListener("click", function() {
    webView.reload();
});

win.add(webView);
win.add(btn);
win.open();

@m1ga
If I don't add the request headers, it works fine. With the headers, it's not working.
I'm using an Android 6.0, Nexus 6.

I just get a blank screen with nothing loading. Seems like something is going on?

@hansemannn could you try this whenever you have the time as well?

[m1ga]

@ashcoding if the setRequestHeaders is inside the button click event it works fine. Will check that tomorrow and fix the bug!

[hansemannn]

I made that test to explicitly validate that the headers persist after reloading the page. So we just need to ensure iOS and Android behave the same.

[m1ga]

@ashcoding the problem is occuring with setUserAgent() too and is mentioned here: https://jira.appcelerator.org/browse/TIMOB-17139
with a workaround and wontfix 😢 . But the workaround works for this PR, too. But I'm not a big fan of this workaround or it should be mentioned in the documentation.

It would also be good to add a requestHeaders parameter you can add to the create method so that in your example you would add it right away and not call the method after creation.

[m1ga]

So this demo works fine now:

var win = Ti.UI.createWindow();
var webView = Ti.UI.createWebView({
    requestHeaders: {
        "User-Foo": "FooBar",
        "foo": "bar",
        "other": "string"
    },
    url: "https://httpbin.org/headers"
});
var btn = Ti.UI.createButton({
    title: "Reload",
    bottom: 50
});

btn.addEventListener("click", function() {
    webView.reload();
});

var btnChange = Ti.UI.createButton({
    title: "Change Header",
    bottom: 0
});

btnChange.addEventListener("click", function() {
    var date = new Date().getTime();
    webView.setRequestHeaders({
        "User-Foo": "FooBar_" + date,
        "foo": "bar_" + date,
        "other": "string_" + date
    });
});

win.add(webView);
win.add(btnChange);
win.add(btn);
win.open();

• requestHeaders property are set during creation
• custom headers survive a reload (press button reload, output stays the same)
• header can be changed with change header + reload to display the output. Just pressing change header won't automatically reload the page

I've added some remarks about how to use setRequestHeaders() method on Android and added the iOS platform so you can merge the iOS PR afterwards

[ashcoding]

Will you be addressing the issue that I brought up?
Alternatively, since you have added this info in the docs, perhaps this is okay.

@hansemannn what do you think?

[hansemannn]

I'm fine with merging it, since - as he indicated - it is a general problem with Android-webviews that should be addressed separately.

[ashcoding]

Roger. I'll give this PR one more review and get it merged if everything is good.

[ashcoding]

Code functionally tested and reviewed.
LGTM.
Approved

[ashcoding]

Thank you @m1ga