Develop Reference

onbeforeinstallprompt fails to fire

I'm building a PWA and have the following hooked event
let isCompat = "onbeforeinstallprompt" in window,
isSamsung = /Samsung/i.test(_ua)
if (!window.matchMedia('(display-mode: fullscreen)').matches
&& !window.matchMedia('(display-mode: standalone)').matches
&& !screenfull.isFullscreen
) {
console.log(isCompat, isSamsung, screenfull)
if(isCompat) {
window.addEventListener('beforeinstallprompt', (event) => {
...
btn.addEventListener('click', () => {
let s = invite.prompt()
if(invite.userChoice) ...
}, { once: true })
event.preventDefault()
invite = event
})
} else {
if(isIDevice) {
....
} else if(screenfull.isEnabled) {
...
}
}
The logic executes successful on latest chrome for android on a Samsung J5 1st generation. But not on the latest updated of Samsung Internet Browser 16.2.1.56 regardless of the fact that isCompat and isSamsung is true
My research so far shows that is should be firing so I am not sure why. Is there a shim that can be implemented to make it work on Samsung Internet?
an example and be viewed at https://622f59ba2b54ab2a844cf515--goofy-jackson-e12a89.netlify.app/

OAuth2 and UWP Xamarin.Forms

Can any one help me with this problem?
I don`t know how to use OAuth2 with UWP.
For example, on Andriod code of authentication looks like this:
[assembly: ExportRenderer(typeof(LoginPage), typeof(LoginPageRenderer))]
namespace TestTask.Droid
{
class LoginPageRenderer : PageRenderer
{
private static bool _isShown;
protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
{
base.OnElementChanged(e);
if (_isShown) return;
_isShown = true;
var activity = this.Context as Activity;
var auth = new OAuth2Authenticator(
clientId: "someId",
scope: "",
authorizeUrl: new Uri("https://oauth.vk.com/authorize"),
redirectUrl: new Uri("https://oauth.vk.com/blank.html"));
auth.Completed += (sender, eventArgs) => {
if (eventArgs.IsAuthenticated)
{
AuthInfo.Token = eventArgs.Account.Properties["access_token"].ToString();
AuthInfo.UserID = eventArgs.Account.Properties["user_id"].ToString();
}
else
{
// The user cancelled
}
};
activity?.StartActivity((Intent)auth.GetUI(activity));
}
}
}
so, on android the solution is in this method
protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
and in this row fo code
activity?.StartActivity((Intent)auth.GetUI(activity));
My question is: How I can do the same in UWP, or how I can make it work in UWP?

Thank you all! I`ve found a solution for my purpose for UWP platform.
[assembly: ExportRenderer(typeof(LoginPage), typeof(LoginPageRenderer))]
namespace TestTask.UWP
{
public class LoginPageRenderer : PageRenderer
{
private Windows.UI.Xaml.Controls.Frame _frame;
private bool _isShown;
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Page> e)
{
base.OnElementChanged(e);
if (_isShown) return;
_isShown = true;
if (Control == null)
{
WindowsPage windowsPage = new WindowsPage();
var auth = new OAuth2Authenticator(
clientId: "someID",
scope: "",
authorizeUrl: new Uri("https://oauth.vk.com/authorize"),
redirectUrl: new Uri("https://oauth.vk.com/blank.html"));
_frame = windowsPage.Frame;
if (_frame == null)
{
_frame = new Frame();
//_frame.Language = global::Windows.Globalization.ApplicationLanguages.Languages[0];
windowsPage.Content = _frame;
SetNativeControl(windowsPage);
}
auth.Completed += (sender, eventArgs) => {
if (eventArgs.IsAuthenticated)
{
AuthInfo.Token = eventArgs.Account.Properties["access_token"].ToString();
AuthInfo.UserID = eventArgs.Account.Properties["user_id"].ToString();
}
else
{
// The user cancelled
}
};
Type pageType = auth.GetUI();
_frame.Navigate(pageType, auth);
Window.Current.Activate();
}
}
}
}
Please mark it solved!

My question is: How I can do the same in UWP, or how I can make it work in UWP?
I'm not sure whether the Xamarin.Auth supports UWP or not, but for UWP, we can use Web authentication broker for OAuth, you can check the official WebAuthenticationBroker sample, it's not xamarin, but you can code it in native UWP project and use Custom renderer to do the same thing in Xamarin.

Xamarin.Auth supports UWP for Standard/Traditional quite long.
Xamarin.Forms support was recently added and is not tested thoroughly (1.5.0-alpha)

Keypress event not working on Android device

I have a directive which controls my input value desired formatted or not.
directive('validNumber', function(shareDataService)
{
return
{
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl)
{
if(!ngModelCtrl)
{
return;
}
ngModelCtrl.$parsers.push(function(val) {
if (angular.isUndefined(val)) {
var val = '';
}
var clean = val.replace(/[^-0-9\.]/g, '');
var decimalCheck = clean.split('.');
if(!angular.isUndefined(decimalCheck[1]))
{
decimalCheck[1] = decimalCheck[1].slice(0,2);
clean = decimalCheck[0] + '.' + decimalCheck[1];
}
if (val !== clean)
{
ngModelCtrl.$setViewValue(clean);
ngModelCtrl.$render();
}
return scope.hesapla(clean);
});
element.bind('keypress', function(event) {
if(event.keyCode === 32) { // space
event.preventDefault();
}
});
element.bind('keypress', function(event) {
if(event.keyCode === 45) { // - key
event.preventDefault();
}
});
}
};
})
It's working on browser perfectly but keypress event not working on the device.Tried to inspect device with google chrome but not firing. I also tried keyup or keydown but still not working. How can I get this done?
Thank you

