Switch from FCM to WebPush (#2679)

* Add initial web push

* Improving web push options

* Refine web push notifications, remove cordova

* Minor tweaks

docs/src/SUMMARY.md

@@ -22,5 +22,3 @@
 - [Backend introduction](backend-introduction.md)
 - [Notifications](notifications.md)
 - [Sparkpost](sparkpost.md)
-- [Mobile](mobile.md)
-  - [Android SDK](android-sdk.md)

package.json

@@ -56,7 +56,6 @@
     "diff": "^5.1.0",
     "diff2html": "^3.4.35",
     "element-closest": "^3.0.0",
-    "firebase": "^10.0.0",
     "floating-vue": "^2.0.0-beta.24",
     "intl": "^1.2.5",
     "jstimezonedetect": "^1.0.7",

quasar.conf.js

@@ -38,7 +38,6 @@ module.exports = configure(function (ctx) {
       'pwa',
       'helloDeveloper',
       'addressbar-color',
-      'cordova',
       'i18n',
       'bootstrapData',
       'polyfill',

src-pwa/custom-service-worker.js

@@ -3,9 +3,6 @@
  * is picked up by the build system ONLY if
  * quasar.conf > pwa > workboxPluginMode is set to "injectManifest"
  *
- * See https://docs.karrot.world/mobile.html for a hint ... you'll need to dig around a bit more on
- * https://console.firebase.google.com/ though to find the sender id.
- *
  */
 
 import { clientsClaim } from 'workbox-core'
@@ -17,7 +14,57 @@ self.skipWaiting()
 // Take over all Karrot pages in the browser, even when they haven't been opened through the service worker
 clientsClaim()
 
-require('./firebase').init()
+self.addEventListener('push', event => {
+  const data = event.data?.json()
+  const {
+    title,
+    body,
+    url,
+    tag,
+    image_url: imageUrl,
+  } = data
+
+  // See stuff you can set here https://developer.mozilla.org/en-US/docs/Web/API/Notification
+  const options = {
+    data: {},
+  }
+
+  if (body) {
+    options.body = body
+  }
+
+  if (tag) {
+    options.tag = tag
+    options.renotify = true
+  }
+
+  if (url) {
+    options.data.url = url
+  }
+
+  if (imageUrl) {
+    options.icon = imageUrl
+  }
+
+  event.waitUntil(
+    self.registration.showNotification(title, options),
+  )
+})
+
+self.addEventListener('notificationclick', event => {
+  event.preventDefault()
+  if (event.notification.data.url) {
+    event.waitUntil(
+      event.notification.close(),
+      self.clients.openWindow(event.notification.data.url),
+    )
+  }
+  else {
+    event.waitUntil(
+      event.notification.close(),
+    )
+  }
+})
 
 // __WB_MANIFEST is used by injectManifest to set the files for caching
 precacheAndRoute(self.__WB_MANIFEST)

src/authuser/mutations.js

@@ -4,7 +4,6 @@ import { useRoute, useRouter } from 'vue-router'
 
 import { useSetAuthUser } from '@/authuser/queries'
 import { usePushService } from '@/subscriptions/services/push'
-import { useTokenService } from '@/subscriptions/services/token'
 import unsubscribeAPI from '@/unsubscribe/api/unsubscribe'
 import usersAPI from '@/users/api/users'
 import { withStatus } from '@/utils/queryHelpers'
@@ -52,22 +51,15 @@ const showLogoutToast = throttle(() => showToast({
 export function useLogoutMutation () {
   const router = useRouter()
   const setAuthUser = useSetAuthUser()
-  const { deleteToken } = usePushService()
-  const { deleteToken: deleteTokenFromServer } = useTokenService()
+  const { unsubscribe } = usePushService()
 
   return withStatus(useMutation(
     () => api.logout(),
     {
       async onMutate () {
         // Before the logout...
         // We wait for the response as we need to be logged in still
-        await Promise.all([
-          // removes the token from browser and fcm
-          deleteToken(),
-          // removes the subscription from server
-          // TODO: would be better to have the subscriptions associated with sessions and clear them on the server
-          deleteTokenFromServer(),
-        ])
+        await unsubscribe()
       },
       async onSuccess () {
         await router.push({ name: 'groupsGallery' })

src/base/queries.js

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/vue-query'
 
 import configAPI from '@/base/api/config'
+import { useWait } from '@/utils/queryHelpers'
 
 export const queryKeyConfig = () => ['config']
 
@@ -15,6 +16,7 @@ export function useConfigQuery () {
   )
   return {
     ...query,
+    wait: useWait(query),
     config: query.data,
   }
 }

src/communityFeed/queries.js

@@ -11,7 +11,11 @@ export const queryKeyCommunityTopic = topicId => [QUERY_KEY_BASE, 'topic', topic
 export function useCommunityFeedQuery ({ feed }) {
   const query = useQuery(
     queryKeyCommunityFeed(feed),
-    () => api.latestTopics(unref(feed)).catch(() => ([])),
+    () => {
+      const value = unref(feed)
+      if (!value) return []
+      return api.latestTopics(value)
+    },
     {
       placeholderData: () => [],
       enabled: computed(() => Boolean(unref(feed))),
@@ -42,7 +46,11 @@ export function useCommunityFeedMetaQuery (queryOptions = {}) {
 export function useCommunityTopicQuery ({ topicId }) {
   const query = useQuery(
     queryKeyCommunityTopic(topicId),
-    () => api.getTopic(unref(topicId)),
+    () => {
+      const value = unref(topicId)
+      if (!value) return {}
+      return api.getTopic(value)
+    },
     {
       enabled: computed(() => Boolean(unref(topicId))),
     },

src/communityFeed/services.js

@@ -45,7 +45,7 @@ export const useCommunityBannerService = defineService(() => {
   const dismissedBannerId = ref(getDismissedBannerIdFromLocalStorage())
 
   const communityBanner = computed(() => {
-    if (topic.value) {
+    if (topic.value?.postStream?.posts) {
       const posts = [...topic.value.postStream.posts]
       // remove the first one, the first post in the topic is not an announcement (by our definition)
       posts.shift()

src/subscriptions/api/subscriptions.js

@@ -2,16 +2,12 @@ import axios from '@/base/api/axios'
 
 export default {
 
-  async create (data) {
-    return (await axios.post('/api/subscriptions/push/', data)).data
+  async subscribe (data) {
+    return (await axios.post('/api/subscriptions/web-push/subscribe/', data)).data
   },
 
-  async list () {
-    return (await axios.get('/api/subscriptions/push/')).data
-  },
-
-  async delete (subscriptionId) {
-    return (await axios.delete(`/api/subscriptions/push/${subscriptionId}/`)).data
+  async unsubscribe (data) {
+    return (await axios.post('/api/subscriptions/web-push/unsubscribe/', data)).data
   },
 
 }