Gab Social. All are welcome.

app/javascript/gabsocial/service_worker/entry.js

@@ -0,0 +1,86 @@
+// import { freeStorage, storageFreeable } from '../storage/modifier';
+import './web_push_notifications';
+
+// function openSystemCache() {
+//   return caches.open('gabsocial-system');
+// }
+
+function openWebCache() {
+  return caches.open('gabsocial-web');
+}
+
+function fetchRoot() {
+  return fetch('/', { credentials: 'include', redirect: 'manual' });
+}
+
+// const firefox = navigator.userAgent.match(/Firefox\/(\d+)/);
+// const invalidOnlyIfCached = firefox && firefox[1] < 60;
+
+// Cause a new version of a registered Service Worker to replace an existing one
+// that is already installed, and replace the currently active worker on open pages.
+self.addEventListener('install', function(event) {
+  event.waitUntil(Promise.all([openWebCache(), fetchRoot()]).then(([cache, root]) => cache.put('/', root)));
+});
+self.addEventListener('activate', function(event) {
+  event.waitUntil(self.clients.claim());
+});
+self.addEventListener('fetch', function(event) {
+  const url = new URL(event.request.url);
+
+  if (url.pathname === '/auth/sign_out') {
+    const asyncResponse = fetch(event.request);
+    const asyncCache = openWebCache();
+
+    event.respondWith(asyncResponse.then(response => {
+      if (response.ok || response.type === 'opaqueredirect') {
+        return Promise.all([
+          asyncCache.then(cache => cache.delete('/')),
+          indexedDB.deleteDatabase('gabsocial'),
+        ]).then(() => response);
+      }
+
+      return response;
+    }));
+  } else if (
+    url.pathname.startsWith('/system/') ||
+    url.pathname.startsWith('/api/') ||
+    url.pathname.startsWith('/settings/') ||
+    url.pathname.startsWith('/media/') ||
+    url.pathname.startsWith('/admin/') ||
+    url.pathname.startsWith('/about/')) {
+    //non-webapp routes
+  } else if (url.pathname.startsWith('/')) {
+    // : TODO : if is /web
+    const asyncResponse = fetchRoot();
+    const asyncCache = openWebCache();
+
+    event.respondWith(asyncResponse.then(
+      response => {
+        const clonedResponse = response.clone();
+        asyncCache.then(cache => cache.put('/', clonedResponse)).catch();
+        return response;
+      },
+      () => asyncCache.then(cache => cache.match('/'))));
+  } /* else if (storageFreeable && (ATTACHMENT_HOST ? url.host === ATTACHMENT_HOST : url.pathname.startsWith('/system/'))) {
+    event.respondWith(openSystemCache().then(cache => {
+      return cache.match(event.request.url).then(cached => {
+        if (cached === undefined) {
+          const asyncResponse = invalidOnlyIfCached && event.request.cache === 'only-if-cached' ?
+            fetch(event.request, { cache: 'no-cache' }) : fetch(event.request);
+
+          return asyncResponse.then(response => {
+            if (response.ok) {
+              cache
+                .put(event.request.url, response.clone())
+                .catch(()=>{}).then(freeStorage()).catch();
+            }
+
+            return response;
+          });
+        }
+
+        return cached;
+      });
+    }));
+  } */
+});

app/javascript/gabsocial/service_worker/web_push_locales.js

@@ -0,0 +1,31 @@
+/* @preval */
+
+const fs   = require('fs');
+const path = require('path');
+
+const filtered  = {};
+const filenames = fs.readdirSync(path.resolve(__dirname, '../locales'));
+
+filenames.forEach(filename => {
+  if (!filename.match(/\.json$/) || filename.match(/defaultMessages|whitelist/)) return;
+
+  const content = fs.readFileSync(path.resolve(__dirname, `../locales/${filename}`), 'utf-8');
+  const full    = JSON.parse(content);
+  const locale  = filename.split('.')[0];
+
+  filtered[locale] = {
+    'notification.favourite': full['notification.favourite'] || '',
+    'notification.follow': full['notification.follow'] || '',
+    'notification.mention': full['notification.mention'] || '',
+    'notification.reblog': full['notification.reblog'] || '',
+    'notification.poll': full['notification.poll'] || '',
+
+    'status.show_more': full['status.show_more'] || '',
+    'status.reblog': full['status.reblog'] || '',
+    'status.favourite': full['status.favourite'] || '',
+
+    'notifications.group': full['notifications.group'] || '',
+  };
+});
+
+module.exports = JSON.parse(JSON.stringify(filtered));

