Potential bug retrieving service worker notifications on macOS

%3CLINGO-SUB%20id%3D%22lingo-sub-1813448%22%20slang%3D%22en-US%22%3EPotential%20bug%20retrieving%20service%20worker%20notifications%20on%20macOS%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1813448%22%20slang%3D%22en-US%22%3E%3CP%3EI've%20been%20digging%20into%20an%20odd%20issue%20for%20a%20while%20and%20I%20think%20I've%20discovered%20a%20potential%20bug%20in%20Edge%20on%20macOS.%26nbsp%3B%3CSPAN%3EI've%20tested%20this%20in%20version%2086%2C%2087%20(beta)%2C%20and%2088%20(dev).%20It%20does%20not%20appear%20to%20be%20present%20on%20Windows.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20short%2C%20t%3CSPAN%3Ehe%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FServiceWorkerRegistration%2FgetNotifications%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Eservice%20worker%20registration%20method%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3EgetNotifications()%3C%2FA%3E%3CSPAN%3E%26nbsp%3Bis%20supposed%20to%20return%20a%20promise%20but%2C%20under%20certain%20circumstances%2C%20it%20never%20seems%20to%20fulfill%20(neither%20resolves%20nor%20rejects)%20in%20MS%20Edge%20on%20macOS%20%3CEM%3Eif%20notification%20permissions%20have%20been%20granted%20by%20the%20user.%3C%2FEM%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20bug%20only%20exists%20if%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3ENotification.permission%20%3D%3D%3D%20'granted'%3C%2FSTRONG%3E%2C%20meaning%20that%20the%20user%20has%20granted%20permissions%20for%20notifications%20at%20the%20browser%20level.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20can%20easily%20test%20this%20on%20any%20PWA.%20For%20example%2C%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fapp.starbucks.com%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Eapp.starbucks.com%3C%2FA%3E%26nbsp%3Bis%20a%20well-known%20PWA%20and%20this%20bug%20can%20be%20replicated%20in%20DevTools%20console%20on%20their%20site.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFirst%2C%20you'll%20need%20to%20ensure%20notification%20permissions%20are%20granted.%20Then%2C%20simply%20run%20the%20test%20snippet%20(below)%20in%20the%20browser%20console.%20The%20bug%20is%20not%20present%20with%20a%20permission%20state%20or%20either%3CSPAN%3E%26nbsp%3Bdefault%26nbsp%3Bor%26nbsp%3Bdenied%3C%2FSPAN%3E%3CSPAN%3E.%20This%20snippet%20simply%20calls%20the%20method%20in%20question%20and%20logs%20out%20some%20details%20along%20the%20way.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Econsole.log(navigator.userAgent)%0Anavigator.serviceWorker.ready%0A.then(reg%20%3D%26gt%3B%20%7B%0A%20%20console.log('%26gt%3B%20SW%20READY')%0A%20%20console.log('Permission%20state%3A'%2C%20Notification.permission)%3B%0A%20%20return%20reg.getNotifications()%3B%0A%7D).then(notifications%20%3D%26gt%3B%20%7B%0A%20%20console.log('Notifications%3A'%2C%20notifications)%3B%0A%7D)%0A.catch(e%20%3D%26gt%3B%20console.log('%26gt%3B%20ERROR'%2C%20e))%0A.finally(()%20%3D%26gt%3B%20console.log('%26gt%3B%20COMPLETE'))%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20expected%20output%20is%20that%20you%20see%20a%20list%20of%20notifications%20(likely%20an%20empty%20array)%20or%20you%20see%20an%20error%20logged%20in%20the%20console.%20Finally%2C%20after%20the%20promise%20chain%20has%20completed%2C%20you%20should%20see%20%22%3CSPAN%3E%3CSTRONG%3E%26gt%3B%20COMPLETE%22%3C%2FSTRONG%3E%26nbsp%3B%3C%2FSPAN%3Elogged%20in%20the%20console.%20Here's%20an%20example%20from%20Chrome%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22chrome-granted-success.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F228786iF3373324B34AFA31%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22chrome-granted-success.png%22%20alt%3D%22chrome-granted-success.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EHowever%2C%20under%20these%20same%20circumstances%20in%20Edge%20(on%20macOS)%2C%20the%20promise%20stalls.%20It%20never%20resolves%20nor%20rejects%3B%20meaning%20that%20this%20snippet%20never%20reaches%20the%20%3CSTRONG%3E.then%3C%2FSTRONG%3E%2C%26nbsp%3B%3CSTRONG%3E.catch%3C%2FSTRONG%3E%2C%20nor%26nbsp%3B%3CSTRONG%3E.finally%3C%2FSTRONG%3E%26nbsp%3Bblocks.%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22edge-granted-failure.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F228787i1A6F15666A0178AD%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22edge-granted-failure.png%22%20alt%3D%22edge-granted-failure.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%E2%80%83%3C%2FP%3E%3CP%3EIn%20my%20application%2C%20I'm%20trying%20to%20run%20this%20as%20part%20of%20the%20user%20sign-out%20flow%20and%20this%20bug%20simply%20freezes%20the%20application%20because%20the%20promise%20never%20fulfills.%20This%20is%20a%20big%20problem%20because%20it%20means%20the%20user%20can't%20properly%20sign%20out%20of%20the%20application.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThat%20pretty%20much%20sums%20it%20up.%20I%20hope%20someone%20can%20provide%20some%20insight%20or%20guidance%20on%20this%20issue.%20Thanks%20in%20advance!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI've%20created%20a%20%3CA%20href%3D%22https%3A%2F%2Fgist.github.com%2Felidupuis%2F12282bc8793f74b9b54876771f0c3bb5%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Egist%20outlining%20these%20details%3C%2FA%3E%26nbsp%3Band%20briefly%20%3CA%20href%3D%22https%3A%2F%2Ftwitter.com%2Felidupuis%2Fstatus%2F1318975991004286976%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Esummarized%20on%20Twitter%3C%2FA%3E%20as%20well.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1813448%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EBUG%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EEdge%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
Regular Visitor

