Refresh not triggered automatically on mobile devices

[tinesoft]

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

[Va1]

@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

[tinesoft]

Hi @Va1,

Unfortunately i don't have any other mobile phones to test on, just my Android phone with Chrome...

[giftofjehovah]

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?

[nmihaica]

Can confirm. AlsoRebuilding but no refresh.

[giftofjehovah]

@nmihaica I managed to get hot reloading to work on mobile, now just having trouble with onChange events on inputs not syncing.

[nmihaica]

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.

[amndplz]

I changed reload: false to reload: true and it appears to work as intended.

[cmdillon]

hi! i also have the same issue. does anyone have a solution besides changing the "reload" option?

[poillic]

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).