Develop Reference

Web Share API not working on iOS: Angular

I am trying to share an image like a native app via web. I am using Angular for the same. I have used the web share API. This works normally on Android however, throws an error while in iOS(Both Safari and Chrome). I am using a share button to trigger this.
This is my code:
if (
this.windowNavigator.canShare &&
this.windowNavigator.canShare({ files: [file] })
) {
this.windowNavigator
.share({
files: [file],
title: "Vacation Pictures",
text: "Photos from September 27 to October 14.",
})
.then(() => console.log("Share was successful."))
.catch((error) => console.log("Sharing failed", error));
} else {
console.error("Cannot use Web Share API");
}
The error I receive is: Cannot use Web Share API
This should typically happen if the browser is not supported.
However, according to https://caniuse.com/#search=web%20share , Safari 13 on iOS is supported.
Please note that I tried logging the navigator object to the console and it does have the share() proto. I am running it over an HTTPS server.
Kindly guide me as to how to proceed.

The error message you receive is, as you know, propagated by your own code. You log the error when navigator does not have a canShare property or navigator.canShare({ files: [file] }) returns falsy.
But the API you need to consume is navigator.share not navigator.canShare as support for the latter is much more limited.
According to MDN as of May 13, 2020:
To work around this problem, consider the following approach
if (typeof this.windowNavigator.share === "function") {
try {
await this.windowNavigator.share({
files: [file],
title: "Vacation Pictures",
text: "Photos from September 27 to October 14.",
});
console.log("Share was successful.");
}
catch (error) {
console.log("Sharing failed", error);
}
}
else {
console.error("Cannot use Web Share API: API unavailable.");
}

Edit (9 June 2021): Web Share API Level 2 is available and usable by default in the iOS 15 Developer Beta, which means it most likely will be available in the final public release of iOS 15.
Like Aluan noted, the API has limited support and is not supported on iOS at all. Keep in mind that this means it is not supported on any iOS browser, even Chrome, since all browsers on iOS use the same (WebKit) engine.
From the App Store Review Guidelines:
2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript.

microsoft speech recognition + nodejs

Is the nodejs cognitive services speech sdk still supported? I know how to do this for the browser based sdk, but it looks like the nodejs version doesn't work, it doesn't capture any microphone input.
Notably, there are no examples publish that use AudioConfig.fromDefaultMicrophoneInput for nodejs. The nodejs sdk works perfectly fine with AudioConfig.fromStreamInput
Here's the relevant code:
var speechsdk = require("microsoft-cognitiveservices-speech-sdk");
var subscriptionKey = ";)";
var serviceRegion = "eastus"; // e.g., "westus"
const speech_Config = speechsdk.SpeechConfig.fromSubscription(subscriptionKey, serviceRegion, "en-US");
const audioConfig = speechsdk.AudioConfig.fromDefaultMicrophoneInput();
let speech_recognizer= new speechsdk.SpeechRecognizer(speech_Config, audioConfig);
speech_recognizer.recognizeOnceAsync(
function (result) {
console.log(result);
speech_recognizer.close();
speech_recognizer = undefined;
},
function (err) {
console.trace("err - " + err);
speech_recognizer.close();
speech_recognizer = undefined;
});
I get an error saying: window is not defined
npm: https://www.npmjs.com/package/microsoft-cognitiveservices-speech-sdk

For this error , Microsoft engineers has an explain for it here .
It is due to the default microphone support uses the Web Audio API to
conjure a microphone stream. The node environment doesn't support
this.
As a workaround , for pure node code you can use a file, push or pull
stream to get audio into the speech recognition engine.
Hope it helps : )

Syncfusion controls not loading on iOS native UIWebView

I have a web application that built with ASP.NET MVC and used Syncfusion controls in it. Also, I am building iOS and Android application using native WebView.
The problem I am currently facing that Syncfusion controls are not working at iOS native UIWebView but it works fine at Android Webview and other Web browsers.
[Error] TypeError: null is not an object (evaluating 't[1]')
getBrowserDetails (ej.web.all.min.js:10:2620892) setWidthToColumns
(ej.web.all.min.js:10:2713042)
_completeAction (ej.web.all.min.js:10:2705521) sendDataRenderingRequest (ej.web.all.min.js:10:2703872)
_renderGridContent (ej.web.all.min.js:10:2684094) render (ej.web.all.min.js:10:2674498)
_initGridRender (ej.web.all.min.js:10:2664775)
_checkDataBinding (ej.web.all.min.js:10:2631224)
_init (ej.web.all.min.js:10:2626321) (anonymous function) (ej.web.all.min.js:10:19759) (anonymous function)
(ej.web.all.min.js:10:20802) (anonymous function)
(actelion-test.pulselinks.com:995)
Above error is thrown only for the page which has SyncFusion control. Becuase of that error page failed to load the required scripts in the WebView and application not working as expected
My current Syncfusion script ej.web.all.min.js version is 14.2.
It would be very helpful if you let me know why I am getting above error and how can I resolve the error?
Thanks to advanced for your help.

