browser-sync-webpack-plugin
browser-sync-webpack-plugin copied to clipboard
Refresh not triggered automatically on mobile devices
Hi,
I'm using this browser-sync-webpack-plugin
(along with gulp+webpack-dev-server) to run an Angular application built with Angular CLI.
The plugin config is the same as default:
module.exports = {
// ...
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:3100/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}
Almost everything works pretty well. BrowserSync
proxies to webpack-dev-server
, its features like scroll synchronization, CSS outlines, CSS grids, work great across browsers/devices (tested with Chrome, Chrome Android and Firefox).
The plugin DOES detect changes from webpack-dev-server
, and refresh the page on PC browsers.
But the refresh is not triggered automatically on my mobile browser (Chrome Android v.57.0.2950.3). even if the "Rebuilding..." message is correctly displayed.
Any ideas?
Thanks in advance
@tinesoft hi!
sorry for the delayed reply.
as reloading works fine on PC and fails on mobile, i guess this is the browser-sync issue. but, if "Rebuilding..." is displayed, it becomes even more strange. did you try testing this on different phones (running iOS, for instance)?
cheers
Hi @Va1,
Unfortunately i don't have any other mobile phones to test on, just my Android phone with Chrome...
hi @Va1 & @tinesoft,
I tried the same on my iphone. the same happens as well. its not hot reloading on mobile. and the state doesn't seems to sync as well?
Can confirm. AlsoRebuilding
but no refresh.
@nmihaica I managed to get hot reloading to work on mobile, now just having trouble with onChange events on inputs not syncing.
I dropped webpack-dev-server
and returned back to Webpack inside Gulp to use it only to bundle assets. Traded HMR for smoothness of Gulp + BrowserSync.
I changed reload: false to reload: true and it appears to work as intended.
hi! i also have the same issue. does anyone have a solution besides changing the "reload" option?
Same issue for me, I need HMR for my css but I don't want to reload the browser because the page is relatively heavy (lots of pictures).