{{ $t('user_card.statuses') }}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 97dfcb776..eebf606ae 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -125,6 +125,7 @@
"hide_attachments_in_convo": "Hide attachments in conversations",
"hide_attachments_in_tl": "Hide attachments in timeline",
"hide_isp": "Hide instance-specific panel",
+ "preload_images": "Preload images",
"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
"hide_user_stats": "Hide user statistics (e.g. the number of followers)",
"import_followers_from_a_csv_file": "Import follows from a csv file",
@@ -132,7 +133,7 @@
"inputRadius": "Input fields",
"checkboxRadius": "Checkboxes",
"instance_default": "(default: {value})",
- "instance_default_simple" : "(default)",
+ "instance_default_simple": "(default)",
"interface": "Interface",
"interfaceLanguage": "Interface language",
"invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.",
@@ -189,6 +190,8 @@
"false": "no",
"true": "yes"
},
+ "notifications": "Notifications",
+ "enable_web_push_notifications": "Enable web push notifications",
"style": {
"switcher": {
"keep_color": "Keep colors",
diff --git a/src/main.js b/src/main.js
index 7f3746c81..bf92e78e9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -50,6 +50,32 @@ const persistedStateOptions = {
'oauth'
]
}
+
+const registerPushNotifications = store => {
+ store.subscribe((mutation, state) => {
+ const vapidPublicKey = state.instance.vapidPublicKey
+ const permission = state.interface.notificationPermission === 'granted'
+ const isUserMutation = mutation.type === 'setCurrentUser'
+
+ if (isUserMutation && vapidPublicKey && permission) {
+ return store.dispatch('registerPushNotifications')
+ }
+
+ const user = state.users.currentUser
+ const isVapidMutation = mutation.type === 'setInstanceOption' && mutation.payload.name === 'vapidPublicKey'
+
+ if (isVapidMutation && user && permission) {
+ return store.dispatch('registerPushNotifications')
+ }
+
+ const isPermMutation = mutation.type === 'setNotificationPermission' && mutation.payload === 'granted'
+
+ if (isPermMutation && user && vapidPublicKey) {
+ return store.dispatch('registerPushNotifications')
+ }
+ })
+}
+
createPersistedState(persistedStateOptions).then((persistedState) => {
const store = new Vuex.Store({
modules: {
@@ -62,12 +88,12 @@ createPersistedState(persistedStateOptions).then((persistedState) => {
chat: chatModule,
oauth: oauthModule
},
- plugins: [persistedState],
+ plugins: [persistedState, registerPushNotifications],
strict: false // Socket modifies itself, let's ignore this for now.
// strict: process.env.NODE_ENV !== 'production'
})
- afterStoreSetup({store, i18n})
+ afterStoreSetup({ store, i18n })
})
// These are inlined by webpack's DefinePlugin
diff --git a/src/modules/config.js b/src/modules/config.js
index 45ac8f650..ccfd0190d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -9,6 +9,7 @@ const defaultState = {
hideAttachments: false,
hideAttachmentsInConv: false,
hideNsfw: true,
+ preloadImage: true,
loopVideo: true,
loopVideoSilentOnly: true,
autoLoad: true,
@@ -23,6 +24,7 @@ const defaultState = {
likes: true,
repeats: true
},
+ webPushNotifications: true,
muteWords: [],
highlight: {},
interfaceLanguage: browserLocale,
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 132fb08d2..956c9cb37 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -3,12 +3,13 @@ import { set, delete as del } from 'vue'
const defaultState = {
settings: {
currentSaveStateNotice: null,
- noticeClearTimeout: null
+ noticeClearTimeout: null,
+ notificationPermission: null
},
browserSupport: {
cssFilter: window.CSS && window.CSS.supports && (
window.CSS.supports('filter', 'drop-shadow(0 0)') ||
- window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
+ window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
)
}
}
@@ -23,10 +24,13 @@ const interfaceMod = {
}
set(state.settings, 'currentSaveStateNotice', { error: false, data: success })
set(state.settings, 'noticeClearTimeout',
- setTimeout(() => del(state.settings, 'currentSaveStateNotice'), 2000))
+ setTimeout(() => del(state.settings, 'currentSaveStateNotice'), 2000))
} else {
set(state.settings, 'currentSaveStateNotice', { error: true, errorData: error })
}
+ },
+ setNotificationPermission (state, permission) {
+ state.notificationPermission = permission
}
},
actions: {
@@ -35,6 +39,9 @@ const interfaceMod = {
},
settingsSaved ({ commit, dispatch }, { success, error }) {
commit('settingsSaved', { success, error })
+ },
+ setNotificationPermission ({ commit }, permission) {
+ commit('setNotificationPermission', permission)
}
}
}
diff --git a/src/modules/users.js b/src/modules/users.js
index 6d966c3bb..d2ac95cd4 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -1,8 +1,9 @@
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import { compact, map, each, merge } from 'lodash'
import { set } from 'vue'
+import registerPushNotifications from '../services/push/push.js'
import oauthApi from '../services/new_api/oauth'
-import {humanizeErrors} from './errors'
+import { humanizeErrors } from './errors'
// TODO: Unify with mergeOrAdd in statuses.js
export const mergeOrAdd = (arr, obj, item) => {
@@ -11,17 +12,25 @@ export const mergeOrAdd = (arr, obj, item) => {
if (oldItem) {
// We already have this, so only merge the new info.
merge(oldItem, item)
- return {item: oldItem, new: false}
+ return { item: oldItem, new: false }
} else {
// This is a new item, prepare it
arr.push(item)
obj[item.id] = item
- return {item, new: true}
+ return { item, new: true }
}
}
+const getNotificationPermission = () => {
+ const Notification = window.Notification
+
+ if (!Notification) return Promise.resolve(null)
+ if (Notification.permission === 'default') return Notification.requestPermission()
+ return Promise.resolve(Notification.permission)
+}
+
export const mutations = {
- setMuted (state, { user: {id}, muted }) {
+ setMuted (state, { user: { id }, muted }) {
const user = state.usersObject[id]
set(user, 'muted', muted)
},
@@ -45,7 +54,7 @@ export const mutations = {
setUserForStatus (state, status) {
status.user = state.usersObject[status.user.id]
},
- setColor (state, { user: {id}, highlighted }) {
+ setColor (state, { user: { id }, highlighted }) {
const user = state.usersObject[id]
set(user, 'highlight', highlighted)
},
@@ -77,9 +86,16 @@ const users = {
mutations,
actions: {
fetchUser (store, id) {
- store.rootState.api.backendInteractor.fetchUser({id})
+ store.rootState.api.backendInteractor.fetchUser({ id })
.then((user) => store.commit('addNewUsers', user))
},
+ registerPushNotifications (store) {
+ const token = store.state.currentUser.credentials
+ const vapidPublicKey = store.rootState.instance.vapidPublicKey
+ const isEnabled = store.rootState.config.webPushNotifications
+
+ registerPushNotifications(isEnabled, vapidPublicKey, token)
+ },
addNewStatuses (store, { statuses }) {
const users = map(statuses, 'user')
const retweetedUsers = compact(map(statuses, 'retweeted_status.user'))
@@ -143,6 +159,9 @@ const users = {
commit('setCurrentUser', user)
commit('addNewUsers', [user])
+ getNotificationPermission()
+ .then(permission => commit('setNotificationPermission', permission))
+
// Set our new backend interactor
commit('setBackendInteractor', backendInteractorService(accessToken))
@@ -161,12 +180,8 @@ const users = {
store.commit('addNewUsers', mutedUsers)
})
- if ('Notification' in window && window.Notification.permission === 'default') {
- window.Notification.requestPermission()
- }
-
// Fetch our friends
- store.rootState.api.backendInteractor.fetchFriends({id: user.id})
+ store.rootState.api.backendInteractor.fetchFriends({ id: user.id })
.then((friends) => commit('addNewUsers', friends))
})
} else {
diff --git a/src/services/push/push.js b/src/services/push/push.js
new file mode 100644
index 000000000..1ac304d14
--- /dev/null
+++ b/src/services/push/push.js
@@ -0,0 +1,69 @@
+import runtime from 'serviceworker-webpack-plugin/lib/runtime'
+
+function urlBase64ToUint8Array (base64String) {
+ const padding = '='.repeat((4 - base64String.length % 4) % 4)
+ const base64 = (base64String + padding)
+ .replace(/-/g, '+')
+ .replace(/_/g, '/')
+
+ const rawData = window.atob(base64)
+ return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)))
+}
+
+function isPushSupported () {
+ return 'serviceWorker' in navigator && 'PushManager' in window
+}
+
+function registerServiceWorker () {
+ return runtime.register()
+ .catch((err) => console.error('Unable to register service worker.', err))
+}
+
+function subscribe (registration, isEnabled, vapidPublicKey) {
+ if (!isEnabled) return Promise.reject(new Error('Web Push is disabled in config'))
+ if (!vapidPublicKey) return Promise.reject(new Error('VAPID public key is not found'))
+
+ const subscribeOptions = {
+ userVisibleOnly: true,
+ applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
+ }
+ return registration.pushManager.subscribe(subscribeOptions)
+}
+
+function sendSubscriptionToBackEnd (subscription, token) {
+ return window.fetch('/api/v1/push/subscription/', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${token}`
+ },
+ body: JSON.stringify({
+ subscription,
+ data: {
+ alerts: {
+ follow: true,
+ favourite: true,
+ mention: true,
+ reblog: true
+ }
+ }
+ })
+ })
+ .then((response) => {
+ if (!response.ok) throw new Error('Bad status code from server.')
+ return response.json()
+ })
+ .then((responseData) => {
+ if (!responseData.id) throw new Error('Bad response from server.')
+ return responseData
+ })
+}
+
+export default function registerPushNotifications (isEnabled, vapidPublicKey, token) {
+ if (isPushSupported()) {
+ registerServiceWorker()
+ .then((registration) => subscribe(registration, isEnabled, vapidPublicKey))
+ .then((subscription) => sendSubscriptionToBackEnd(subscription, token))
+ .catch((e) => console.warn(`Failed to setup Web Push Notifications: ${e.message}`))
+ }
+}
diff --git a/src/sw.js b/src/sw.js
new file mode 100644
index 000000000..6cecb3f38
--- /dev/null
+++ b/src/sw.js
@@ -0,0 +1,38 @@
+/* eslint-env serviceworker */
+
+import localForage from 'localforage'
+
+function isEnabled () {
+ return localForage.getItem('vuex-lz')
+ .then(data => data.config.webPushNotifications)
+}
+
+function getWindowClients () {
+ return clients.matchAll({ includeUncontrolled: true })
+ .then((clientList) => clientList.filter(({ type }) => type === 'window'))
+}
+
+self.addEventListener('push', (event) => {
+ if (event.data) {
+ event.waitUntil(isEnabled().then((isEnabled) => {
+ return isEnabled && getWindowClients().then((list) => {
+ const data = event.data.json()
+
+ if (list.length === 0) return self.registration.showNotification(data.title, data)
+ })
+ }))
+ }
+})
+
+self.addEventListener('notificationclick', (event) => {
+ event.notification.close()
+
+ event.waitUntil(getWindowClients().then((list) => {
+ for (var i = 0; i < list.length; i++) {
+ var client = list[i]
+ if (client.url === '/' && 'focus' in client) { return client.focus() }
+ }
+
+ if (clients.openWindow) return clients.openWindow('/')
+ }))
+})
diff --git a/yarn.lock b/yarn.lock
index 1547bfc8d..6b8a97cb9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3925,7 +3925,7 @@ mime@^1.3.4, mime@^1.5.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
-"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@~3.0.2:
+"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
version "3.0.4"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
dependencies:
@@ -5289,6 +5289,12 @@ serve-static@1.13.1:
parseurl "~1.3.2"
send "0.16.1"
+serviceworker-webpack-plugin@0.2.3:
+ version "0.2.3"
+ resolved "https://registry.yarnpkg.com/serviceworker-webpack-plugin/-/serviceworker-webpack-plugin-0.2.3.tgz#1873ed6fc83c873ac8240fac443c615d374feeb2"
+ dependencies:
+ minimatch "^3.0.3"
+
set-blocking@^2.0.0, set-blocking@~2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"