We could see you are facing some complexities while launching the Grid from Cordova browser in an IOS Platform. We can overcome this by changing the functionality of the getBrowserDetails as shown in the following code example.
<script>
$(function () {
. ..
var getBrowsedtls = function () {
var b = navigator.userAgent.match(/(firefox|chrome|opera|msie|safari|ipad|iphone|ipod touch|android|)\s?\/?(\d+(.\d+)*)/i);
if (!!navigator.userAgent.match(/Trident\/7\./))
return { browser: "msie", version: $.uaMatch(navigator.userAgent).version };
return { browser: b[1].toLowerCase(), version: b[2] };
};
$("#test").ejGrid({
dataSource: values,
. . . .
showSummary: false,
load: function(args){
this.getBrowserDetails = getBrowsedtls;
},
. . .
});
});
</script>
We have changed the method details in the load event of the Grid. Refer to the following API Reference.
https://help.syncfusion.com/api/js/ejgrid#events:load

Cordova In App Browser event not firing IOS

Trying to authenticate users on my ionic application through an external service and I need to use cordovas In app browser! The code works perfectly on android however on iOS the "loadstop" event never fires and thus, the browser never redirects itself back to the application. The code I have looks like this:
$rootScope.$on('$cordovaInAppBrowser:loadstop', function (e, event) {
console.log('inappbrowser loaded', event);
var regex = /* regex to determine if url is correct redirected url */
var res = regex.test(event.url);
alert('loaded: ' + event.url);
alert('regex result: ' + res);
if(res === true) {
$cordovaInAppBrowser.close();
}
});
if(okta) {
if (typeof window.localStorage.msRefreshToken === 'undefined') {
document.addEventListener('deviceready', function () {
$cordovaInAppBrowser.open('urlforExternalservicehere', '_blank', options);
}, false);
} else {
TokenStore.refreshAccessToken();
}
}
when the code is run no alert appears on the screen. Also, once the app has reached the external service and the username of the user is entered, it is then redirected to another url, which the user will then use another set of credentials to authenticate against. This in turn returns a token for the application to authenticate use.
Thus, in a perfect iOS world where it matches the current android experience, the loadstop event fires three times, and the third time the "loadstop" event would fire and the regex would return true and close the in app broswer.
If I need to supply more code to help solve this issue please let me know!
Cordova Version: 4.2.0
Ionic: 1.4.5
iOS: 8 and 9
Using NgCordova for Cordova functionality
UPDATE: when running the application on an emulator and checking the console logs, I find this error:
Error: Module cordova-plugin-inappbrowser.inappbrowser does not
exist., http://10.117.1.46:8100/cordova.js, Line: 1402
I have the plugin installed so I don't know how its missing the plugin. Does anyone have a remedy for this? Thanks!

iabRef = window.open('http://XYZ.php', '_blank', 'location=no,toolbar=no');
iabRef.addEventListener('loadstart', iabLoadStart);
iabRef.addEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('loaderror', iabLoadError);
iabRef.addEventListener('exit', iabClose);
iabRef.addEventListener('loadstart', function(event) {
if (event.url.match("mobile/close")) {
iabRef.close();
window.location = 'index.html';
}
}
);

Problem was my iOS platform wasn't latest.
So when you developing apps using cordova make sure your platform versions and plugins are up-to date with OS upgraded.
So all I had to do is
Removing iOS platform.
cordova platform rm ios
Adding iOS platform - Latest Version
cordova platform add ios
Removing the plugin cordova-plugin-inappbrowser
cordova plugin remove cordova-plugin-inappbrowser
Adding the plugin cordova-plugin-inappbrowser - Latest Version
cordova plugin add cordova-plugin-inappbrowser

Why is WInJS included automatically when targeting Windows 8 in Cordova?

We're developing an app using AngularJS, and when we're targeting Windows 8 I noticed that the generated Visual Studio project included WinJS as a reference. Since we're not using WinJS I simply removed the reference from the project.
Then I noticed that removing WinJS caused benign script load errors in the console when running the app. Further investigation showed that cordova.js automatically checks for WinJS, and if not included tries to include it (!). Here's the relevant code:
var onWinJSReady = function () {
var app = WinJS.Application;
var checkpointHandler = function checkpointHandler() {
cordova.fireDocumentEvent('pause',null,true);
};
var resumingHandler = function resumingHandler() {
cordova.fireDocumentEvent('resume',null,true);
};
app.addEventListener("checkpoint", checkpointHandler);
Windows.UI.WebUI.WebUIApplication.addEventListener("resuming", resumingHandler, false);
app.start();
};
if (!window.WinJS) {
var scriptElem = document.createElement("script");
if (navigator.appVersion.indexOf("Windows Phone 8.1;") !== -1) {
// windows phone 8.1 + Mobile IE 11
scriptElem.src = "//Microsoft.Phone.WinJS.2.1/js/base.js";
} else if (navigator.appVersion.indexOf("MSAppHost/2.0;") !== -1) {
// windows 8.1 + IE 11
scriptElem.src = "//Microsoft.WinJS.2.0/js/base.js";
} else {
// windows 8.0 + IE 10
scriptElem.src = "//Microsoft.WinJS.1.0/js/base.js";
}
scriptElem.addEventListener("load", onWinJSReady);
document.head.appendChild(scriptElem);
}
else {
onWinJSReady();
}
I guess my main question is, should I just leave the WinJS reference "as is" and let Cordova load and initialize WinJS?
Could it potentially conflict with AngularJS or reduce the performance of the app in any way?
(I guess var app = WinJS.Application and app.start() in onWinJSReady makes me a bit worried).
Since the app seems to work fine without the WinJS script files, why is cordova.js so insistent on trying to include it?

cordova (and some cordova plugins, particularly the FileSystem plugin) use some features of WinJS, such as Promises and Ajax calls. We ended up forking cordova.js and stripping out all the WinJS stuff... makes the app load a lot faster!