I noticed this in my custom app, but it applies to the Polymer starter kit as well. I have two browsers open, Chrome and Firefox, and a click on one browser in my Polymer app affects the other.
Why?
How?!!
(Chrome on left, Firefox on right. Clicking in Firefox affects Chrome!)
Edit: And my phone?!!
This was due to how the page was served. Polymer Starter Kit has a gulp file setup to server and auto-reload the pages. Works great! But I guess it also keeps things perfectly in sync. Great for development : )
Serving with something else (live-server) allowed the app to function as expected.
Edit: As #chillitom mentioned in the comments, it was BrowserSync. When I start using gulp serve I see this:
[PSK] Access URLs:
--------------------------------------
Local: http://localhost:5000
External: http://192.168.1.107:5000
--------------------------------------
UI: http://localhost:3002
UI External: http://192.168.1.107:3002
--------------------------------------
Going to http://localhost:3002 allowed me to change browser sync options, and that "fixed" this as well.
Related
I am building a chrome extension in React and webpack. I use chrome messaging API to communicate between the background page and the popup or content script. In the background script, I use browser.runtime.onMessage.addListener and in popup, I use browser.runtime.sendMessage.
In development mode, everything works great. I can easily send messages between the background page and the popup. Sadly when I bundle extension in production mode with code splitting, the messaging API does not work. When browser.runtime.sendMessage is run I get this error message: Error: Could not establish connection. Receiving end does not exist.
Here is a reproduction repo: https://github.com/sleaper/extension-error-reproduction
Can I use webpack in this way?
If you have more questions feel free to ask!
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 guess it's about react-redux but I'm not very familiar with it.
I generated a Monolithic jhipster-react project using ehcache and h2 database for development.
When I run it with ./mvnw and then npm start and try to open two browser tabs/windows in localhost:9000 the scrolling and often entire page and actions get synced, not allowing me to do different things in different pages.
I know that redux is used to save the logged in state of the session, right?
Is there a way to keep only that and not sync scrolling and routing etc.?
It's due to browser-sync being used in dev. You should not have this issue in prod and also in dev if you open tabs on java backend port (by default 8080). You could also disable browser-sync in webpack/webpack.dev.js.
you could add this to your webpack config:
ghostMode: {
clicks: false,
location: false,
forms: false,
scroll: false
}
So i got this example found at: http://odhyan.com/blog/2014/12/building-a-simple-quiz-app-using-angularjs/
, it's made as a desktop app, i copied the service, directive, controller in my ionic-app sources.
When i "ionic serve" and test the app in the browser, the application works as it should.
I managed to build the apk, but when i install it on native android (my phone Galaxy S6 Edge) and also tried in Android Studio (emulator - Nexus 5X used for tests in this case), the submit button won't work... I tried changing the "ng-click" to "ng-submit", "on-tap", "on-touch" one by one, and still not working.. i isolated the "ng-show"-s so i can try the other buttons. All are working properly (start quiz, next-question, Play again), but not the submit one.
What should i do to get this button working on android too as it works in desktop? Can anyone help please?
No errors in console while testing in browser where everything works as it should.
No errors at building app or ionic serving...
P.S. i tried all of the "answers found on stack overflow related to this behaviour" but no result :( !
Thank you very much !
I am building an app with Backbone and Yeoman. I am having an issue with the routing.
I have the following routes set up:
'test' : testMethod,
'' : index
I have set up pushstate:
Backbone.history.start({pushState: true});
I am using Chrome
If enter myApp.com#test the url changes to myApp.com/test and testMethod() fires correctly.
However if I try goto myApp.com/test directly or refresh after the browser has changed the url from # to / then I get a 404.
I am using the Yeoman built in server to test the pages. Could this be causing the issue?
I am not sure if you are using BBB within Yeoman. If you are, this should not be an issue. If you are not using BBB, this is a known issue. BBB has it's rewrite rules setup correctly to use pushstate, but yeoman's built in server does not seem to adopt this. You could edit your grunt.js file with your own rewrite rules to get pushstate working correctly. Some of the users in the above mentioned link have done this successfully.
When your app goes live, you will either need to serve those urls through your server or edit your rewrite rules to do the same. If the latter, and your application relies on SEO, SEO will suffer greatly.