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?
Related
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){}
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.
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+?
I have a react component that has a button with a handler to play an audio.
const initializeAudio = () => {
let context = new AudioContext()
let analyser = context.createAnalyser()
let audioSrc = context.createMediaElementSource(audioRef.current)
audioSrc.connect(analyser)
analyser.connect(context.destination)
analyser.fftSize = 512
setAnalyser(analyser)
}
const play = () => {
if (!audioSet) {
initializeAudio()
setAudioSet(true)
audioRef.current.volume = 0.5
}
audioRef.current.play()
setPlaying(true)
interval = window.setInterval(turnToTime, 1000)
}
<audio
data-keepplaying
ref={audioRef}
id="audioElement"
src={audio}
/>
<WaveForm analyser={analyser} />
<button onClick={isPlaying ? pause : play} className="media_button">
<FontAwesomeIcon
className="fa-icon"
icon={isPlaying ? "pause" : "play"}
style={!isPlaying && { paddingLeft: "0.4rem" }}
></FontAwesomeIcon>
</button>
Everything works fine on firefox and chrome, but won't work on safari on iphone, any one know why?
I feel that my audio is created in response to a click which is what the new restriction needed, but why is safari not working?
From reading your code I would guess that the second line is throwing an error in Safari. Safari still has no official support for the Web Audio API and the AudioContext is only available as webkitAudioContext.
If initializing the context is your only concern using the following technique might work.
let context = new (window.AudioContext || window.webkitAudioContext)();
However I would not recommend using it as it treats Safari's implementation similar to the one in Firefox or Chrome even though they differ in many aspects. As I'm the author of standardized-audio-context using this package is of course my preferred way to handle inconsistent browser support for the Web Audio API. :-)
You can use it like this.
import { AudioContext } from 'standardized-audio-context';
let context = new AudioContext();
I hope this helps.
I have built a sencha application using Sencha cmd.
I have integrated it to windows phone using cordova.
Now, when launching the app, after splash screen, a white screen comes and stays for ever.
I trying putting an alert in the launch function (in app.js where view is created) and found out that the launch function does not fire.
What could be the reason of this behaviour?
I found the cause of the issue that I was facing. The sencha app is using a store with SQL proxy. But since SQL proxy is not supported on Windows phone (but supported on other platforms viz. iOS, Android), so the launch function was not getting called.
I had a similar problem with a JSON proxy and I had to modify the following lines of code in cordovalib/XHRHelper.cs file.
var funk = function () {
window.__onXHRLocalCallback = function (responseCode, responseText) {
alias.status = responseCode;
if (responseCode == '200') {
alias.responseText = responseText;
try {
JSON.parse(responseText);
} catch (e) {
Object.defineProperty(alias, 'responseXML', {
get: function () {
return new DOMParser().parseFromString(this.responseText, 'text/xml');
}
});
}
Object.defineProperty(alias, 'responseJSON', {
get: function () {
return new DOMParser().parseFromString(this.responseText, 'text/json');
}
});
}else {
alias.onerror && alias.onerror(responseCode);
}