How does the browser work with service workers and application caching together?

Question

At the moment, you'll need to use service workers and offline application caching to make sure every browser works with your offline website, as some browsers do not support service workers as of yet. (Edge and Safari).

My question is how do the browsers react when they use both service workers and application caching?

Does the browser use service workers over application cache if both are in use?

Or do they work side-by-side, causing possible conflicts?

Answer 1

If there's an existing Application Cache associated with a web page client at the time that a service worker activates, that association is dropped, and the service worker will be the only thing consulted moving forward.

That behavior is documented in the service worker specification, so it should be consistent across all browsers that support service workers:

For each service worker client client whose creation URL matches registration’s scope url:

If client is a window client, unassociate client’s responsible document from its application cache, if it has one.

Else if client is a shared worker client, unassociate client’s global object from its application cache, if it has one.

Note: Resources will now use the service worker registration instead of the existing application cache.