I'm trying to understand and I'm pretty sure a problem is not in what it telling me.
I am building a PWA with Vue.js. When I init a camera, it does not work on iOS (v11+). I tried many variations, but have no idea what's going on behind and how to properly debug a compiled code in Safari Developer tool (breakpoints just won't work).
here is the code:
async init () {
// Media Device settings
const constraints = {
audio: false,
video: {
facingMode: (this.camera.mode === 'front') ? 'user' : { exact: 'environment' },
width: this.camera.size.width,
height: this.camera.size.height
}
}
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints)
this.tracks = stream.getVideoTracks()
this.video.srcObject = stream
// Toggle the camera state
this.toggleCamera(true)
// Check for realtime validation
if (this.realtime) {
this.validatePhotoRealtime()
}
} catch (e) {
this.handleErrorMessage(`getUserMedia error: ${e.name}`, e)
}
}
And here is what I get in console window:
Trying to call getUserMedia from an insecure document.
Any idea how to debug this error ?
==== UPDATE ====
While developing on localhost and having no https available for development environment, doing yarn server and connecting to served IP over network
I've enabled an option for WebRTC:
But it does not help.
Unfortunately apple dose not allow the use of WebRTC when you use your app as a PWA.
Take a look at this links.
getUserMedia() in PWA on iOS 11.3.1
https://github.com/webrtc/samples/issues/933
In last version of safari you can allow insecure sites from the web inspector window. See this response : https://stackoverflow.com/a/59770868/2440064
Related
I am trying to set up deep linking for my IOS app using push notifications and can not get notifications to direct a user to a specific screen on a physical device (downloaded via TestFlight).
React Native: 0.66.4
React Navigation: v6
Current Situation
Test push notifications through AWS Pinpoint work (they are successfully sent to a device), but will redirect a user to the wrong route (the initial route / home screen) of the application even when using a deep link. The deep link I am passing through AWS Pinpoint is in the form 'appName://ScreenName' (without the quotes).
The deep link to the page I want the user to go to works, but not as a push notification. For example, if I open Notes on my phone and type 'appName://ScreenName' and press the link I will be redirected to the deep link in my app. This convinces me that deep linking is set up properly, maybe I am wrong here?
If I hardcode the url scheme I want to use into my app.js file (running in development on a physical device) I am directed to the proper screen.
It appears that deep linking is working but Linking.getInitialURL() is not returning the url scheme from a push notifications. The url scheme works, but not as a push notification, whether the app is running in the background or not.
App.js
const config = {
screens: {
'ScreenName': "ScreenName",
},
}
const linking = {
prefixes: ['https://appName.com', 'appName://'],
config,
};
const handleOpenUrl = (event) => {
if (event && event.url) {
const route = event.url.replace(/.*?:\/\//g, "")
if (route?.includes("setmpin")) {
let { hostname, path, queryParams } = Linking.parse(route)
const params = path.split("/")[1]
const listener = Linking.addEventListener(
"url",
handleURL(path.split("/")[0], params)
)
}
}
}
useEffect(() => {
Linking.getInitialURL().then((url) => {
const supported = Linking.canOpenURL(url)
if (supported) {
Linking.openURL(url)
}
})
Linking.addEventListener("url", handleOpenUrl);
return () => {
Linking.removeAllListeners("url");
};
}, [])
Questions...
Am I missing anything glaring here, I have read several stackoverflow and similar posts and am not sure what I have missed.
Am I right to believe that deep linking is setup properly since I can test deep links in my Notes app or by hardcoding the url scheme in my App.js file?
Is there a way to validate what url is being passed by Pinpoint? I believe this is what is driving the issue but do not know how I can check this since push notifications only work on my physical device in production.
Thanks! Happy to share any additional information as well...
So I am using flutter-permission-handler to handle all the permission functionality,
for E.G
// Location Permission
askForLocation() async {
// Permission type
var status = await Permission.location.request();
if (status.isGranted) {
_location.value = status.isGranted;
update();
} else {
print('open setting');
openAppSettings();
}
}
work as expected on android but when it comes to ios it always returns permanently denied
however, with that kind of return it should open the app setting page, it opens only the home setting page on the simulator and a physical device.
my first response was to try to get the app from the setting page I couldn't find the app itself.
you can see the behaviour in this video
https://youtu.be/ugpFMFyKhLY
anyone facing the same issue?
I am developing a PWA that requires Push-Notifications. Sadly IOS/Safari does not support https://w3c.github.io/push-api/#pushmanager-interface for now, so I think i might have to wrap a native APP around in some way.
In Android (before their "Trusted Web Activities" was a thing) you could use a WebView to basically display a headless Chrome-View in your App. Whats the equivalent in IOS and how does the interaction between push-notifications and the Webapp (the browser need to jump to a specific page) work?
One more thing I need is integration with our companys Mobile Device Management, which is Microsoft Intune. Having integrated MDMs in Android in the past i Know that this might be a major pain in the a**, so i'm considering to build the wrapper myself, for maximum flexibility. Another option would be something like Ionic, not sure now.
This may not necessarily work in your situation, but I had the exact same issue with a PWA for Safari and I solved it by just using long polling. It will allow you to get around all of the limitations with Safari and I was able to redirect and load sections within our SPA.
async function subscribe() {
let response = await fetch("/subscribe");
if (response.status == 502) {
// Status 502 is a connection timeout error,
// may happen when the connection was pending for too long,
// and the remote server or a proxy closed it
// let's reconnect
await subscribe();
} else if (response.status != 200) {
// An error - let's show it
showMessage(response.statusText);
// Reconnect in one second
await new Promise(resolve => setTimeout(resolve, 1000));
await subscribe();
} else {
// Get and show the message
let message = await response.text();
showMessage(message);
// Call subscribe() again to get the next message
await subscribe();
}
}
subscribe();
https://javascript.info/long-polling
I'm writing a cross-platform mobile app with Cordova CLI (not PhoneGap) to control an IoT device. How do I display a list of nearby Wifi networks so that the user can select it and connect to it?
I've tried WifiWizard and WifiWizard2 but they seem to have limited support for iOS. And Cordova's core Connection plugin can only show whether the user is connected to wifi, cellular, or nothing.
I've also found some wifi related Cordova plugins that seem to have lost support for iOS, such as NativeSettingsOpener.
I've tried this basic WifiWizard2 function:
WifiWizard2.getConnectedSSID().then(function(network) {
alert(network);
}).catch(function(error) {
alert('oops: ', error);
});
It correctly alerts me that I'm not connected to a network when I run it on localhost on my browser.
I'd expect it to work on iOS too. But when I have this function run on iOS after compiling it for iOS with Cordova, it gives me neither the network nor an error.
You have to load the scan function asynchronously. Here's an example using ionic and Cordova:
import { Component } from '#angular/core';
declare var WifiWizard2: any;
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
results = [];
info_txt = "";
async getNetworks() {
this.info_txt = "loading...";
try {
let results = await WifiWizard2.scan();
this.results = results;
this.info_txt = "";
} catch (error) {
this.info_txt = error;
}
}
}
Full example on my own website is here https://www.tonyfox.co.uk/posts/using-wifiwizard2-with-ionic/
I have a mobile app built in Ionic, and am using Azure B2C to authenticate clients. It requires I navigate out to get use sign-in, and then retrieve a token in response. The trouble seems to be how to return back to my app while parsing the token.
What I am doing is using either window.open or InAppBrowser, like:
ref = window.open(url, '_self', 'location=no, toolbar=yes');
response location url:
localhost:8080/#access_token=<my_access_token>&token_type=Bearer&expires_in=3600&id_token=<my_id_token>
In Xcode iPhone simulator, Safari reports: Safari cannot open the page because it could not connect to the server.
Let's say I have this logic:
var standalone = window.navigator.standalone,
userAgent = window.navigator.userAgent.toLowerCase(),
safari = /safari/.test( userAgent ),
ios = /iphone|ipod|ipad/.test( userAgent );
if( ios ) {
if ( !standalone && safari ) {
//browser
} else if ( standalone && !safari ) {
//standalone
} else if ( !standalone && !safari ) {
//uiwebview
};
} else {
//not iOS
};
I believe I need to use window.open for cases of browser? And in case of standalone/native I would use InAppBrowser?
I am looking for some good example of how to manage getting token back from browser to either a web or native ios and android app.
I started thinking that deeplinking might be the way I need to get back to my native app.
FWIW: My config at the Azure end offers a native options with Redirect URI of either urn:ietf:wg:oauth:2.0:oob or https://login.microsoftonline.com/tfp/oauth2/nativeclient
Thanks