Nativescript: http gzip support missing

[NathanaelA]

The http module in nativescript apparently doesn't support basic things like gzip (at least on Android). I have a server that by default is sending a gzipped response (to save major bandwidth as the data is rather large) and of course then the http module will die a horribile death and throw a Java EOF error.

This is actually something that is very surprising that it is totally broken in NS as anything mobile we want to save the amount of data being transferred. So by default we should be supporting http data compression.

If anyone else runs into this issue; you can send the header: accept-encoding: identity which will force it to be a text based uncompressed stream protocol.

[atanasovg]

We may research whether the okhttp library for Android already handles this. Relates to https://github.com/NativeScript/android-runtime/issues/209. Probably a custom http plugin that enables okhttp would be a viable solution.

[valentinstoychev]

Yes - we should check this as and provide a recommended way for consumption of "zipped" http content in NativeScript as this really will increase the perf of the app. cc: @enchev

[enchev]

Technically you/we can add support even know in our JavaScript wrapper or simply in the application using this approach however in this case unzipping will be in the UI thread.

We plan to move our Android HTTP implementation from the runtime to separate plugin similar to widgets where we can add this functionality and our modules will depend on the new Async module similar again to widgets.

What do you think about this plan? :)

[jacargentina]

@enchev On iOS i have no problem with the gzip response. Seems to be related only to the Android. Any news on this?

[mshanak]

you can use nativescript http with angular , following example:

first import http serves in the top of the service component
var http = require("http");

in the sevice.ts file ,you need to convert the http promise to observable .

//GET Example
    getList(): Observable<News[]> {
        return Observable.fromPromise(
                    **http.getJSON(serverConfig.apiUrl+"news")**
                ).map(function(res:any) {
                    console.log('finished sendign request'); 
                    return res as News[] 
                } );

    }


//POST EXAMPLE

submitFormData(data): Observable<Forms> {
        let url:string=serverConfig.apiUrl+"forms/";
        let headers:any = { 'Content-Type': 'application/json', 'Authorization': 'Bearer '+this.appSettings.getString("access_token")};
        let req:any={
            url:url,
            method: "post",
            headers:headers,
            content: JSON.stringify(data)
        };

        return Observable.fromPromise(
                    http.getJSON(req)
                ).map(function(res:any) {
                    return res as Forms 
                } );
    }

then you can subscribe to the observeable as you used befor,

        this.newsService.getList().subscribe((res) => {
            this.news= res;
        });

Note : now you can remove the import statment of angular http since its not needed

[dzfweb]

@mshanak still not working, even using your sample code.
SyntaxError: Unexpected token < in JSON at position 0

[mshanak]

This is my news.service.ts

import { Injectable } from '@angular/core';
var http = require("http");
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { News } from './news.model';
import {serverConfig} from '../../../config/api'
@Injectable()
export class NewsService {

    constructor() { }

    getList(): Observable<News[]> {
        return Observable.fromPromise(
                    http.getJSON(serverConfig.apiUrl+"news")
                ).map(function(res:any) {
                    console.log('finished sendign request'); 
                    return res.data as News[] 
                } );

    }

    getOne(id:number): Observable<News> { 
        return Observable.fromPromise(
                    http.getJSON(serverConfig.apiUrl+"news/"+id)
                ).map(function(res:any) {
                    console.log('finished sendign request'); 
                    return res as News
                } );

    }

} 

and this is how i consume this service

this.newsService.getList().subscribe((res) => {
            this.news= res; 
        });

it should work

[NathanaelA]

@tsonevn - I added a PR to the TNS-Core-Modules-Widgets that should add this ability for Android -- if you can ping whomever can test & verify. I believe iOS already supports gzip in the stream.

[NickIliev]

Closed via https://github.com/NativeScript/tns-core-modules-widgets/pull/128

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.