javascript - service workers: async await in combination with waituntil is not working properly - Stack Overflow

admin管理员组

文章数量:1279120

i'm struggling with promises in a service worker while using async/await syntax.
Following situation: I got a push notification and want to handle the click event. If i use the "old" syntax with then and catch i can iteratore over the list of clients and do something with it. If i use my prefered way with async/await it wouldn't do anything.

self.addEventListener("notificationclick", event => {

  // is working
  event.waitUntil(self.clients.matchAll().then(clientList => {
    console.log(clientList);
  }));

  // is not working
  event.waitUntil(async () => {
    const clientList = await self.clients.matchAll();
    console.log(clientList);
  });
});

i'm struggling with promises in a service worker while using async/await syntax.
Following situation: I got a push notification and want to handle the click event. If i use the "old" syntax with then and catch i can iteratore over the list of clients and do something with it. If i use my prefered way with async/await it wouldn't do anything.

self.addEventListener("notificationclick", event => {

  // is working
  event.waitUntil(self.clients.matchAll().then(clientList => {
    console.log(clientList);
  }));

  // is not working
  event.waitUntil(async () => {
    const clientList = await self.clients.matchAll();
    console.log(clientList);
  });
});

• javascript
• push-notification
• async-await
• service-worker
• service-worker-events

Share Improve this question Follow asked Nov 15, 2017 at 23:30 dkirchhofdkirchhof 38511 gold badge33 silver badges1111 bronze badges 3

• 2 Looks like waitUntil takes a promise as it's arugment, not a function. Maybe if you invoke your async function immediately, it would work. eg: event.waitUntil( (async () => { ... })() ) – CRice Commented Nov 15, 2017 at 23:33
• @CRice is correct, your passing a function here not a promise. You could do the IIF way, but I'd say a more obvious easy to understand way would be to create a function called getClients that's got all your async stuff, and then do event.waitUntil(getClients()); – Keith Commented Nov 15, 2017 at 23:53
• @CRice and @Keith Thanks both of you. You're totally right. I mixed some things up... I also tried to use an "external" async function, because i knew that it will return a promise. But actually i just passed its reference instead of calling it (waitUntil(getClients) vs waitUntil(getClients()) – dkirchhof Commented Nov 16, 2017 at 0:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Thanks to @Crice and @Keith,

waitUntil need a promise as argument instead of a function. So this is the working example in async/await style:

self.addEventListener("notificationclick", event =>
{
    event.waitUntil(getClients());
});

async function getClients()
{
    const clientList = await self.clients.matchAll();
    console.log(clientList);
}

You can modify your original code to make an async IIFE as

  // should be working now
  event.waitUntil( (async () => {
    const clientList = await self.clients.matchAll();
    console.log(clientList);
  })() );

The added ( ), will immediately invokes the async function hence the name async IIFE

本文标签： javascriptservice workers async await in combination with waituntil is not working properlyStack Overflow