I'm fairly new to service workers and almost every tutorial/article I read uses .then() since the service worker relay heavily on promises, but I haven't seen any tutorial using async/await when working with service workers. Is there a reason why? are the tutorials old or I just shouldn't use async/await with service workers?

Example:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

Could have been done using async/await?

Sources I took a look at that use .then()

I'm fairly new to service workers and almost every tutorial/article I read uses .then() since the service worker relay heavily on promises, but I haven't seen any tutorial using async/await when working with service workers. Is there a reason why? are the tutorials old or I just shouldn't use async/await with service workers?

Example:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

Could have been done using async/await?

Sources I took a look at that use .then()

https://developers.google./web/fundamentals/primers/service-workers/registration

https://developers.google./web/fundamentals/primers/service-workers

https://developers.google./web/fundamentals/primers/service-workers/lifecycle

https://developers.google./web/fundamentals/codelabs/offline

• javascript
• service-worker
• progressive-web-apps

1 Answer 1

Promises with then/catch can be used interchangeably with async/await. If you wish, you can replace the then's with awaits and the errors with catches...

// inside an async function
// assuming that register() is a promise-returning function...
try {
  let registration = await navigator.serviceWorker.register('/sw.js')
  console.log('ServiceWorker registration successful with scope: ', registration.scope);
} catch(err) {
  console.log('ServiceWorker registration failed: ', err);
}