feat(pwa): allow access elk users from service worker (#662)

Co-authored-by: patak <matias.capeletto@gmail.com>
zio/stable
Joaquín Sánchez 2023-01-01 20:38:05 +01:00 committed by GitHub
parent ca93f1a813
commit 496da96072
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 413 additions and 39 deletions

View File

@ -35,7 +35,8 @@ export const usePushManager = () => {
poll: currentUser.value?.pushSubscription?.alerts.poll ?? true,
policy: configuredPolicy.value[currentUser.value?.account?.acct ?? ''] ?? 'all',
})
const { history, commit, clear } = useManualRefHistory(pushNotificationData, { clone: true })
// don't clone, we're using indexeddb
const { history, commit, clear } = useManualRefHistory(pushNotificationData)
const saveEnabled = computed(() => {
const current = pushNotificationData.value
const previous = history.value?.[0]?.snapshot

View File

@ -1,6 +1,8 @@
import { login as loginMasto } from 'masto'
import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'
import type { Account, AccountCredentials, Instance, MastoClient, WsEvents } from 'masto'
import type { Ref } from 'vue'
import type { RemovableRef } from '@vueuse/core'
import type { ElkMasto, UserLogin } from '~/types'
import {
DEFAULT_POST_CHARS_LIMIT,
@ -14,7 +16,31 @@ import {
import type { PushNotificationPolicy, PushNotificationRequest } from '~/composables/push-notifications/types'
const mock = process.mock
const users = useLocalStorage<UserLogin[]>(STORAGE_KEY_USERS, mock ? [mock.user] : [], { deep: true })
const initializeUsers = (): Ref<UserLogin[]> | RemovableRef<UserLogin[]> => {
let defaultUsers = mock ? [mock.user] : []
// Backward compatibility with localStorage
let removeUsersOnLocalStorage = false
if (globalThis?.localStorage) {
const usersOnLocalStorageString = globalThis.localStorage.getItem(STORAGE_KEY_USERS)
if (usersOnLocalStorageString) {
defaultUsers = JSON.parse(usersOnLocalStorageString)
removeUsersOnLocalStorage = true
}
}
const users = process.server
? ref<UserLogin[]>(defaultUsers)
: useIDBKeyval<UserLogin[]>(STORAGE_KEY_USERS, defaultUsers, { deep: true })
if (removeUsersOnLocalStorage)
globalThis.localStorage.removeItem(STORAGE_KEY_USERS)
return users
}
const users = initializeUsers()
const instances = useLocalStorage<Record<string, Instance>>(STORAGE_KEY_SERVERS, mock ? mock.server : {}, { deep: true })
const currentUserId = useLocalStorage<string>(STORAGE_KEY_CURRENT_USER, mock ? mock.user.account.id : '')

View File

@ -44,6 +44,7 @@
"focus-trap": "^7.2.0",
"form-data": "^4.0.0",
"fuse.js": "^6.6.2",
"idb-keyval": "^6.2.0",
"js-yaml": "^4.1.0",
"lru-cache": "^7.14.1",
"masto": "^4.11.1",

View File

@ -48,6 +48,7 @@ specifiers:
form-data: ^4.0.0
fs-extra: ^11.1.0
fuse.js: ^6.6.2
idb-keyval: ^6.2.0
js-yaml: ^4.1.0
jsdom: ^20.0.3
lint-staged: ^13.1.0
@ -93,13 +94,14 @@ dependencies:
'@tiptap/suggestion': 2.0.0-beta.204
'@tiptap/vue-3': 2.0.0-beta.204
'@vueuse/core': 9.9.0
'@vueuse/integrations': 9.9.0_7zhv6s73i5wtygx2wkeytrmn7q
'@vueuse/integrations': 9.9.0_ha7ivgav6uqpoo2b5thfugqwjq
blurhash: 2.0.4
browser-fs-access: 0.31.1
floating-vue: 2.0.0-beta.20
focus-trap: 7.2.0
form-data: 4.0.0
fuse.js: 6.6.2
idb-keyval: 6.2.0
js-yaml: 4.1.0
lru-cache: 7.14.1
masto: 4.11.1
@ -157,7 +159,7 @@ devDependencies:
typescript: 4.9.4
unplugin-auto-import: 0.12.1_@vueuse+core@9.9.0
vite-plugin-inspect: 0.7.11
vite-plugin-pwa: 0.13.3_workbox-window@6.5.4
vite-plugin-pwa: 0.13.3
vitest: 0.26.2_jsdom@20.0.3
vue-tsc: 1.0.16_typescript@4.9.4
workbox-window: 6.5.4
@ -1621,8 +1623,8 @@ packages:
vue-i18n:
optional: true
dependencies:
'@intlify/message-compiler': 9.3.0-beta.11
'@intlify/shared': 9.3.0-beta.11
'@intlify/message-compiler': 9.3.0-beta.12
'@intlify/shared': 9.3.0-beta.12
jsonc-eslint-parser: 1.4.1
source-map: 0.6.1
vue-i18n: 9.3.0-beta.10
@ -1654,8 +1656,8 @@ packages:
source-map: 0.6.1
dev: true
/@intlify/message-compiler/9.3.0-beta.11:
resolution: {integrity: sha512-gGGfBGzM7JBXp1Q9gbDAy5jELz9ho3ILqnpxp2yp64+gkqohrqc2YXIvCdwZoc6AtKIh/Zmv4sWVqxkvMsBWtQ==}
/@intlify/message-compiler/9.3.0-beta.12:
resolution: {integrity: sha512-A8/s7pb3v8nf6HG77qFPJntxgQKI9GXxGnkn7aO+b03/X/GkF/4WceDSAIk3i+yLeIgszeBn9GZ23tSg4sTEHA==}
engines: {node: '>= 14'}
dependencies:
'@intlify/shared': 9.3.0-beta.11
@ -1672,6 +1674,11 @@ packages:
engines: {node: '>= 14'}
dev: true
/@intlify/shared/9.3.0-beta.12:
resolution: {integrity: sha512-WsmaS54sA8xuwezPKpa/OMoaX1v2VF2fCgAmYS6prDr2ir0CkUFWPm9A8ilmxzv4nkS61/v8+vf4lGGkn5uBdA==}
engines: {node: '>= 14'}
dev: true
/@intlify/unplugin-vue-i18n/0.8.0_vue-i18n@9.3.0-beta.10:
resolution: {integrity: sha512-bqMDYrbmV0oMLGHTdYMUXfcEsy2rPwQnGrQAg4gvw5FimvJfTQt3RliLVayT5ldOfeT2g0IUc/0t7LPeGrFUag==}
engines: {node: '>= 14.16'}
@ -1688,7 +1695,7 @@ packages:
optional: true
dependencies:
'@intlify/bundle-utils': 3.4.0_vue-i18n@9.3.0-beta.10
'@intlify/shared': 9.3.0-beta.11
'@intlify/shared': 9.3.0-beta.12
'@rollup/pluginutils': 4.2.1
'@vue/compiler-sfc': 3.2.45
debug: 4.3.4
@ -3514,7 +3521,7 @@ packages:
vue: 3.2.45
dev: true
/@vueuse/integrations/9.9.0_7zhv6s73i5wtygx2wkeytrmn7q:
/@vueuse/integrations/9.9.0_ha7ivgav6uqpoo2b5thfugqwjq:
resolution: {integrity: sha512-/wr3jrMlzbPNd38dO85NOT4j7vga9+eQewEZFXHJAFEvKnRxBy/Ytp1pt4Sz8dVOLLYMBHfSaVAra91ftfIh0w==}
peerDependencies:
async-validator: '*'
@ -3556,6 +3563,7 @@ packages:
'@vueuse/shared': 9.9.0
focus-trap: 7.2.0
fuse.js: 6.6.2
idb-keyval: 6.2.0
vue-demi: 0.13.11
transitivePeerDependencies:
- '@vue/composition-api'
@ -6186,6 +6194,12 @@ packages:
safer-buffer: 2.1.2
dev: true
/idb-keyval/6.2.0:
resolution: {integrity: sha512-uw+MIyQn2jl3+hroD7hF8J7PUviBU7BPKWw4f/ISf32D4LoGu98yHjrzWWJDASu9QNrX10tCJqk9YY0ClWm8Ng==}
dependencies:
safari-14-idb-fix: 3.0.0
dev: false
/idb/7.1.1:
resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
dev: true
@ -8590,6 +8604,10 @@ packages:
tslib: 2.4.1
dev: true
/safari-14-idb-fix/3.0.0:
resolution: {integrity: sha512-eBNFLob4PMq8JA1dGyFn6G97q3/WzNtFK4RnzT1fnLq+9RyrGknzYiM/9B12MnKAxuj1IXr7UKYtTNtjyKMBog==}
dev: false
/safe-buffer/5.1.2:
resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
@ -9817,11 +9835,10 @@ packages:
- supports-color
dev: true
/vite-plugin-pwa/0.13.3_workbox-window@6.5.4:
/vite-plugin-pwa/0.13.3:
resolution: {integrity: sha512-cjWXpZ7slAY14OKz7M8XdgTIi9wjf6OD6NkhiMAc+ogxnbUrecUwLdRtfGPCPsN2ftut5gaN1jTghb11p6IQAA==}
peerDependencies:
vite: ^3.1.0
workbox-window: ^6.5.4
dependencies:
'@rollup/plugin-replace': 4.0.0_rollup@2.79.1
debug: 4.3.4
@ -10069,7 +10086,7 @@ packages:
vue-router:
optional: true
dependencies:
'@intlify/shared': 9.3.0-beta.11
'@intlify/shared': 9.3.0-beta.12
'@intlify/vue-i18n-bridge': 0.8.0_vue-i18n@9.3.0-beta.10
'@intlify/vue-router-bridge': 0.8.0
ufo: 1.0.1

View File

@ -0,0 +1,106 @@
import { get } from 'idb-keyval'
import type { MastoNotification, NotificationInfo, PushPayload, UserLogin } from './types'
export const findNotification = async (
{ access_token, notification_id/* , notification_type */ }: PushPayload,
): Promise<NotificationInfo | undefined> => {
const users = await get<UserLogin[]>('elk-users')
if (!users)
return undefined
const filteredUsers = users.filter(user => user.token === access_token)
if (!filteredUsers || filteredUsers.length === 0)
return undefined
for (const user of filteredUsers) {
try {
const response = await fetch(`https://${user.server}/api/v1/notifications/${notification_id}`, {
method: 'get',
headers: {
'Authorization': `Bearer ${user.token}`,
'Content-Type': 'application/json',
},
})
// assume it is ok to return the first notification: backend should return 404 if not found
if (response && response.ok) {
const notification: MastoNotification = await response.json()
return { user, notification }
}
}
catch {
// just ignore
}
}
return undefined
}
export function createNotificationOptions(
pushPayload: PushPayload,
notificationInfo?: NotificationInfo,
): NotificationOptions {
const {
access_token,
body,
icon,
notification_id,
notification_type,
preferred_locale,
} = pushPayload
const url = notification_type === 'mention' ? 'notifications/mention' : 'notifications'
const notificationOptions: NotificationOptions = {
badge: '/pwa-192x192.png',
body,
data: {
access_token,
preferred_locale,
url: `/${url}`,
},
dir: 'auto',
icon,
lang: preferred_locale,
tag: notification_id,
timestamp: new Date().getTime(),
}
if (notificationInfo) {
const { user, notification } = notificationInfo
notificationOptions.tag = notification.id
/*
if (notification.account.avatar_static)
notificationOptions.icon = notification.account.avatar_static
*/
if (notification.created_at)
notificationOptions.timestamp = new Date(notification.created_at).getTime()
/* TODO: add spolier when actions available, checking also notification type
if (notification.status && (notification.status.spoilerText || notification.status.sensitive)) {
if (notification.status.spoilerText)
notificationOptions.body = notification.status.spoilerText
notificationOptions.image = undefined
}
*/
if (notification.status) {
// notificationOptions.body = htmlToPlainText(notification.status.content)
if (notification.status.media_attachments && notification.status.media_attachments.length > 0 && notification.status.media_attachments[0].preview_url)
notificationOptions.image = notification.status.media_attachments[0].preview_url
if (notification.type === 'favourite' || notification.type === 'reblog' || notification.type === 'mention')
notificationOptions.data.url = `${user.server}/@${user.account.username}/${notification.status.id}`
}
else if (notification.type === 'follow') {
notificationOptions.data.url = `${user.server}/@${notification.account.acct}`
}
}
return notificationOptions
}
/*
function htmlToPlainText(html: string) {
return decodeURIComponent(html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<[^>]*>/g, ''))
}
*/

View File

@ -1,9 +1,248 @@
// masto types and notification types differs
// Any type used from masto api retrieving notification from push notification id is no camel case, it is snake case
// I just copy/paste any entry from masto api and convert it to snake case, reusing types not including camel case props
import type {
AccountCredentials,
AttachmentMeta,
AttachmentType,
Card,
Mention,
StatusVisibility,
Tag,
} from 'masto'
export type NotificationType = 'mention' | 'status' | 'reblog' | 'follow' | 'follow_request' | 'favourite' | 'poll' | 'update' | 'admin.sign_up' | 'admin.report'
export interface PushPayload {
access_token: string
notification_id: string
notification_type: 'follow' | 'favourite' | 'reblog' | 'mention' | 'poll'
notification_type: NotificationType
preferred_locale: string
title: string
body: string
icon: string
}
export interface UserLogin {
server: string
token?: string
account: AccountCredentials
}
export interface NotificationInfo {
user: UserLogin
notification: MastoNotification
}
interface PollOption {
/** The text value of the poll option. String. */
title: string
/** The number of received votes for this option. Number, or null if results are not published yet. */
votes_count?: number
/** Custom emoji to be used for rendering poll options. */
emojis: Emoji[]
}
/**
* Represents a poll attached to a status.
* @see https://docs.joinmastodon.org/entities/poll/
*/
interface Poll {
/** The ID of the poll in the database. */
id: string
/** When the poll ends. */
expires_at?: string | null
/** Is the poll currently expired? */
expired: boolean
/** Does the poll allow multiple-choice answers? */
multiple: boolean
/** How many votes have been received. */
votes_count: number
/** How many unique accounts have voted on a multiple-choice poll. */
voters_count?: number | null
/** When called with a user token, has the authorized user voted? */
voted?: boolean
/**
* When called with a user token, which options has the authorized user chosen?
* Contains an array of index values for options.
*/
own_votes?: number[] | null
/** Possible answers for the poll. */
options: PollOption[]
}
export interface Attachment {
/** The ID of the attachment in the database. */
id: string
/** The type of the attachment. */
type: AttachmentType
/** The location of the original full-size attachment. */
url?: string | null
/** The location of a scaled-down preview of the attachment. */
preview_url: string
/** The location of the full-size original attachment on the remote website. */
remote_url?: string | null
/** Remote version of previewUrl */
preview_remote_url?: string | null
/** A shorter URL for the attachment. */
text_url?: string | null
/** Metadata returned by Paperclip. */
meta?: AttachmentMeta | null
/**
* Alternate text that describes what is in the media attachment,
* to be used for the visually impaired or when media attachments do not load.
*/
description?: string | null
/**
* A hash computed by the BlurHash algorithm,
* for generating colorful preview thumbnails when media has not been downloaded yet.
*/
blurhash?: string | null
}
export interface Emoji {
/** The name of the custom emoji. */
shortcode: string
/** A link to the custom emoji. */
url: string
/** A link to a static copy of the custom emoji. */
static_url: string
/** Whether this Emoji should be visible in the picker or unlisted. */
visible_in_picker: boolean
/** Used for sorting custom emoji in the picker. */
category?: string | null
}
export interface Status {
/** ID of the status in the database. */
id: string
/** URI of the status used for federation. */
uri: string
/** The date when this status was created. */
created_at: string
/** Timestamp of when the status was last edited. */
edited_at: string | null
/** The account that authored this status. */
account: MastoAccount
/** HTML-encoded status content. */
content: string
/** Visibility of this status. */
visibility: StatusVisibility
/** Is this status marked as sensitive content? */
sensitive: boolean
/** Subject or summary line, below which status content is collapsed until expanded. */
spoiler_text: string
/** Media that is attached to this status. */
media_attachments: Attachment[]
/** The application used to post this status. */
// application: Application
/** Mentions of users within the status content. */
mentions: Mention[]
/** Hashtags used within the status content. */
tags: Tag[]
/** Custom emoji to be used when rendering status content. */
emojis: Emoji[]
/** How many boosts this status has received. */
reblogs_count: number
/** How many favourites this status has received. */
favourites_count: number
/** How many replies this status has received. */
replies_count: number
/** A link to the status's HTML representation. */
url?: string | null
/** ID of the status being replied. */
in_reply_to_id?: string | null
/** ID of the account being replied to. */
in_reply_to_account_id?: string | null
/** The status being reblogged. */
reblog?: Status | null
/** The poll attached to the status. */
poll?: Poll | null
/** Preview card for links included within status content. */
card?: Card | null
/** Primary language of this status. */
language?: string | null
/**
* Plain-text source of a status. Returned instead of `content` when status is deleted,
* so the user may redraft from the source text without the client having
* to reverse-engineer the original text from the HTML content.
*/
text?: string | null
/** Have you favourited this status? */
favourited?: boolean | null
/** Have you boosted this status? */
reblogged?: boolean | null
/** Have you muted notifications for this status's conversation? */
muted?: boolean | null
/** Have you bookmarked this status? */
bookmarked?: boolean | null
/** Have you pinned this status? Only appears if the status is pin-able. */
pinned?: boolean | null
}
export interface Field {
/** The key of a given field's key-value pair. */
name: string
/** The value associated with the `name` key. */
value: string
/** Timestamp of when the server verified a URL value for a rel="me” link. */
verified_at?: string | null
}
export interface MastoAccount {
/** The account id */
id: string
/** The username of the account, not including domain */
username: string
/** The WebFinger account URI. Equal to `username` for local users, or `username@domain` for remote users. */
acct: string
/** The location of the user's profile page. */
url: string
/** The profile's display name. */
display_name: string
/** The profile's bio / description. */
note: string
/** An image icon that is shown next to statuses and in the profile. */
avatar: string
/** A static version of the `avatar`. Equal to avatar if its value is a static image; different if `avatar` is an animated GIF. */
avatar_static: string
/** An image banner that is shown above the profile and in profile cards. */
header: string
/** A static version of the header. Equal to `header` if its value is a static image; different if `header` is an animated GIF. */
header_static: string
/** Whether the account manually approves follow requests. */
locked: boolean
/** Custom emoji entities to be used when rendering the profile. If none, an empty array will be returned. */
emojis: Emoji[]
/** Whether the account has opted into discovery features such as the profile directory. */
discoverable: boolean
/** When the account was created. */
created_at: string
/** How many statuses are attached to this account. */
statuses_count: number
/** The reported followers of this profile. */
followers_count: number
/** The reported follows of this profile. */
following_count: number
/** Time of the last status posted */
last_status_at: string
/** Indicates that the profile is currently inactive and that its user has moved to a new account. */
moved?: boolean | null
/** An extra entity returned when an account is suspended. **/
suspended?: boolean | null
/** Additional metadata attached to a profile as name-value pairs. */
fields?: Field[] | null
/** Boolean to indicate that the account performs automated actions */
bot?: boolean | null
}
export interface MastoNotification {
/** The id of the notification in the database. */
id: string
/** The type of event that resulted in the notification. */
type: NotificationType
/** The timestamp of the notification. */
created_at: string
/** The account that performed the action that generated the notification. */
account: MastoAccount
/** Status that was the object of the notification, e.g. in mentions, reblogs, favourites, or polls. */
status?: Status | null
}

View File

@ -1,5 +1,6 @@
/// <reference lib="WebWorker" />
/// <reference types="vite/client" />
import { createNotificationOptions, findNotification } from './notification'
import type { PushPayload } from '~/service-worker/types'
declare const self: ServiceWorkerGlobalScope
@ -10,32 +11,15 @@ export const onPush = (event: PushEvent) => {
return Promise.resolve()
const options: PushPayload = event.data!.json()
const {
access_token,
body,
icon,
notification_id,
notification_type,
preferred_locale,
} = options
const url = notification_type === 'mention' ? 'notifications/mention' : 'notifications'
const notificationOptions: NotificationOptions = {
badge: '/pwa-192x192.png',
body,
data: {
access_token,
preferred_locale,
url: `/${url}`,
},
dir: 'auto',
icon,
lang: preferred_locale,
tag: notification_id,
timestamp: new Date().getTime(),
}
return self.registration.showNotification(options.title, notificationOptions)
return findNotification(options)
.catch((e) => {
console.error('unhandled error finding notification', e)
return Promise.resolve(undefined)
})
.then((notificationInfo) => {
return self.registration.showNotification(options.title, createNotificationOptions(options, notificationInfo))
})
})
event.waitUntil(promise)