Hi,
i am working on web view because of nativescript does not provide live streaming plugin. Now i have problem of swf file is not supporting to my UI
my Code Like this:-
xml
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<StackLayout>
<StackLayout height="auto">
<WebView src = "~/views/index.html" width="*"/>
</StackLayout>
<StackLayout>
<TextField text="Peniel Designs" textWrap="false"/>
</StackLayout>
</StackLayout>
</Page>
js
var webViewModule = require("ui/web-view");
var webView = new webViewModule.WebView();
function pageLoaded(args) {
var page = args.object;
page.bindingContext = webView.webViewModule;
}
exports.pageLoaded = pageLoaded;
index.html
<!-- <object type="application/x-shockwave-flash" id="mixstreamPlayerContent" data="http://mixstreamflashplayer.net/flash/MixStreamPlayer.swf" width="335" height="50"><param name="bgcolor" value=""><param name="wmode" value="transparent"><param name="flashvars" value="serverHost=216.224.164.193:7084/;&getStats=0&autoStart=1&textColour=&buttonColour="></object> -->
<!DOCTYPE html>
<html>
<head>
<title>kjd</title>
</head>
<body>
<div style="background-color: red;">
<div style="width: 283px; height: 98px;">
<img id="WPhtj-15wmimgimage" alt="" src="https://static.wixstatic.com/media/3f20ba_db50737603124c6eeacac19c12768d7a.gif" style="width: 283px; height: 98px; object-fit: cover;">
</div>
<div>
<object type="application/x-shockwave-flash" id="mixstreamPlayerContent" data="http://mixstreamflashplayer.net/flash/MixStreamPlayer.swf" width="335" height="50"><param name="bgcolor" value=""><param name="wmode" value="transparent"><param name="flashvars" value="serverHost=216.224.164.193:7084/;&getStats=0&autoStart=1&textColour=&buttonColour="></object>
</div>
</div>
</body>
</html>
This index.html when i open in browser swf file and live streaming data also getting play but in the app it is not working. what shall i can do for fixing this issue..
6 Answers, 1 is accepted
Indeed, the web-view module is not supporting flash and shockwave plugins.
On one side in iOS is not supporting flash for iPads and iPhones so it is not possible (official statement)
to run Flash in iOS environment.
In Android by default, the flash is not enabled and you have to explicitly allow usage of plugins of android.webkit.WebView.
There used to be a method that was enabling plugins for Android but it was deprecated in API Level 19 (which makes it obsolete in nowadays)
Deprecated for all APIs greater than 18
var myWebView = page.getViewById("my-web-view");myWebView.android.getSettings().setPluginsEnabled(true);But still, this won't work on all API levels and is also not supported in NativeScript at this point.
Regards,
Nikolay Iliev
Telerik by Progress
Rank 1
Hi,
Webview is working fine but the loading time of app is morethan 15 seconds when loaded first time Is there any way to reduce that...
mycode:- main-view-model.js
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var observable = require("data/observable");
var WebViewSampleModel = (function (_super) {
__extends(WebViewSampleModel, _super);
function WebViewSampleModel() {
_super.call(this);
this.set("url", "https//");
}
WebViewSampleModel.prototype.loadAction = function () {
this.set("url");
};
return WebViewSampleModel;
})(observable.Observable);
exports.WebViewSampleModel = WebViewSampleModel;
exports.mainViewModel = new WebViewSampleModel();
main-page.js
var vmModule = require("./main-view-model");
// var webViewModule = require("ui/web-view");
// var webView = new webViewModule.WebView();
function pageLoaded(args) {
var page = args.object;
// var myWebView = page.getViewById("my-web-view");
// myWebView.getViewById().setPluginsEnabled(true);
page.bindingContext = vmModule.mainViewModel;
}
exports.pageLoaded = pageLoaded;
xml
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<StackLayout>
<StackLayout height="auto">
<WebView id="my-web-view" url="{{url}}" width="*" height="520"/>
</StackLayout>
<StackLayout>
<Label text="Copy Right @ Design 4 You" textWrap="false"/>
</StackLayout>
</StackLayout>
</Page>
Rank 1
Hi,
Webview is working fine but the loading time of app is morethan 15 seconds when loaded first time Is there any way to reduce that...
mycode:- main-view-model.js
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var observable = require("data/observable");
var WebViewSampleModel = (function (_super) {
__extends(WebViewSampleModel, _super);
function WebViewSampleModel() {
_super.call(this);
this.set("url", "https//");
}
WebViewSampleModel.prototype.loadAction = function () {
this.set("url");
};
return WebViewSampleModel;
})(observable.Observable);
exports.WebViewSampleModel = WebViewSampleModel;
exports.mainViewModel = new WebViewSampleModel();
main-page.js
var vmModule = require("./main-view-model");
// var webViewModule = require("ui/web-view");
// var webView = new webViewModule.WebView();
function pageLoaded(args) {
var page = args.object;
// var myWebView = page.getViewById("my-web-view");
// myWebView.getViewById().setPluginsEnabled(true);
page.bindingContext = vmModule.mainViewModel;
}
exports.pageLoaded = pageLoaded;
xml
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<StackLayout>
<StackLayout height="auto">
<WebView id="my-web-view" url="{{url}}" width="*" height="520"/>
</StackLayout>
<StackLayout>
<Label text="Copy Right @ Design 4 You" textWrap="false"/>
</StackLayout>
</StackLayout>
</Page>
is There any way webview caching
Rank 1
Hi,
Webview is working fine but the loading time of app is morethan 15 seconds when loaded first time Is there any way to reduce that...
mycode:- main-view-model.js
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var observable = require("data/observable");
var WebViewSampleModel = (function (_super) {
__extends(WebViewSampleModel, _super);
function WebViewSampleModel() {
_super.call(this);
this.set("url", "https//");
}
WebViewSampleModel.prototype.loadAction = function () {
this.set("url");
};
return WebViewSampleModel;
})(observable.Observable);
exports.WebViewSampleModel = WebViewSampleModel;
exports.mainViewModel = new WebViewSampleModel();
main-page.js
var vmModule = require("./main-view-model");
// var webViewModule = require("ui/web-view");
// var webView = new webViewModule.WebView();
function pageLoaded(args) {
var page = args.object;
// var myWebView = page.getViewById("my-web-view");
// myWebView.getViewById().setPluginsEnabled(true);
page.bindingContext = vmModule.mainViewModel;
}
exports.pageLoaded = pageLoaded;
xml
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<StackLayout>
<StackLayout height="auto">
<WebView id="my-web-view" url="{{url}}" width="*" height="520"/>
</StackLayout>
<StackLayout>
<Label text="Copy Right @ Design 4 You" textWrap="false"/>
</StackLayout>
</StackLayout>
</Page>
is There any way webview caching
Rank 1
Hi,
Webview is working fine but the loading time of app is morethan 15 seconds when loaded first time Is there any way to reduce that...
mycode:- main-view-model.js
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var observable = require("data/observable");
var WebViewSampleModel = (function (_super) {
__extends(WebViewSampleModel, _super);
function WebViewSampleModel() {
_super.call(this);
this.set("url", "https//");
}
WebViewSampleModel.prototype.loadAction = function () {
this.set("url");
};
return WebViewSampleModel;
})(observable.Observable);
exports.WebViewSampleModel = WebViewSampleModel;
exports.mainViewModel = new WebViewSampleModel();
main-page.js
var vmModule = require("./main-view-model");
// var webViewModule = require("ui/web-view");
// var webView = new webViewModule.WebView();
function pageLoaded(args) {
var page = args.object;
// var myWebView = page.getViewById("my-web-view");
// myWebView.getViewById().setPluginsEnabled(true);
page.bindingContext = vmModule.mainViewModel;
}
exports.pageLoaded = pageLoaded;
xml
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<StackLayout>
<StackLayout height="auto">
<WebView id="my-web-view" url="{{url}}" width="*" height="520"/>
</StackLayout>
<StackLayout>
<Label text="Copy Right @ Design 4 You" textWrap="false"/>
</StackLayout>
</StackLayout>
</Page>
Is there any way to web view caching
Your code is fine and works as expected - we have tested it with https://docs.nativescript.org/ and it loads within 3-4 seconds (first load) which is reasonable when loading larger web resources. However, this is documentation site with no big images at the initial page so it is also to be expected heavier sites with large chunks of data and big images to need more time until they cache the data in the web-view.
Currently, there is no plugin developed for caching web-view but even with caching that will hardly accelerate your loading time as the web-view needs the whole HTML structure to render as expected. As a good practice, developers should use web-views only when resources can not be reached in other way or can not be represented in a native mobile environment. One of the main advantages of the nativeScript framework is that it is not presenting all the data in slow web-views but in native elements from Android and iOS environments.
In the final cases when the web-view is needed it will come with this time price - the data presented with web-view will be rendered slower than with other approaches.
Regards,
Nikolay Iliev
Telerik by Progress