pdf viewer in phonegap Android - javascript

I'm looking for a pdf viewer for Android using Phonegap 2.0. I tried the childbrowser plugin which worked on iOS but not on Android. I tried this http://www.giovesoft.com/2011/08/download-and-open-pdf-with-phonegap.html but that didn't work either, I get error messages like PhoneGap is not defined at file and cannot call method "showPdf" of undefined.

you can use pdf.js :
pdf.js is an HTML5 technology experiment that explores building a
faithful and efficient Portable Document Format (PDF) renderer without
native code assistance.
https://github.com/mozilla/pdf.js

I answered a similar question already (see Open PDF with PhoneGap in Android) but will do the same here. Use the ChildBrowser plugin as suggested in conjunction with Google Docs like so:
onclick='window.plugins.childBrowser.showWebPage(encodeURI("http://docs.google.com/viewer?url=' + pdfLink + '"));
This works fine for me and I have tested it in Android 2.1 up to 4.1.

The childbrowser plugin which I tried with does not open the pdf in android phonegap. However, it works for iOS. Another solution to your plugin query could be to use the Open With plugin. There is one disadvantage that this plugin does not open the pdf in the app itself. You can use the downloader plugin to download files and then try out the childbrowser plugin to access this pdf, which I think should be the solution

In Android, you can view the pdfs using Android Intents. This will show you all the pdf viewers available in your phone. You can select any and view the pdf
Eg :
private void showPdfAndroid(String url) throws IOException {
Intent intent = new Intent();
intent.setAction(android.content.Intent.ACTION_VIEW);
File file = new File(url);
String extension = url.substring(url.lastIndexOf(".")+1);
String type = "";
if (extension.toLowerCase().equals("pdf")) {
type = "application/pdf";
Log.d("application/pdf", "application/pdf");
}
intent.setDataAndType(Uri.fromFile(file), type);
cordova.getActivity().startActivity(intent);
Log.d("FileViewerPlugin", "View complete in" + url);
}

Child browser don't support pdf viewing in android . better you use Google docs viewer for it in android . here in another stack overflow question you will get complete answer

Related

How to open an URL with swift/cordova code triggered in HTML ? (by Javascript?)

I have a very sneaky problem. I'm using Cordova to embeded my web-app onto iOS app.
But we have external URL and with our technique, it's really painfull to open external URL. And Cordova plugins like InAppBrowser does not work (because our app is already use an inapp browser).
Goal : we want to open an external URL, from a HTML page, to the Safari navigator of the device.
Maybe with Javascript ? I thought about something like :
UIApplication.shared.open(url, options: [:], completionHandler: nil)
So maybe, we can add in MainViewController a command triggered by an HTML button who use Javascript to open the URL in Safari ?
Anyone have an idea ?
Many thanks
check for canOpenURL then open
if let url = URL(string: "https://www.google.com"),
UIApplication.shared.canOpenURL(url) {
UIApplication.shared.open(url, options: [:])
}

Read text file with Javascript?

I'm working on mobile app through XDK intel, How can I read text file from outside the app?
I tried this code, but it's not working!
function readFile (filepath){
var txtFile = "C:\test.txt";
var file = new File(txtFile);
file.open("r"); // open file with read access
var str = "";
while (!file.eof) {
// read each line of text
str += file.readln() + "\n";
}
file.close();
alert(str);
}
You are building a Cordova app (aka PhoneGap app) when you are creating an app for the Intel XDK. So the rules (and solutions) that apply to Cordova also apply to Intel XDK apps. The XDK is simply providing a way to make it easier to apply and use the standard Cordova tools, it is not providing a different runtime environment (other than including the option to replace the Android webview with a Crosswalk webview).
This describes, at a very high level, what Cordova and Cordova plugins do on an Android device > http://developer.android.com/guide/webapps/webview.html. Similar approaches are taken on iOS and Windows and other platforms supported by Cordova.
As Nicolas stated in his answer, you should use the Cordova File Plugin. On the doc page for that plugin you'll find two references that are worth reading:
http://cordova.apache.org/docs/en/latest/cordova/storage/storage.html
http://www.html5rocks.com/en/tutorials/file/filesystem/
Also, these may be of value:
http://www.html5rocks.com/en/features/storage
http://developer.android.com/training/basics/data-storage/files.html
http://developer.android.com/guide/topics/data/data-storage.html

Deeplinking mobile browsers to native app - Issues with Chrome when app isn't installed

