The problem was due to white screen of death after deploying PWA (This is really hard to reproduce but it is an ongoing issue for my clients). It seems to be the problem with cache. It is causing Uncaught SyntaxError: Unexpected token '<'. I know many thread talked about this but it doesn't seem to directly let me tackle and reproduce the issue.
The closest to be able to reproduce is by doing this.
Add PWA to home screen
Open PWA
Edit index.html to have .js file pointing to wrong hash in /var/www/my-server
When I reopen the PWA it is still serving the old index.html file.
Clearing Safari cache in my iPhone does nothing. PWA still serving old index.html file.
How can I debug what causing the phone to be using the old index.html file even when server already change the index.html file content?
I am using cloudflare
I am not configuring any Service Worker
Related
I have a react application that I've deployed using nginx, which however only return a blank page. I've been looking for a solution for the last week and I can say that I tried almost anything... but nothing seems to work.
If I open the console I can see that all of the files are delivered with success, however, I got a "Loading failed for the with source ..." on firefox and a "net::ERR_HTTP2_PROTOCOL_ERROR 200" on Chrome. The weird thing is that both files are actually received (200 status) and can be viewed with the development tools. Moreover, if I visit the static resource link I get the full content without problems.
And of course, the issue is only when using the production environment, if I deploy it locally it works perfectly.
I really don't know what to do. I've tried updating the "homepage" directive, playing around with "react-router", changing the various nginx configurations and many other things but nothing.
If anyone could help me out I would really appreciate it!
I was running nginx with docker on Raspberry and, for some unknown reason, the timing on the container was completely messed up. I solved the problem by running the container in privileged mode ('privileged: true' on docker-compose)
I am hosting a single page application based in React in S3 and served up in a CloudFront distribution (AWS). Everything works fine in production and The CloudFront error handling is setup correctly like shown below:
I did this for 404 and 403 responses. When I attempt open a link to a non root path (e.g. /settings), it works fine in Chrome and Firefox. However, in Safari I get redirected to the root path. I don't know how to resolve this Safari specific issue, any help is appreciated, thank you.
Similar problem without an answer here Safari Issue with Single Page Application AngularJS in HTML5mode with AWS (Cloudfront/S3)
I'm new in react app development, I just build my practice app and deployed it through Netlify. I can visit my app and everything is fine till I refresh my window. Refreshing the window comes with an error page not found. what should I do to solve this problem?
You may need to look at providing a _redirects file in your root directory. See https://docs.netlify.com/routing/redirects/
For example,
/* /index.html 200
As cra is single page application, you need server setting to redirect everytime to index.html,
You might want to check this link
https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/
I am developing a react chrome extension.
I have a footer bar to navigate across my pages(components).
I am using react-router-dom to switch/route between pages.
My extension works perfectly when debugging but, after I build it (npm run build) and Load Unpacked at my extensions, the first page renders good but when I click my footer navigation buttons, my extension shows this message:
The webpage at chrome-extension://myextensionid/ might be temporarily down or it may have moved permanently to a new web
address. ERR_UNEXPECTED
Is it because I did not publish it yet, routing only works after I publish my extension?
Any ideas what can be wrong, can you please help me with this issue?
just started working with reactjs recently, month or two..not a pro but can find my way around.. I am using create ract app (quickie ,that ships with service-worker) and my setup is such that I am deploying react app in the root of my java REST application, so all my service rest calls are in relative format, e.g /rest/myservice/123 etc.. and they work just fine..
but recently I started getting strange errors, and rest calls stopped working..
if I execute RET URL from browser .... nothing happens index loads... when I test with postman REST works just fine it also works in safari or if url is localhost... ...so after hours of frustration i discovered that service worker doing its .... caching . my rest calls are getting intercepted and they never make it to server... and there is nowhere that it mentions about how to overcome it, neither in service worker docs nor in create-react-app docs ...nothing is mentioned about this use case...... this is so pathetic...
I figured it out after numerous trail and errors... but it did not stop there..
I went ahead and deleted the service-worker registration entry from index.js also deleted service-worker file and rebuild the app. well service-worker.js file is still there... it showed up in build folder after I rebuild the project..... what is it with create-react-app did they got paid by google to include service-worker? or what is going on? why can not I remove it? and how do I prevent it from canceling my rest url calls?
when I type : https://xxxx.io/x/referal/refCode/3429878 it just loads application...
what else am I missing?
got the answer over #Redit needed to unregister worker...
details #:
https://www.reddit.com/r/reactjs/comments/8hovvb/removal_of_serviceworker_from_reactjs_app/