We've setup an angularjs application on cloudfront which has all asset files on s3 storage and from there used via cloudfront for SSL and performance.
We have an identical setup to what is described in this guide
https://rossfairbanks.com/2015/01/30/integrating-angular-s3-cloudfront.html
As we used same post to create our own setup, it seems though that this works on all browsers except Safari.
On Safari, when visiting a url directly on a given path or refreshing any sub pages, the ui-router would redirect user page to landing page.
For staging though, we have same setup but running directly on S3 without CloudFront in middle hence no SSL. but, yet it seems to work even on Safari
so, problem seem to be an issue with CloudFront and Safari to be more specific.
Can anyone advise on what could be the cause? and how we can solve it?
UPDATE: This issue might be related to this bug https://bugs.webkit.org/show_bug.cgi?id=24175
Angular on AWS (Cloudfront/S3) for Safari
I figured out that you need to use https in order Safari to refresh correctly. You can tell S3 to redirect to https protocol and the problem gets solved:
<Redirect>
<Protocol>https</Protocol>
<HostName>test.example.com</HostName>
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>
I had this problem a ton but not this specific issue. Safari which affects desktop and mobile/tablet devices does have this quirk. In many instances I was able to change it to a query parameter when I know it is going to be going through a redirect. It is a frustrating issue that has been going on for months.
Related
I have deployed my React PWA on AWS Amplify. Works perfectly on the Chrome Desktop browser on localhost as well as when deployed to AWS Amplify. Unfortunately though, on Safari Desktop as well as on Chrome and Safari on my iPhone, I always only get a blank page. Important to know: I am using basic auth.
I have looked into the Safari web developer tools on my iPhone and I can see in the console that I get a 401 error on loading manifest.json. This error does not show up on Chrome on Desktop and here the app works flawlessly as described above.
What could be the cause here?
I have already tried the following:
Playing around with all possible rewrite rules in AWS Amplify. Currently I use the rule </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> --> index.html (200)
Setting attribute homepage in my package.json either to "." or also to the base url of where my AWS amplify deployment lands
Adding the attribute crossorigin="use-credentials" to the reference of manifest.json in the index.html page (<link rel="manifest" href="%PUBLIC_URL%/manifest.json" crossorigin="use-credentials" />)
After reading all possible posts on stackoverflow and anywhere else in the web, I am stuck. Can somebody maybe give me another idea to try out?
Thanks a lot and best regards
EDIT 1: I am trying to use Bluetooth on that React app. What I now also figured out is that I also get an error message Invariant Violation: This device is not capable of using Bluetooth - could that be the reason for the white screen?
OK, for all who might stumble above the same issue in the future - the problem was the Bluetooth connection I was trying to build up. I had not paid enough attention to the console warning Invariant Violation: This device is not capable of using Bluetooth cause I had thought this could not cause the problem. But it did. After removing the Bluetooth capability, the app renders as expected on all browsers no matter if Desktop or mobile device. Now I have another issue finding out how to somehow get around this Bluetooth issue but that's another topic. This question here can be closed / marked solved.
I've completely deployed my website with Firebase CLI, and project.firebaseapp.com is accessible and works fine. However, project.web.app keeps showing "Site Not Found".
I'm building my web app with React and already set the folder to "build"
Edit1: I've tried safari, chrome, incognito of both, and also hard refresh and empty cache still showing SITE NOT FOUND.
Edit2: It's working on Line Application Built-in Browser (mobile), but not on Chrome (mobile).
Edit3: Sent the domain to my friends around the world and found out that it's not working for only people living in South East Asia.
As I mentioned in comments, try any other browser. Both the domains are working on my computer. It might just take some time for both to deploy and update the cache.
It's usually better to ask someone who stays far from you and maybe has a different ISP to test update website. I sometimes use Lighthouse and it turns up even it won't show up on my computer. (Apparently the older version gets cached).
I'd recommend disabling cache from network tab in browser console when in development stage:
I'm currently using Google Appengine to host a website with Golang as the backend. I have a custom domain setup and (sometimes) it works perfectly fine. My website requires some css and js files from the server. These were served perfectly in the past but now it randomly stops working. Both on the "mydomain.de" and on the "myapp.appspot.com" domains. Sometimes it works on the normal domain and then it works on the other and sometimes even on both. But if I reload the site after a couple of minutes it just shows me an old index.html file (that I have removed days ago).
Did someone experience this problem in the past and does anyone know a fix for this?
Thanks in advance.
Have you ruled out your browser cache as the source of the problem? If after getting a stale version, shift-reload (assuming Chrome or Firefox) brings up the desired version, then look into how to do "cache busting" for css and js, and check the app.yaml doc for how to set expiration times on static assets (assuming your index.html is static).
When page loads in my cakephp 3 application it shows that This site can’t be reached took too long to respond in cakephp 3 application in all browser.
why this application show error any body can help me.
is there are a way to know why is the problem can be occurred.? is it my coding problem or other issues
There are too many reason for this issue:
Properly not Routing
Redirecting to same URL
CSS/JS etc from CDN and CDN url taking too many loading time
etc
Basic Solution:
Check you configured your application routing properly.
Debug your code is not Redirecting to same url too many times
Ckeck CDN links from browser console, If CDN links take too many times, Use CSS/JS other assets from Local
Note : There is also other issues
I've built a web app on a MEAN stack (Mongo, Express, Angular, Node) and I run it through Heroku. When I access the application on my computer through Google Chrome everything works great (although rather slowly). However, when I access the application on my iPhone through mobile Safari barely anything works. Links on the home page only appear sometimes, nothing appears on the sub pages.
The app lives at http://mobseen.it
Any idea why Chrome would work well but mobile Safari would work so poorly, and what I could do to fix this?
I've surfed your site from both my computer and my phone(which worked fine albeit a bit slow). After analyzing it briefly in Chrome as well as pingdom, I think you're problems are coming from the amount of resources the device is pulling in and processing. Take a look at some of the recommendations on pingdom and go from there.
I would also try setting it up on OpenShift to see if it's any better.