I have a hybrid app on the play store currently (The Stylista) which runs perfectly across different platforms until its loaded on a Samsung Galaxy 5 or 6..
The app opens to a white screen with my loading gif just spinning and get no further - is there something I am missing? Code should be added?
I have been doing research and see that it is a permission issue..
White screen and loading gif
The answer was adding this snippet to the config file:
<gap:config-file platform="android" parent="/manifest">
<application android:debuggable="true" />
</gap:config-file>
Then I was able to debug in the browser - ALSO with the new android versions, when testing the connection to Cordova, it was not returning the Connection variable thus failing as it was undefined. You can change the code to read:
function getData(tableName, data, onSuccess) {
if (navigator && navigator.connection && navigator.connection.type) {
var networkState = navigator.connection.type;
if (navigator.connection.type == 'none') {
showMessage("You don't appear to be connected to the internet. Please check your connection.");
return;
}
}
Instead of the default:
function getData(tableName, data, onSuccess) {
if (navigator && navigator.connection && navigator.connection.type) {
var networkState = navigator.connection.type;
if (networkState == Connection.NONE) {
showMessage("You don't appear to be connected to the internet. Please check your connection.");
return;
}
}
This will allow your hybrid app to work again :)
Related
I have an ionic application for android and IOS, the app display a message when specific action happen.
But i realized that there is a difference in this action if the IOS OS was higher than 11 or less than 10.
So i want to detect IOS' version, if it was less than 10 display this message and if it was higher then don't displau it.
I'm new to ionic, so how can i achive this?
CODE:
function (err) {
if (err == "has no access to assets") {
_this.presentAlert('no access');
}
else if (err == "no image selected") {
_this.presentAlert('nothing selected');
}
});
The first if is where i want to check the device's OS version, if it was less than 11 then display the message.
How to do it?
for version: const currentPlatformVersion = ionic.Platform.version();
if it is ios device const isIOS = ionic.Platform.isIOS();
even this const deviceInformation = ionic.Platform.device(); returns an object with the device that runs the ionic app.
I'm using the HTML5 notification API to notify the user in Chrome or Firefox. On desktop browsers, it works. However in Chrome 42 for Android, the permission is requested but the notification itself is not displayed.
The request code, works on all devices:
if ('Notification' in window) {
Notification.requestPermission();
}
The sending code, works on desktop browser but not on mobile:
if ('Notification' in window) {
new Notification('Notify you');
}
Try the following:
navigator.serviceWorker.register('sw.js');
Notification.requestPermission(function(result) {
if (result === 'granted') {
navigator.serviceWorker.ready.then(function(registration) {
registration.showNotification('Notification with ServiceWorker');
});
}
});
That is, use ServiceWorkerRegistration»showNotification() not new Notification().
That should work on Android both in Chrome and in Firefox — and on iOS in Safari, too.
(The sw.js file can just be a zero-byte file.)
One caveat is that you must run it from a secure origin (an https URL, not an http URL).
See https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration/showNotification.
If you already have a service worker registered, use this:
navigator.serviceWorker.getRegistrations().then(function(registrations) {
registrations[0].showNotification(title, options);
});
Running this code:
if ('Notification' in window) {
Notification.requestPermission();
}
Console in Chrome DevTools shows this error:
Uncaught TypeError: Failed to construct ‘Notification’: Illegal
constructor. Use ServiceWorkerRegistration.showNotification() instead
A better approach might be:
function isNewNotificationSupported() {
if (!window.Notification || !Notification.requestPermission)
return false;
if (Notification.permission == 'granted')
throw new Error('You must only call this \*before\* calling
Notification.requestPermission(), otherwise this feature detect would bug the
user with an actual notification!');
try {
new Notification('');
} catch (e) {
if (e.name == 'TypeError')
return false;
}
return true;
}
Function Source: HTML5Rocks
I had no trouble with the Notification API on Windows Desktop. It even worked without issues on Mobile FF. I found documentation that seemed to indicate Chrome for Android was supported too, but it didn't work for me. I really wanted to prove the API could work for me on my current (2019) version of Chrome (70) for Android. After much investigation, I can easily see why many people have had mixed results. The answer above simply didn't work for me when I pasted it into a barebones page, but I discovered why. According to the Chrome debugger, the Notification API is only allowed in response to a user gesture. That means that you can't simply invoke the notification when the document loads. Rather, you have to invoke the code in response to user interactivity like a click.
So, here is a barebones and complete solution proving that you can get notifications to work on current (2019) Chrome for Android (Note: I used jQuery simply for brevity):
<html>
<head>
<script type="text/javascript" src="libs/jquery/jquery-1.12.4.min.js"></script>
<script>
$( function()
{
navigator.serviceWorker.register('sw.js');
$( "#mynotify" ).click( function()
{
Notification.requestPermission().then( function( permission )
{
if ( permission != "granted" )
{
alert( "Notification failed!" );
return;
}
navigator.serviceWorker.ready.then( function( registration )
{
registration.showNotification( "Hello world", { body:"Here is the body!" } );
} );
} );
} );
} );
</script>
</head>
<body>
<input id="mynotify" type="button" value="Trigger Notification" />
</body>
</html>
In summary, the important things to know about notifications on current (2019) Chrome for Android:
Must be using HTTPS
Must use Notification API in response to user interactivity
Must use Notification API to request permission for notifications
Must use ServiceWorker API to trigger the actual notification
new Notification('your arguments'); This way of creating notification is only supported on desktop browsers, not on mobile browsers. According to the link below. (scroll down to the compatibility part)
https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
For mobile browsers below is the way you create a notification (this also works on desktop browsers)
navigator.serviceWorker.ready.then( reg => { reg.showNotification("your arguments goes here")});
Tested on browsers using webkit engine.
For more information please visit below links:
https://developers.google.com/web/updates/2015/05/notifying-you-of-changes-to-notifications
https://developers.google.com/web/fundamentals/push-notifications/display-a-notification
For 2-3 days I'm trying to use Chrome rich notification. I've read some reviews regarding this but nobody tells how to use implement it.
I want to try it in a html test page. How can I do this? because I couldn't manage to show at least a basic notification... :(
I want to implement this in an extension that I'm building. How can I do this? There are special instructions?
I don't need this simple notification:
function notifyMe() {
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
else if (Notification.permission === "granted") {
var notification = new Notification("Message");
}
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if(!('permission' in Notification)) {
Notification.permission = permission;
}
if (permission === "granted") {
var notification = new Notification("Message");
}
});
}
}//--Notification code--
I need rich notification because I need a bunch of options which this is offering.
Can someone help me with a tutorial or a html test page to understand how to implement it?
1) You can't use most of chrome APIs outside extensions with proper permissions. So you cannot test it in a standalone HTML file - unless it's packed in an extension, i.e. an options page.
So you can add a test.html file to an extension's folder, and open it as
chrome-extension://yourExtensionIdHere/test.html
It might be easier to test it in the background script though.
2) Well, you need to read the docs! There's also some examples in this article.
Points to remember:
You need to declare the "notifications" permission.
You can't use them in a content script.
Icon is required.
Callbacks (even doing nothing) are required (this was a bug until Chrome 42).
I highly recommend using a diagnostic callback:
function diag() {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
}
}
chrome.notifications.create(id, options, diag);
It will warn you of any errors while using the API.
I am a WP dev beginner and learning how to write a simple video recorder app. I am using javascript and HTML on VS Pro 2013 and debugging on my actual device Lumia 520 (running Windows Phone 8.1 Preview). I read through a body of documentations and found that the MediaCapture class was the core class for this purpose. So I started following some tutorials and wrote up some functions to access the camera and display a preview in a HTML5 video tag. However, I wasn't successful in getting the MediaCapture object initialized, not even displaying the preview. Below are the major functions of which the first one was problematic:
function initCapture() {
findRearFacingCamera().then(function (cameraId) {
try {
if (cameraId != null && cameraId != "") {
// Initialize the settings
captureInitSettings = null;
captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
captureInitSettings.videoDeviceId = cameraId;
captureInitSettings.streamingCaptureMode = Windows.Media.Capture.StreamingCaptureMode.video;
captureInitSettings.photoCaptureSource = Windows.Media.Capture.PhotoCaptureSource.videoPreview;
captureInitSettings.realTimeModeEnabled = true;
// Initialize the capture
oMediaCapture = null;
oMediaCapture = new Windows.Media.Capture.MediaCapture();
oMediaCapture.initializeAsync(captureInitSettings).then(preview, errorHandler);
}
} catch (e) { }
});
}
function preview() {
var preview = document.getElementById("PreviewScreen");
preview.msZoom = true;
if (preview != null) {
preview.src = URL.createObjectURL(oMediaCapture);
preview.play();
}
}
function errorHandler(e) {
var information = document.getElementById("message");
information.innerHTML = e.message;
}
During debugging, I paused at the statement oMediaCapture = new Windows.Media.Capture.MediaCapture(); in the initCapture() function. At this point, captureInitSettings.videoDeviceId has the value: "\\?\DISPLAY#QCOM_AVStream#3&25691128&0&UID32768#{e5323777-f976-4f5b-9b55-b94699c46e44}\Back Sensor", which I believed was a correct identification of the rear camera that I intended to use. Then, when I continued with a break point set at var preview = document.getElementById("PreviewScreen"); in function preview(), which was supposed to be called upon successful initialization of the MediaCapture object, the program was trapped into the errorHandler() function instead, with the error message being "Access is denied" with error number "-2147024891". So I guess the problem rose from the .initializeAsync() function, which was unsuccessful. Deeper causes might also be related to the permission to access the camera. BTW, I have enabled the webcam and microphone capabilities for this app, which was not the issue.
I believe I was missing something either in the code or in the big picture of the development settings. Please help me identify the issue and let me know if any additional information is needed. Much appreciated!
Did you make sure you added the Rear Camera requirement in your Package Manifest?
Turned out the problem was really with my device. Recall that I was testing on a Lumia 520 with Windows Phone 8.1 preview, the firmware stayed at Lumia Black. After upgrading the firmware to Lumia Cyan (parallel to Windows Phone 8.1) using the Nokia Recovery Software Tool, the problem disappeared.
I'm in the process of building a single mobile-optimized page with a contact-form and a receipt-page.
In our CMS we have a "desktop"-page with the same content, but I am not able to edit the desktop-page in terms of CSS, redirect or anything of the sorts.
The mobile-page is going to be used for a mobile-only campaign. However, I'd like to make sure, that should someone end up on the page from a desktop or a tablet, they'd be redirected to the desktop-version instead.
I've seen scripts of this sort:
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
But hey, mobiles have much higher resolutions these days, so making a reverse "if >=699 then redirect to desktop-site", probably won't work for me, will it? Samsung Galaxy s 3 almost has desktop resolution...
Using media queries is not really an option, seeing as this is two seperate sites (due to the old, rigid CMS).
So how do I redirect non-mobile and tablet users, while anyone on any mobile phone stays on the mobile-page page.
Please note - our servers don't run PHP and I cannot makes changes in server-side files. I need something JavaScript-ish I think.
here is a nice snippet that I use:
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i) ? true : false;
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i) ? true : false;
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) ? true : false;
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
}
};
if (isMobile.any()) {
window.location = 'http://m.example.org';
}
I never really understood why so many people are looking for detecting "mobile devices". As front-end dev, you actually shouldn't are about the such called mobile devices as much as you're looking for browser-vendors and that is, not at all.
Why not checking for capabilities instead? Create a dynamic, progressive enhanced web-app which adapts to its current environment. Doesn't matter if that means touch-events or standard-events, screen resolution or other things.
However, if you persist on checking for browsers or devices, your best shot still is the userAgent string located in the navigator object, see #MihaiIorga's answer.
However, we should really try to avoid those "sepparation" in entirely different apps/projects for browser and/or devices. I understand the point if there already is a more or less "huge" application or site which needs to work proberly on another device in a very short amount of time, but on the long run you won't do much good with that practice. Many more devices / browsers (versions) / {things I can't think of} will get released in the future.
// To Check if Mobile browser,then redirect to mobile version website otherwise open web url.
//alert(navigator.userAgent);
// userAgent gives all info related to browser,os,device info
var index = navigator.appVersion.indexOf("Mobile");
if (index>0)
{ window.location.href='[mobile page url]'; }