Load Local HTML/JavaScript/CSS Inside NativeScript App - android-webview

With a NativeScript iOS and Android app using Angular, how do I load, inside of a WebView, a locally stored html file that has JS and CSS references? I am able to display the WebView but I get the error that the file is not found because I do not know where to point the src from my component.
Currently I have the files inside src/assets and in there is the index.html
Is there a more appropriate place to store these files within the app? Is there a better way to display this than a WebView? How do I reference this file as the source of a WebView?
I will also be needing to know how to reference a file the app downloads. Where does iOS and Android store downloaded files from within the app? How do i reference these files from my WebView?
Thank you.

You have to use absolute path while importing local JS / CSS / Image into WebView. Here is a Playground sample. Unlike the given example if you want to load files those are packed with app, simply use app directory instead with right path to file.

I'm using path like:
src='~/assets/player.iframe.html'
And in the webpack.config.js I just added
new CopyWebpackPlugin([
{ from: { glob: "assets/**" } }, <= Added this row
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
...

Related

Swift : WKWebView not showing image on device

I am loading a html file to WKWebview from local everything is working fine but it is not showing image on iPhone.
This is the code i am using to load a html file
do{
let fileName = try String(contentsOf: destinationURLForFile)
print("fileName is equal to\(fileName)")
webView.loadHTMLString(fileName, baseURL: destinationURLForFile)
}catch{
}
Trying to fix since hours. Any suggestions would be helpful!
I had a very similar issue yesterday, you need to tell the build to copy this file to the device as part of the bundle.
Make sure sure you have the HTML file in the Copy Bundle Resources part of the build settings. Just go to the project settings > build phases > copy bundle resources and if your HTML file is not listed there, click the + button and add it.
This should solve your issue, if not could you please provide more information, are you getting any errors, does the file actually exist?

Barcode Scanner add button inside scanning page

I have implemented Barcode Scanner for my Ionic project for both iOS and Android.
But when my Scanner starts, I want to add a button inside the view and add an event to it.
I am using phonegap-plugin-barcodescanner plugin
Please help me with how to append something inside the scanning view.
If you want to add stuff to the layout of your scanner, you need to write code in the plugin itself.
YOU CANNOT INTERACT DIRECTLY WITH THE SCANNER FROM THE JS.
In fact, the plugin you use uses cordova.exec in order to launch the scanner view by passing it arguments.
For Android, you just have to know Java and some XML.
For iOS, you have to know Objective-C / Swift.
For Android, you may have 4 files to modify :
plugin.xml : home of all you dependencies
Your_Activity.java : java file which permits to interact with the scanner view itself by calling buttons, textviews, layouts, etc...
Your_Main.java : java file which gets and returns parameters from the js file of your plugin
Your_Layout.xml : xml file in res/layout which is composed of xml attributes interpreted by java
Beside that, I found two good plug-ins for cordova/ionic apps from GitHub :
phonegap/phonegap-plugin-barcodescanner
tjwoon/csZBar
And there's the expensive one, Scandit, which resolves all of your problems for about 200$ per month, check the pricing for every solution they propose.
If you use their SDK, you may be able to interact with the scanner view from js files because of their work, but they're the only company I know to do that. (perhaps ManateeWorks...)
Under this part is what I've been doing since mid-July, in order to give you ideas.
I'm currently making an ANDROID scanner layout for my ionic app.
You can find my GitHub repository here, I forked it from tjwoon's csZBar and I added some stuff my ionic app needs.
I guarantee nothing, but I'm pretty sure I'll implement an iOS layout soon (at least I'll try), and unfortunately I don't really know android / iOS mobile programming.
Here's a screenshot of the layout
I made a "tab bar" composed of 3 image buttons, a "top bar" composed of text views & image buttons. The scanner is embedded between these two.
There are pop-ups for the app's features, which pause the scanner and respond to click events.
See the README and Java files (csZBar/android/) for more information.
Don't hesitate to ask questions and/or inspect my code.
Warning
1) It's currently on development so use it at your own risks (use branch master, not develop)
2) I only modified the android part, not the iOS!
3) It doesn't work for Windows phone...
After adding plugin, installngCordova with bower install ngCordova
Add link to ng-cordova.js JS file above reference to cordova.js:
index.html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
Also, don't forget to add ngCordova module:
app.js
angular.module('myApp', ['ngCordova'])
Now you're ready to use the plugin like this:
Controller:
var module = angular.module('starter.controllers', []);
module.controller('BarcodeCtrl', function($scope, $cordovaBarcodeScanner, $ionicPlatform) {
$ionicPlatform.ready(function(){
$scope.scan = function() {
$cordovaBarcodeScanner
.scan()
.then(function(barcodeData) {
alert(JSON.stringify(barcodeData));
}, function(error) {
alert(error);
});
};
});
});
View:
<button ng-click="scan()">Scan</button>

JavaScript along with the HTML file is not running in UIWebView

I have placed the HTML Resource files and java script files with the project files in my iphone application. My objective is to build an application which has UIWebview which loads when we tab on the app icon. The UIWebView should actually load the local html content that I have in the resource folder. I can see the HTMl content in the webview but its not running the Javascript..
Checkout stringByEvaluatingJavaScriptFromString: in the
UIWebView Class Reference
Her the actual problem comes with adding the files(javascript and css) in the project. while adding files following option should be clicked that showed in the following image.

How to render all kinds of SVG files on iPhone?

For rendering svg file on iPhone I have downloaded a project from GitHub
SVGQuartzRenderer
but it shows the following errors:
UIKit/UIKit.h No such file or directory
(I am not able to add it using add existing frameworks)
Libxml/tree.h:No such file or directory
Expected specifier-qualifier list before xmlParserCtxtPtr
Does anyone know how I can make this project work?
I have also found another framework:
SVGKit.
It works well for some SVG files but not for all.
Is it possible to render any SVG file in iPhone without using UIWebView and are there any tutorials or sample code?
Starting Xcode 12, you can add the .svg file in your Assets Catalog and do this:
let image = UIImage(named: "SomeSVGImage")
ref: https://developer.apple.com/documentation/xcode-release-notes/xcode-12-beta-release-notes

iphone webview show html with images and css file

I found some interesting URL http://cubiq.org/rotating-wheel-for-your-iphone-webapps which has rotational menu. Its good. It has html file along with images, css files etc.
In iPhone app, I copied (to root folder) all the files and imported to project. I'm using UIWebView's load request to load the html. But I'm not getting the rotatable menu.
Can some one post me the code (or tutorial or prototype or example) on how to use it?
Also let me know how to catch the even on click on "OK" button at the middle of the html.
Thanks in advance.
checkout IUI : http://code.google.com/p/iui/