Skip to content

Commit

Permalink
Better PWA detection
Browse files Browse the repository at this point in the history
  • Loading branch information
@corrideat
corrideat committed Nov 30, 2024
1 parent 1b276c8 commit e72dd29
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion frontend/controller/service-worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ sbp('sbp/selectors/register', {
}

try {
const isPwa = window.matchMedia('(display-mode: standalone)').matches || navigator.standalone
const isPwa = window.matchMedia('(display-mode: standalone) or (display-mode: window-controls-overlay)').matches || navigator.standalone
// Using hash (#) is possible, but seems to get reset when the SW restarts
const swRegistration = await navigator.serviceWorker.register(`/assets/js/sw-primary.js${isPwa ? '?standalone=1' : ''}`, { scope: '/' })

Expand Down
2 changes: 1 addition & 1 deletion frontend/views/components/sounds/Background.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default ({
},
methods: {
shouldPlay () {
const isPwa = window.matchMedia('(display-mode: standalone)').matches || navigator.standalone
const isPwa = window.matchMedia('(display-mode: standalone) or (display-mode: window-controls-overlay)').matches || navigator.standalone
return !isPwa && (document.hidden || this.isAppIdle)
},
playMessageReceive () {
Expand Down

5 comments on commit e72dd29

@taoeffect
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we DRY this please? This seems like something that's needed in a lot of places, so we should have a single global somewhere that can be referenced.

@corrideat
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, we can. It's needed in two places only though, which I wouldn't call a lot.

@taoeffect
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like I've seen this elsewhere... just done in a different way (don't remember where though)

@corrideat
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You might be referring to nativeNotification.js. The check there needs to be different because that's running in a SW, where we can't use media queries nor the Safari-specific navigator.standalone.

@corrideat
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The way we do the detection there, since we can't, is that the service worker is loaded with ?standalone=1, which we can detect from the SW.

Please sign in to comment.