I have a webpage, lets call it entry.html.
When a user enters this page, a javascript code (see below) is attempting to deep-link the user to the native iOS / Android app.
If the deep-link fails (probably if the app isn't installed on device), user should "fall back" to another page- lets call it fallback.html.
here is the javascript code that is running on entry.html:
$(function(){
window.location = 'myapp://';
setTimeout(function(){
window.location = 'fallback.html';
}, 500);
});
this is a standard deep-linking method that is recommended all over the network; try to deep-link, and if the timeout fires it means that deep-link didn't occur- so fallback.
this works fine, as long app is installed on device.
but if the app isn't installed, this is the behaviour when trying to deep-link:
Mobile Safari: I see an alert message saying "Safari cannot open this page..." for a moment, and then it falls-back properly to fallback.html- which is the expected behaviour.
Mobile Chrome is my problem.
when the app isn't installed, browser is actually redirected to the myapp:// url, which is of course, invalid- so i get a "not found" page, and fall-back doesn't occur.
Finally- my question is:
How can I fix my code so FALL-BACK WILL OCCUR on mobile Chrome as well? just like mobile Safari?
note: i see that LinkedIn mobile website does this properly, with Safari & Chrome, with or without the app installed, but i couldn't trace the code responsible for it :(
note2: i tried appending an iframe instead of window.location = url, this works only on Safari, mobile Chrome doesn't deep-link when appending an iFrame even if app is installed.
Thanks all!
UPDATE:
i found a decent solution, and answered my own question. see accepted answer for my solution.
for whoever is interested, i managed to find a decent solution to solve these issues with deeplinking Chrome on Android.
i abandoned the myapp:// approach, i left it functioning only in cases of an iOS device.
for Android devices, i'm now using intents which are conceptually different than the myapp:// protocol.
I'm mainly a web developer, not an Android developer, so it took me some time to understand the concept, but it's quite simple. i'll try to explain and demonstrate MY solution here (note that there are other approaches that could be implemented with intents, but this one worked for me perfectly).
here is the relevant part in the Android app manifest, registering the intent rules (note the android:scheme="http" - we'll talk about it shortly):
<receiver android:name=".DeepLinkReceiver">
<intent-filter >
<data android:scheme="http" android:host="www.myapp.com" />
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
</receiver>
now, after this is declared in the app manifest, i'm sending myself an email with "http://www.myapp.com" in the message.
when link is tapped with the Android device, a "chooser" dialog comes up, asking with which application i want to open the following? [chrome, myapp]
the reason this dialog came up upon tapping on a "regular" url, is because we registered the intent with the http scheme.
with this approach, the deeplink isn't even handled in the webpage, it's handled by the device itself, when tapping a matching link to an existing intent rule defined in the Android app manifest.
and yes, as i said, this approach is different by concept than the iOS approach, which invokes the deeplink from within the webpage, but it solves the problem, and it does the magic.
Note: when app isn't installed, no chooser dialog will come up, you'll just get navigated to the actual web page with the given address (unless you have more than 1 browser, so you'll need to choose one... but lets not be petty).
i really hope that this could help someone who's facing the same thing.. wish i had such an explanation ;-)
cheers.
It is very important to make sure that when you try to open a deeplink URL with JavaScript that the URL is properly formatted for the device and browser. (If you do not use the appropriate deeplink URL for the browser/platform, a user may be redirected to a “Page Not Found”, which is what you experience.)
Now you must note that Chrome on Android has a different URL format than the old standard Android browser 1! You need to annotate the deep links using href="android-app://" in the HTML markup of your web pages. You can do this in the section for each web page by adding a tag and specifying the deep link as an alternate URI.
For example, the following HTML snippet shows how you might specify the corresponding deep link in a web page that has the URL example://gizmos.
<html>
<head>
<link rel="alternate"
href="android-app://com.example.android/example/gizmos" />
...
</head>
<body> ... </body>
For more details, see the references here:
https://developer.chrome.com/multidevice/android/intents
https://developers.google.com/app-indexing/webmasters/server
https://developer.android.com/training/app-indexing/enabling-app-indexing.html#webpages
And here's a deep link testing tool for Android: https://developers.google.com/app-indexing/webmasters/test.html
Hope that helps.
1 Since the old AOSP browser was replaced by chromium, this is now the default way to handle deep links for recent Android versions. Nonetheless, Android still requires a conditional soltion, because older OS versions still use the AOSP browser.
I have created a Javascript plugin, which supports most of the modern browsers on mobile. But it requires to have deep linking landing pages to be hosted on cross domain(different than universal link url) to work on ios9 Facebook using universal linking. There is also different way to get that working on the Facebook iOS9 using Facebook SDK. I am sharing this if anyone might find this helpful. Currently it does not fallback option, but if falls back to the App Store.
https://github.com/prabeengiri/DeepLinkingToNativeApp
I am Using this Code to for deeplinking.
If the app is installed the app will open up..
If the app is not installed then this remains as it is..
If you wish to add any other condition for app no install then just uncomment the setTimeout code .
<script>
var deeplinking_url = scootsy://vendor/1;
$(document).ready(function(){
call_me_new(deeplinking_url);
});
var call_me_new = function(deeplinking_url){
if(deeplinking_url!=''){
var fallbackUrl ='http://scootsy.com/';
var iframe = document.createElement("iframe");
var nativeSchemaUrl = deeplinking_url;
console.log(nativeSchemaUrl);
iframe.id = "app_call_frame";
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.onload = function () {
document.location = nativeSchemaUrl;
};
iframe.src = nativeSchemaUrl; //iOS app schema url
window.onload = function(){
document.body.appendChild(iframe);
}
//IF the App is not install then it will remain on the same page.If you wish to send the use to other page then uncomment the below code and send a time interval for the redirect.
/*
setTimeout(function(){
console.log('Iframe Removed...');
document.getElementById("app_call_frame").remove();
window.location = fallbackUrl; //fallback url
},5000);*/
}
};
</script>
setTimeout(function () { if (document.hasFocus()) { window.location = 'URL WILL BEHERE';} }, 2000);
window.location = 'app://';
Need to check document.hasFocus() here because if app is open then playstore url is also open in browser
I also had similar issue, there is a possible alternative for this. If the app is not installed on user's device we can redirect that to some other url.To know more about it Check Here
Example:
Take a QR code
In my case its working fine in opera and chrome browser my deeplink url is
"intent://contentUrl + #Intent;scheme=" +envHost +;package="+envHost+";end";
For other browser create iframe and append the url.
Note -: iframe url append having issue with old device and in firefox its opening app dialog .

window.open returns null on windows phone 8

I am currently working on a hyrbid mobile app for windows phone 8.0 and windows phone 8.1 using the cordova framework. There is a scenario where I need to use the in-app browser to launch a login page.
I used the following javascript code .
var authWindow = window.open('http://www.mylogin.com', 'mywindow', 'location=yes,toolbar=yes,clearsessioncache=yes');
Although the window opens fine I am getting null as the reference to the window object here. I need the reference to perform other actions on the opened window.
On further research I found that issue exists in desktop IE11 also and we have to disable the protected mode. Once I did it and ran the code on desktop IE11 it worked fine.
I am not sure how to achieve the same in my scenario. Is there any setting I need to change on the browser control? How do you resolve this?
Open external pages on Windows Phone as a Javascript Mobile App is a real problem. On Android and IOS you just use "windows.open" and you are good to go. But on WP, we will need to create a C# plugin.
On my app, I did the following:
1 - You will need a javascript function that calls the plugin.
Javascript call
function openExternalURL(theURL) {
cordova.exec(function () { }, function () { }, "yourApp.main.plugins.YourPluginClass", "openURLWithNative", [theURL);
};
2 - Now you need to implement a C# class that calls Windows Phone browser with the correct URL. For it, you should create a .cs file (in the example its name is YourPluginClass.cs):
YourPluginClass.cs (C#)
namespace yourApp.main.plugins
{
class YourPluginClass : BaseCommand
{
public void openURLWithNative(string uri)
{
WebBrowserTask task = new WebBrowserTask();
string optVal = JsonHelper.Deserialize<string[]>(uri)[0];
task.Uri = new Uri(optVal);
task.Show();
}
}
}
This way, you can open any external URL on Windows Phone like Android and IOS.
Hope it helps. Best Regards!
There is a few good workaroungs that worked for me in :
Do a window.open("about:blank", "newPage"); before the AJAX call and then after the call add the URL to the opened window by calling window.open("http://google.com", "newPage");.

Select image iphone simulator using phonegap camera api

I'm new to Xcode and iPhone apps. I want to select an image from iPhone (camera or library) and send to php via ajax.
I'm using the phonegap framework, Xcode iPhone SDK version 3.1.x. On clicking button it calls function with parameter 0 or 1, but it does not initialize camera or display the library.
I used the code in this link
it shows this error in debug console:
2010-03-25 23:36:02.337 PhoneGap[7433:207] Camera.getPicture: Camera not available.
simulator dsnt have camera, but photos(from library) also not wokring!
what might be the error?
I think when using navigator.camera.getPicture first check for camera and if not break and shows error ~?
For using photo library in iphone simulator. You have to conforms to the delegate UINavigationControllerDelegate, UIImagePickerControllerDelegate and alloc pickerview and set delegate on it and then check
if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {
[self presentModalViewController:imagePickerView animated:YES];
}
I don't know how are you using that framework. But UIImagePickerController is the class I use to choose photos from the iPhone library or the device's camera. And all you need to do is set it to display the library:
UIImagePickerController *picker = [[UIImagePickerController alloc] init];
//set your delegate and other properties...
picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
or
picker.sourceType = UIImagePickerControllerSourceTypeCamera;
You should check it out.
Cheers

Categories