Works fine on chrome mobile and PC.
But does not work on the iOS Safari browser does not even log the connect to new user
const call = myPeer.current.call(data.peerId, ownLocalStream.current);
call.on('stream', (incomingStreamCall: any) => {
console.log(incomingStreamCall, 'connect to new user on');
...
})
Using Peerjs library on reactjs typescript.
Related
I am trying to integrate Azure AD authentication with my Electron App (with Angular). I took reference from this link and able to integrate: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-nodejs-desktop
Issue: It's using getTokenInteractive() method and it's navigating to an external browser. As per my requirement we don't have to navigate to an external browser, it should open the UI inside my electron App where end users can provide their credentials.
Another option if possible we can open the Azure AD url part of my electron App.
I took reference from this link and able to integrate: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-nodejs-desktop
async getTokenInteractive(tokenRequest) {
try {
const openBrowser = async (url) => {
await shell.openExternal(url);
};
const authResponse = await this.clientApplication.acquireTokenInteractive({
...tokenRequest,
openBrowser,
successTemplate: '<h1>Successfully signed in!</h1> <p>You can close this window now.</p>',
errorTemplate: '<h1>Oops! Something went wrong</h1> <p>Check the console for more information.</p>',
});
return authResponse;
} catch (error) {
throw error;
}
}
I am working developing a react PWA offline mode feature. Everything works fine as expected in development. When I set the network offline the app is working fine as expected(even we hit the refresh in offline the app is working) but after creating the build and deployed offline feature is not working when I hit the refresh. Below is my service worker code.
let cacheData = "appV1";
//console.log("SW file from public folder..");
this.addEventListener("install", (event) => {
event.waitUntil(
caches.open(cacheData).then((cache) => {
cache.addAll([
'/static/js/main.chunk.js',
'http://localhost:3000/static/js/vendors~main.chunk.js',
'/static/js/bundle.js',
'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin',
'/index.html',
'/read',
'/'
])
})
)
})
this.addEventListener("fetch", (event) =>{
if(!navigator.onLine)
{
event.respondWith(
caches.match(event.request).then((resp) =>{
if(resp)
{
return resp;
}
let requestUrl = event.request.clone();
fetch(requestUrl);
})
)
}
})
need suggestion mates.
Try to go online and take a look into Network Panel in Dev-Tools. Than you will see which pages are missed. I think its caused by the react chunk-names... Maybe you can use precacheAndRoute()-function from workbox-tool.
Also i think you dont need this line: if(!navigator.onLine){}
I'm using:
firebase: ^8.6.8
next: ^11.0.1
react: ^17.0.2
When trying to sign in with Google on Safari, I get errors related to a Content Blocker with both signInWithPopUp and signInWithRedirect:
Content blocker prevented frame displaying https://my-site.com/page
from loading a resource from https://apis.google.com/js/api.js?onload=__iframefcb318667
Does anybody know how to handle this properly?
Thank you!
Okay, here is the solution I used:
Instead of using signInWithRedirect or signInWithPopup that seem to cause problem on Apple devices using Safari, I directly use [https://apis.google.com/js/platform.js] and then signInWithCredential using the googleUser.
I also used the package react-google-signin [https://www.npmjs.com/package/react-google-login] to simplify my code.
Step by step:
Enable Google Sign-in method on Firebase Console for Authentication
On the Credentials page of Google Cloud Platform [https://console.developers.google.com/apis/credentials], choose your project and under OAuth 2.0 Client IDs get the Client Id.
Save the Client ID as an environment variable NEXT_PUBLIC_GOOGLE_CLIENT_ID in your Project Settings on Vercel.
In your _document.tsx add the https://apis.google.com/js/platform.js script and needed meta data:
<meta name="google-signin-client_id" content={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}></meta>
<meta name="google-signin-cookiepolicy" content="single_host_origin"></meta>
<meta name="google-signin-scope" content="profile email"></meta>
<script src="https://apis.google.com/js/platform.js" async defer></script>
Define your Google Sign in button:
const GoogleButton: FC<GoogleButtonProps> = ({onSuccess, onFailure}) => {
const onSignInFailure = (failure: any) => {
console.error('FAILURE: ', failure);
onFailure(...);
};
const onSignIn = (googleUser: any) => {
signInWithGoogleUser(googleUser)
.then(onSuccess)
.catch(onFailure);
}
return (
<GoogleLogin
render={(renderProps) => (
<button
onClick={renderProps.onClick}
disabled={renderProps.disabled}>
This is my custom Google button
</button>
)}
clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID!}
buttonText="Login"
onSuccess={onSignIn}
onFailure={onSignInFailed}
cookiePolicy={'single_host_origin'}
prompt="select_account"
/>
);
};
I specified prompt="select_account" to be sure it prompt the user for the account selection even if hse is already logged in.
Then, inside signInWithGoogleUser, is use signInWithCredential to use the googleUser to authentify on Firebase Auth:
export const signInWithGoogleUser = (googleUser: any) => {
const auth = firebase.auth();
const provider = firebase.auth.GoogleAuthProvider;
const credential = provider.credential(googleUser.getAuthResponse().id_token);
return auth.signInWithCredential(credential);
};
NOTES
a. My project is running on Vercel [https://vercel.com/] with the Database (Firestore) and Authentication on Firebase [https://firebase.com]. You will have to adapt my solution if you use another stack.
b. With this, it works on almost all iPhones and Mac computers. In case it still fails, it is due to an installed content/cookie blocker and I display an error message asking the visitor to reactivate cookies or register using email and password.
c. I simplified a bit the code to have a more condensed answer.
I have a web page with following event:
const onDeleteBankData = async (bankData) => {
if (!window.confirm('Are you sure you wish to delete this item?')) {
return;
}
}
I tested it in Chrome and on an Android device and it works. However on iPhone this does not work. Is this expected behavior? Is it a browser thing, or something I need to setup in REACT?
I am able to successfully get push notification from my server and update react component with this
self.addEventListener('push', event => {
const data = event.data.json();
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.body,
image: './Flowster-icon-32.png'
})
);
const channel = new BroadcastChannel('sw-messages');
channel.postMessage(data);
});
But browser sucs IE, safari, donto support BroadcastChannel, even client.postMessage is not supported in these browser, how can i make it work in those browser. Thanks for the help in advance.
Since the BroadcastChannel doesn't support IE and safari browser, as a workaround, I suggest you could try to use the sysend.js in IE or safari browser.
Reference: How can I use the BroadcastChannel API or something similar in Safari 10+?