[SOLVED] Hot-reload / live reloading not working

Questions
1

After updating to the latest version of F7 I noticed that hot-reload/auto refresh was not working anymore.

I use Framework7-cli to create a simple PWA without any problems.
I solved the hot-reload (for Safari) by adding “inline: true” in webpack-config.js as attribute of “devServer”.

Now comes my question: am I the only one with this issue?
or should the inline attribute be added always c.q. included always at CLI creation ?
or may be something else needs to be installed/configured … ?

Ps,
I am not an WebPack expert.

Normally I use Chrome as standard browser for development on my Macbook but this problem occurs also with Safari (if the inline attributes is omitted). In fact and strange enough: the inline is true option didn’t solve my problem for Google Chrome.

2

I just discovered that if I stop & start the service-worker, Chrome gets updated but it didn’t solve the live reloading issue.

Ps,
refresh and clear caches didn’t solve it.

3

I don’t think live reload can work with service-worker. During development, you need to disable it in dev tools

4

Thx for the response.

Live reloading seems to work with Safari and service-worker but you/Vladimir are right that during development of the UI the service-worker should be disabled because there is no added value.

Still not sure whether the attribute " inline" should be added by default.

5

To be honest not sure what does “inline” prop do :slight_smile:

6

I found it on StackOverflow and according to the documentation of WebPack:

devServer.inline

boolean

Toggle between the dev-server’s two different modes. By default the application will be served with inline mode enabled. This means that a script will be inserted in your bundle to take care of live reloading, and build messages will appear in the browser console.

It seems that inline is true by default.

After removing the directory, I gave it a clean retry/install and now everything works without " inline"

Must be an installation/local issue.

Apologises for your energy.
I think it was a coincident that “inline” property did “something” the first time.

7

For other people who are wondering (like me) how to disable service workers during development:

  1. in Chrome open dev tools
  2. go to Application
  3. select Service Workers
  4. toggle the ‘Bypass for network’ option

See this link for more info: The Service Worker Lifecycle  |  Web Fundamentals  |  Google Developers

1 Like