feat: add ios specific push notification instructions

Closes #2992

web/utils/browserPushNotifications.ts

@@ -1,3 +1,15 @@
-export default function isPushNotificationSupported() {
-  return 'serviceWorker' in navigator && 'PushManager' in window;
+import { isMobileSafariIos } from './helpers';
+
+export function arePushNotificationSupported() {
+  return 'Notification' in window && 'serviceWorker' in navigator && 'PushManager' in window;
+}
+
+export function canPushNotificationsBeSupported() {
+  // Mobile safari will return false for supporting push notifications, but
+  // it does support them. So we need to check for mobile safari and return
+  // true if it is.
+  if (isMobileSafariIos()) {
+    return true;
+  }
+  return 'Notification' in window && 'serviceWorker' in navigator && 'PushManager' in window;
 }

web/utils/helpers.js

@@ -1,3 +1,5 @@
+import UAParser from 'ua-parser-js';
+
 export function pluralize(string, count) {
   if (count === 1) {
     return string;
@@ -20,3 +22,32 @@ export function mergeMeta(meta) {
     return acc;
   }, {});
 }
+
+export const isMobileSafariIos = () => {
+  try {
+    const ua = navigator.userAgent;
+    const uaParser = new UAParser(ua);
+    const browser = uaParser.getBrowser();
+    const device = uaParser.getDevice();
+
+    if (device.vendor !== 'Apple') {
+      return false;
+    }
+
+    if (device.type !== 'mobile' && device.type !== 'tablet') {
+      return false;
+    }
+
+    return browser.name === 'Mobile Safari' || browser.name === 'Safari';
+  } catch (e) {
+    return false;
+  }
+};
+
+export const isMobileSafariHomeScreenApp = () => {
+  if (!isMobileSafariIos()) {
+    return false;
+  }
+
+  return 'standalone' in window.navigator && window.navigator.standalone;
+};