I've been digging into an odd issue for a while and I think I've discovered a potential bug in Edge on macOS. I've tested this in version 86, 87 (beta), and 88 (dev). It does not appear to be present on Windows.

 

In short, the service worker registration method getNotifications() is supposed to return a promise but, under certain circumstances, it never seems to fulfill (neither resolves nor rejects) in MS Edge on macOS if notification permissions have been granted by the user.

 

The bug only exists if Notification.permission === 'granted', meaning that the user has granted permissions for notifications at the browser level.

 

You can easily test this on any PWA. For example, app.starbucks.com is a well-known PWA and this bug can be replicated in DevTools console on their site.

 

First, you'll need to ensure notification permissions are granted. Then, simply run the test snippet (below) in the browser console. The bug is not present with a permission state or either default or denied. This snippet simply calls the method in question and logs out some details along the way.

 

 

 

console.log(navigator.userAgent)
navigator.serviceWorker.ready
.then(reg => {
  console.log('> SW READY')
  console.log('Permission state:', Notification.permission);
  return reg.getNotifications();
}).then(notifications => {
  console.log('Notifications:', notifications);
})
.catch(e => console.log('> ERROR', e))
.finally(() => console.log('> COMPLETE'))

 

 

 

The expected output is that you see a list of notifications (likely an empty array) or you see an error logged in the console. Finally, after the promise chain has completed, you should see "> COMPLETE" logged in the console. Here's an example from Chrome:

 

chrome-granted-success.png

 

However, under these same circumstances in Edge (on macOS), the promise stalls. It never resolves nor rejects; meaning that this snippet never reaches the .then.catch, nor .finally blocks. 

 

edge-granted-failure.png

In my application, I'm trying to run this as part of the user sign-out flow and this bug simply freezes the application because the promise never fulfills. This is a big problem because it means the user can't properly sign out of the application.

 

That pretty much sums it up. I hope someone can provide some insight or guidance on this issue. Thanks in advance!

 

I've created a gist outlining these details and briefly summarized on Twitter as well.




0 Replies