Include jQuery Mobile file
What you need to do is just include a jQuery file into your project. A file named jQuery.mobile.js or quite similar (ex. jQuery.ui.js) of any version can help you.
You can download it from : Download | jQuery Mobile

ngCordova write file on Android

I'm trying to write file to local storage on Android device, using ngCordova function found on ionic forum. This is how the function looks:
$scope.exportClicked = function(options) {
var deferred = $q.defer();
$window.resolveLocalFileSystemURL($window.cordova.file.dataDirectory,
function(dir) {
dir.getFile('text.txt', {
create: true
}, function(fileEntry) {
fileEntry.createWriter(
function(fileWriter) {
if (options['append'] === true) {
fileWriter.seek(fileWriter.length);
}
fileWriter.onwriteend = function(evt) {
evt.fileEntry = fileEntry;
deferred.resolve(evt);
};
fileWriter.write(data);
},
function(error) {
deferred.reject(error);
}
);
}, function(er) {
deferred.reject(error);
});
});
return deferred.promise;
};
When I'm running app through ionic in webbrowser, it gives me an error:
TypeError: Cannot read property 'file' of undefined
at Scope.$scope.exportClicked (app.js:27)
I've installed cordova file plugin, but it looks like it can't find cordova.file functionality.
On Android device it won't work either. Any ideas?

You forgot to install file cordova plugin. https://github.com/apache/cordova-plugin-file

$window.cordova isn't defined. Since you are using ngCordova, and ngCordova has official support for the file plugin, I would start with the ngCordova documentation for the file plugin. Here is the bit you might be interested in:
$cordovaFile.writeFile(cordova.file.dataDirectory, "file.txt", "text", true)
.then(function (success) {
// success
}, function (error) {
// error
});
You also get the added bonus have having more readable code when you use the ngCordova implementation.
If you would rather follow your original example more closely, try replacing $window.cordova with window.cordova, or simply cordova.

Ext.device.notification.show creating errors in Phonegap - Sencha Touch 2

I have a Sencha Touch 2 project and everything works great in the web browser. No errors in the console, and everything looks good. Once I package it with Phonegap and run it on a mobile device, however, things don't work as well.
I am using ext.device.notification.show in two places in my application. At first, I was doing requires: 'Ext.device.*' and while it worked in web, the app wouldn't run on mobile and eclipse would give me the error message Uncaught TypeError: Cannot read property 'name' of undefined. I switched over to requires: Ext.device.Notification (exact spelling and capitalization) and now the app runs but when I click a button that should create a message box, I get the error Uncaught TypeError: Cannot call method 'confirm' of undefined. The problem is I have no method called confirm. In one case I have a method called confirmItem, but for the second button that should be invoking a message box I have no method remotely close to "confirm."
I'll post one of the controllers below (this one has the confirmItem method):
Ext.define('MyApp.controller.MainController',
{
extend: 'Ext.app.Controller',
requires: ['Ext.device.Notification'],
config:
{
refs:
{
mainView: 'mainview',
btnConfirm: 'mainview button[action=confirmItem]',
},
control:
{
'btnConfirm':
{
tap: 'confirmItem'
},
mainView:
{
onSignOffCommand: 'onSignOffCommand'
}
}
},
// Transitions
getSlideLeftTransition: function ()
{
return {
type: 'slide',
direction: 'left'
};
},
getSlideRightTransition: function ()
{
return {
type: 'slide',
direction: 'right'
};
},
onSignOffCommand: function ()
{
var me = this;
console.log('Signed out.');
loginView = this.getLoginView();
//MainView.setMasked(false);
Ext.Viewport.animateActiveItem(loginView, this.getSlideRightTransition());
},
confirmItem: function ()
{
Ext.device.Notification.show(
{
title: 'Confirm',
message: 'Would you like to Confirm?',
buttons: ['No', 'Yes'],
callback: function (button)
{
if (button == "Yes")
{
MyApp.app.getController('MainController')
.confirmPickup();
}
else
{
console.log('Nope.');
}
}
});
},
confirmPickup: function ()
{
var me = this;
var loginStore = Ext.getStore('LoginStore');
mainView = this.getMainView();
mainView.setMasked(
{
xtype: 'loadmask',
message: ' '
});
if (null != loginStore.getAt(0))
{
var user_id = loginStore.getAt(0).get('id');
var name = loginStore.getAt(0).get('name');
var winner = loginStore.getAt(0).get('winner');
}
if (winner === 1)
{
console.log('success');
}
else
{
console.log('fail');
}
}
});
I only assume this is a problem because whenever I push the button that should be calling confirmItem I get the error. Am I using Ext.device.Notification correctly, or Have I missed something needed to make it work in Phonegap?

I found the solution! Everything was fine from a Sencha Touch point of view in terms of using requires: Ext.device.Notification but some things were missing on the Phonegap side. Specifically, I needed to install the appropriate plugins.
Open a terminal and type: Phonegap local plugin list to see your currently installed plugins. I had none. I went ahead and installed:
org.apache.cordova.device
org.apache.cordova.dialogs
org.apache.cordova.vibration
by using the following reference: http://docs.phonegap.com/en/3.0.0/cordova_device_device.md.html and selecting options from the menu on the left.