Check your index.template.html.

Replace

htmlWebpackPlugin.options.ctx.mode

with

ctx.mode

Actually, you can use all techniques (service workers, websockets) in both PWAs and SPAs, it’s more a question of backend design imo.

In my app I have a comment system. I notify users when a new comment has been posted in a thread a user has posted to or is currently viewing
Here’s what I do:

• when new comment is posted, i generate a notification for every user that has subscribed to the thread in the backend

• push a message over websocket to all users that a new comment has been posted

• when a user is currently using the app (has focus), websocket push is received by the active browser instance

• generate a native browser event from the websocket message (new CustomEvent)

• set up a listener for the custom event on the route where the comment thread is displayed

• if the user is actually browsing the thread in question, just update it with the new comment

• if not (i.e. is somewhere else in the app) and has subscribed to thread, display a QNotification or generic browser notification. Or display a counter in your navigation/toolbar, depends on you app

• if the user reads the new comment (set up a scroll observer / intersection, Quasar has nice features for this), inform the backend about this and delete the notification on the backend if user has a subscription to thread

• setup cronjob on backend for notifications not “seen” by the user (like every 5 minutes)

• send a push message over firebase to subscribers

• service worker in my app listens to firebase messages and generates a push message

• when user reacts to push and navigates to the thread, this is handled by QIntersection and backend is informed that the user has “seen” the comment (like before)

• after 30 minutes, send out E-Mail notification from backend

This is probably overengineered for a simple “content updated” thing

The basic approach is: notify active user via websocket, inactive user via push, offline users via E-Mail. Don’t do it all at once, this is super annyoing. Keep track in your backend about notifications actually being read

Implement “priorities”. For example, I dont’t send push messages via firebase when someone has not actively subscribed to a thread. But I do of course update the UI when the user is browsing the thread currently

Thank you