The service worker install event is given an instance of ExtendableEvent to its handler which you can use it to pause registration by calling waitUntil() method and pass a promise. e.g.
// inside service worker
self.addEventListener('install', function(event) {
...
event.waitUntil(promise1);
console.log("waiting for promise1");
});
My question is that, is there any way to cancel the wait after some time or that SW registration remains indefinitely in the " trying to install" phase as long as that promise is not resolved or rejected. Since I didn't see any timeout or abort option with waitUntil method.
First, a nit: InstallEvent's waitUntil() method does not pause registration. Service worker registration is distinct from the execution of the install phase of the registered service worker. (There is more background in this answer.)
If you call waitUntil() inside of an install event handler, the service worker won't progress out of the installing state until either the promise resolves, or until a browser-specific timeout is reached, at which point I believe the promise will be treated as if it rejected. This timeout is not part of the service worker specification and can vary from browser to browser, so I would not rely on it being set to any specific value.
It sounds like you'd like to impose your own deterministic timeout with a hard limit on how long users might have to wait. If that's the case, you can do that by creating a new Promise and inside of that, combining your original async operation with a call to setTimeout().
const TIMEOUT_MS = ...;
self.addEventListener('install', (event) => {
const originalPromise = ...;
const promiseWithTimeout = new Promise((resolve, reject) => {
const id = setTimeout(
() => reject(new Error(`Timed out after ${TIMEOUT_MS}ms`)),
TIMEOUT_MS,
);
originalPromise.then((result) => {
clearTimeout(id);
resolve(result);
}).catch((err) => reject(err));
});
event.waitUntil(promiseWithTimeout);
});