Solving the Service Worker Installation Issue in Chrome 85

Learn how to overcome the installation challenges in Chrome 85 service workers, including tips about request throttling and alternate caching methods.
---
This video is based on the question https://stackoverflow.com/q/63675460/ asked by the user 'SSA' ( https://stackoverflow.com/u/383814/ ) and on the answer https://stackoverflow.com/a/63712465/ provided by the user 'SSA' ( https://stackoverflow.com/u/383814/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Chrome 85 Service worker stuck on trying to install

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Unraveling the Service Worker Installation Issue in Chrome 85

Web applications rely heavily on service workers for managing caching and background processing. However, with the recent update to Chrome 85, many developers have encountered a critical problem: the service worker does not install, leading to frustration and stalled requests. This guide will guide you through understanding the problem and provide you with a practical solution.

The Problem at Hand

After the update to Chrome 85, many users reported that their service workers became stuck during installation. They noted that the problem does not occur in earlier versions of Chrome (like 84), nor in alternative browsers such as Safari, Firefox, and Microsoft Edge. Here are some key observations about the problem:

Service worker installation hangs indefinitely, resulting in error (1) after a prolonged wait.

The browser console reveals numerous requests stuck in a pending/stalled state.

The requests causing the problem are not static resources but dynamic paths.

To reproduce the issue, developers follow these steps for service worker registration and cache filling:

[[See Video to Reveal this Text or Code Snippet]]

As seen in this code snippet, requests for certain URLs never complete, causing the installation process to stall.

Understanding the Solution

After extensive troubleshooting and looking into the Chromium source code, a significant finding emerged: request throttling is enabled by default when installing service workers. This throttling limits concurrent requests to a maximum of three, causing the additional requests to enter a stalled state.

What Does Request Throttling Mean?

Request throttling means that the browser limits the number of simultaneous network requests to prevent overwhelming the server or degrading performance. While this can help in some scenarios, it can hinder service worker installations, as seen in Chrome 85.

Key Points:

Throttling is capped at three concurrent requests during service worker installation.

If extra requests exceed this limit, they remain stalled, leading to installation failure.

Practical Advice for Developers

Though there is currently no flag to disable request throttling in Chrome, you can implement a workaround by modifying the caching strategy. Here’s how you can resolve your service worker installation issue:

Steps to Implement the Solution

Use cache.add instead of cache.addAll: By invoking cache.add for each individual resource, you can sidestep the concurrency limit, allowing the installation to succeed without exceeding the maximum number of simultaneous requests.

[[See Video to Reveal this Text or Code Snippet]]

Handle Promises Efficiently: When working with promises, ensure that each request is handled properly. This can help maintain flow and avoid stagnation.

Why This Works

By switching to cache.add, you instruct the service worker to process each request individually, thus avoiding the bottleneck created by simultaneous requests. This method ensures that installation proceeds without hitting the request limit, allowing for smoother operation.

Conclusion

Though the installation of service workers in Chrome 85 can be a daunting challenge, understanding and addressing the request throttling issue offers a practical workaround for developers facing this frustrating problem. By utilizing cache.add and managing requests efficiently, you're likely to find success in reinstating robust service worker functionality in your web applications.

Hopefully, this post helps other developers facing similar issues with their service workers. As always, stay updated, and good luck programming!

Видео Solving the Service Worker Installation Issue in Chrome 85 канала vlogize