app/javascript/gabsocial/service_worker/web_push_notifications.js

@@ -0,0 +1,218 @@
+import IntlMessageFormat from 'intl-messageformat';
+import locales from './web_push_locales';
+import { unescape } from 'lodash';
+
+const MAX_NOTIFICATIONS = 5;
+const GROUP_TAG = 'tag';
+
+const notify = options =>
+  self.registration.getNotifications().then(notifications => {
+    if (notifications.length >= MAX_NOTIFICATIONS) { // Reached the maximum number of notifications, proceed with grouping
+      const group = {
+        title: formatMessage('notifications.group', options.data.preferred_locale, { count: notifications.length + 1 }),
+        body: notifications.sort((n1, n2) => n1.timestamp < n2.timestamp).map(notification => notification.title).join('\n'),
+        badge: '/badge.png',
+        icon: '/android-chrome-192x192.png',
+        tag: GROUP_TAG,
+        data: {
+          url: (new URL('/notifications', self.location)).href,
+          count: notifications.length + 1,
+          preferred_locale: options.data.preferred_locale,
+        },
+      };
+
+      notifications.forEach(notification => notification.close());
+
+      return self.registration.showNotification(group.title, group);
+    } else if (notifications.length === 1 && notifications[0].tag === GROUP_TAG) { // Already grouped, proceed with appending the notification to the group
+      const group = cloneNotification(notifications[0]);
+
+      group.title = formatMessage('notifications.group', options.data.preferred_locale, { count: group.data.count + 1 });
+      group.body  = `${options.title}\n${group.body}`;
+      group.data  = { ...group.data, count: group.data.count + 1 };
+
+      return self.registration.showNotification(group.title, group);
+    }
+
+    return self.registration.showNotification(options.title, options);
+  });
+
+const fetchFromApi = (path, method, accessToken) => {
+  const url = (new URL(path, self.location)).href;
+
+  return fetch(url, {
+    headers: {
+      'Authorization': `Bearer ${accessToken}`,
+      'Content-Type': 'application/json',
+    },
+
+    method: method,
+    credentials: 'include',
+  }).then(res => {
+    if (res.ok) {
+      return res;
+    } else {
+      throw new Error(res.status);
+    }
+  }).then(res => res.json());
+};
+
+const cloneNotification = notification => {
+  const clone = {};
+  let k;
+
+  // Object.assign() does not work with notifications
+  for(k in notification) {
+    clone[k] = notification[k];
+  }
+
+  return clone;
+};
+
+const formatMessage = (messageId, locale, values = {}) =>
+  (new IntlMessageFormat(locales[locale][messageId], locale)).format(values);
+
+const htmlToPlainText = html =>
+  unescape(html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<[^>]*>/g, ''));
+
+const handlePush = (event) => {
+  const { access_token, notification_id, preferred_locale, title, body, icon } = event.data.json();
+
+  // Placeholder until more information can be loaded
+  event.waitUntil(
+    fetchFromApi(`/api/v1/notifications/${notification_id}`, 'get', access_token).then(notification => {
+      const options = {};
+
+      options.title     = formatMessage(`notification.${notification.type}`, preferred_locale, { name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username });
+      options.body      = notification.status && htmlToPlainText(notification.status.content);
+      options.icon      = notification.account.avatar_static;
+      options.timestamp = notification.created_at && new Date(notification.created_at);
+      options.tag       = notification.id;
+      options.badge     = '/badge.png';
+      options.image     = notification.status && notification.status.media_attachments.length > 0 && notification.status.media_attachments[0].preview_url || undefined;
+      options.data      = { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/${notification.account.username}/posts/${notification.status.id}` : `/${notification.account.username}` };
+
+      if (notification.status && notification.status.spoiler_text || notification.status.sensitive) {
+        options.data.hiddenBody  = htmlToPlainText(notification.status.content);
+        options.data.hiddenImage = notification.status.media_attachments.length > 0 && notification.status.media_attachments[0].preview_url;
+
+        if (notification.status.spoiler_text) {
+          options.body    = notification.status.spoiler_text;
+        }
+
+        options.image   = undefined;
+        options.actions = [actionExpand(preferred_locale)];
+      } else if (notification.type === 'mention') {
+        options.actions = [actionReblog(preferred_locale), actionFavourite(preferred_locale)];
+      }
+
+      return notify(options);
+    }).catch(() => {
+      return notify({
+        title,
+        body,
+        icon,
+        tag: notification_id,
+        timestamp: new Date(),
+        badge: '/badge.png',
+        data: { access_token, preferred_locale, url: '/notifications' },
+      });
+    })
+  );
+};
+
+const actionExpand = preferred_locale => ({
+  action: 'expand',
+  icon: '/web-push-icon_expand.png',
+  title: formatMessage('status.show_more', preferred_locale),
+});
+
+const actionReblog = preferred_locale => ({
+  action: 'reblog',
+  icon: '/web-push-icon_reblog.png',
+  title: formatMessage('status.reblog', preferred_locale),
+});
+
+const actionFavourite = preferred_locale => ({
+  action: 'favourite',
+  icon: '/web-push-icon_favourite.png',
+  title: formatMessage('status.favourite', preferred_locale),
+});
+
+const findBestClient = clients => {
+  const focusedClient = clients.find(client => client.focused);
+  const visibleClient = clients.find(client => client.visibilityState === 'visible');
+
+  return focusedClient || visibleClient || clients[0];
+};
+
+const expandNotification = notification => {
+  const newNotification = cloneNotification(notification);
+
+  newNotification.body    = newNotification.data.hiddenBody;
+  newNotification.image   = newNotification.data.hiddenImage;
+  newNotification.actions = [actionReblog(notification.data.preferred_locale), actionFavourite(notification.data.preferred_locale)];
+
+  return self.registration.showNotification(newNotification.title, newNotification);
+};
+
+const removeActionFromNotification = (notification, action) => {
+  const newNotification = cloneNotification(notification);
+
+  newNotification.actions = newNotification.actions.filter(item => item.action !== action);
+
+  return self.registration.showNotification(newNotification.title, newNotification);
+};
+
+const openUrl = url =>
+  self.clients.matchAll({ type: 'window' }).then(clientList => {
+    if (clientList.length !== 0) {
+      // : TODO :
+      const webClients = clientList.filter(client => /\//.test(client.url));
+
+      if (webClients.length !== 0) {
+        const client       = findBestClient(webClients);
+        const { pathname } = new URL(url, self.location);
+
+        // : TODO :
+        if (pathname.startsWith('/')) {
+          return client.focus().then(client => client.postMessage({
+            type: 'navigate',
+            path: pathname.slice('/'.length - 1),
+          }));
+        }
+      } else if ('navigate' in clientList[0]) { // Chrome 42-48 does not support navigate
+        const client = findBestClient(clientList);
+
+        return client.navigate(url).then(client => client.focus());
+      }
+    }
+
+    return self.clients.openWindow(url);
+  });
+
+const handleNotificationClick = (event) => {
+  const reactToNotificationClick = new Promise((resolve, reject) => {
+    if (event.action) {
+      if (event.action === 'expand') {
+        resolve(expandNotification(event.notification));
+      } else if (event.action === 'reblog') {
+        const { data } = event.notification;
+        resolve(fetchFromApi(`/api/v1/statuses/${data.id}/reblog`, 'post', data.access_token).then(() => removeActionFromNotification(event.notification, 'reblog')));
+      } else if (event.action === 'favourite') {
+        const { data } = event.notification;
+        resolve(fetchFromApi(`/api/v1/statuses/${data.id}/favourite`, 'post', data.access_token).then(() => removeActionFromNotification(event.notification, 'favourite')));
+      } else {
+        reject(`Unknown action: ${event.action}`);
+      }
+    } else {
+      event.notification.close();
+      resolve(openUrl(event.notification.data.url));
+    }
+  });
+
+  event.waitUntil(reactToNotificationClick);
+};
+
+self.addEventListener('push', handlePush);
+self.addEventListener('notificationclick', handleNotificationClick);