Show message for Safari users that push will not work

core/assets/js/app.js

@@ -76,16 +76,16 @@ Hooks.NativeWrapper = {
   },
   toggleSidePanel() {
     console.log("NativeWrapper::toggleSidePanel")
-    nativeWrapper.toggleSidePanel({origin: "right"})
+    nativeWrapper.toggleSidePanel({ origin: "right" })
     window.dispatchEvent(new CustomEvent("toggle-native-menu", {}))
   }
 }
 
 Hooks.PythonUploader = {
-  destroyed(){
+  destroyed() {
     this.worker && this.worker.terminate();
   },
-  mounted(){
+  mounted() {
     console.log("PythonUploader mounted")
 
     this.worker = new Worker("/js/pyworker.js");
@@ -94,7 +94,7 @@ Hooks.PythonUploader = {
       const { eventType } = event.data;
       if (eventType === "initialized") {
         const script = this.el.getElementsByTagName("code")[0].innerText
-        this.worker.postMessage({eventType: "runPython", script })
+        this.worker.postMessage({ eventType: "runPython", script })
         // Let the LiveView know everything is ready
         this.el.querySelector(".loading-indicator").hidden = true;
         this.el.querySelector(".step2").hidden = false;
@@ -107,7 +107,7 @@ Hooks.PythonUploader = {
       }
     }
     // Hook up the process button to the worker
-    this.el.addEventListener("click", (event)=>{
+    this.el.addEventListener("click", (event) => {
       if (event.target.dataset.role !== "process-trigger") {
         return;
       }
@@ -126,7 +126,7 @@ Hooks.PythonUploader = {
       reader.read().then(sendToWorker);
     })
     // Hook up the share results button
-    this.el.addEventListener("change", (event)=>{
+    this.el.addEventListener("change", (event) => {
       if (event.target.dataset.role !== "file-input") {
         return;
       }
@@ -136,7 +136,7 @@ Hooks.PythonUploader = {
       this.el.querySelector(".script").hidden = false;
     })
     // Hook up the share results button
-    this.el.addEventListener("click", (event)=>{
+    this.el.addEventListener("click", (event) => {
       if (event.target.dataset.role !== "donate-trigger") {
         return;
       }
@@ -207,7 +207,7 @@ window.nativeIOSWrapper = {
       id
     });
   },
-  toggleSidePanel: (info)=>{
+  toggleSidePanel: (info) => {
     window.webkit.messageHandlers.Native.postMessage({
       type: "toggleSidePanel",
       ...info
@@ -290,7 +290,7 @@ window.addEventListener("phx:page-loading-stop", (info) => {
     id: screenId(info.detail.to),
     rightBarButtons: [{
       title: "Menu",
-      action: {id: "toggle-native-menu"},
+      action: { id: "toggle-native-menu" },
     }]
   });
   nativeWrapper.webReady(screenId(info.detail.to));
@@ -303,9 +303,9 @@ window.setScreenFromNative = (screenId, state) => {
     }, 0);
   });
 };
-window.handleActionFromNative = (action)=>{
+window.handleActionFromNative = (action) => {
   if (action.id === "toggle-native-menu") {
-    nativeWrapper.toggleSidePanel({origin: "right"})
+    nativeWrapper.toggleSidePanel({ origin: "right" })
     window.dispatchEvent(new CustomEvent("toggle-native-menu", {}))
   }
 }
@@ -325,16 +325,19 @@ window.liveSocket = liveSocket;
 
 // PWA
 //
-const pushStore = Spruce.store("push", {registration: "pending"})
+const pushStore = Spruce.store("push", { registration: "pending" })
 const getExistingSubscription = () => {
-  return navigator.serviceWorker.ready.then((registration)=> {
-    return registration.pushManager.getSubscription().then(subscription=>{
-      return {registration, subscription};
+  return navigator.serviceWorker.ready.then((registration) => {
+    if (registration.pushManager === undefined) {
+      throw "unavailable";
+    }
+    return registration.pushManager.getSubscription().then(subscription => {
+      return { registration, subscription };
     })
   });
 }
 const registerPushSubscription = (subscription) => {
-      console.log("Server", subscription);
+  console.log("Server", subscription);
   return fetch('/web-push/register', {
     method: 'post',
     headers: {
@@ -343,28 +346,28 @@ const registerPushSubscription = (subscription) => {
     body: JSON.stringify({
       subscription: subscription
     }),
-  }).then(()=>{
+  }).then(() => {
     pushStore.registration = "registered"
   });
 }
 
 
-window.registerForPush = ()=>{
+window.registerForPush = () => {
   if (!('serviceWorker' in navigator)) {
     alert("Sorry, your browser does not support push")
     return;
   }
   pushStore.registration = "registering"
-  getExistingSubscription().then(({registration,subscription})=> {
+  getExistingSubscription().then(({ registration, subscription }) => {
     if (subscription) {
       // already registered
       return subscription;
     }
 
-    return fetch('/web-push/vapid-public-key').then((response)=>{
+    return fetch('/web-push/vapid-public-key').then((response) => {
       console.log("Vapid", response);
       return response.text()
-    }).then((vapidPublicKey)=>{
+    }).then((vapidPublicKey) => {
       // Chrome doesn’t accept the base64-encoded (string) vapidPublicKey yet urlBase64ToUint8Array() is defined in /tools.js
       const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
 
@@ -373,24 +376,26 @@ window.registerForPush = ()=>{
         applicationServerKey: convertedVapidKey
       });
     })
-  }).then(registerPushSubscription).catch(e=>{
+  }).then(registerPushSubscription).catch(e => {
     pushStore.registration = "denied";
   });
 }
 if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('/sw.js', {scope: './'})
-  .catch((error) => {
-    // registration failed
-    console.log('Registration failed with ' + error);
-  });
+  navigator.serviceWorker.register('/sw.js', { scope: './' })
+    .catch((error) => {
+      // registration failed
+      console.log('Registration failed with ' + error);
+    });
 
-  getExistingSubscription().then(({subscription}) => {
+  getExistingSubscription().then(({ subscription }) => {
     if (subscription) {
       return registerPushSubscription(subscription);
     } else {
       pushStore.registration = "not-registered";
     }
-  })
+  }).catch(e => {
+    pushStore.registration = "unavailable";
+  });
 } else {
-  Spruce.store("push", {registration: "unavailable"})
+  Spruce.store("push", { registration: "unavailable" })
 }

core/lib/core_web/live/user/settings.ex

@@ -45,6 +45,7 @@ defmodule CoreWeb.User.Settings do
               <BodyMedium>
                 <span x-show="$store.push.registration === 'pending'">{{dgettext("eyra-account", "push.registration.pending")}}</span>
                 <span x-show="$store.push.registration === 'denied'">{{dgettext("eyra-account", "push.registration.denied")}}</span>
+                <span x-show="$store.push.registration === 'unavailable'">{{dgettext("eyra-account", "push.registration.unavailable")}}</span>
               </BodyMedium>
               <div x-show="$store.push.registration === 'registered'">
                 <span>{{dgettext("eyra-account", "push.registration.activated")}}</span>

core/priv/gettext/en/LC_MESSAGES/eyra-account.po

@@ -97,12 +97,12 @@ msgid "push.registration.title"
 msgstr "Push notifications"
 
 #, elixir-format
-#: lib/core_web/live/user/settings.ex:50
+#: lib/core_web/live/user/settings.ex:52
 msgid "push.registration.activated"
 msgstr "Push notifications are activated on this browser"
 
 #, elixir-format
-#: lib/core_web/live/user/settings.ex:47
+#: lib/core_web/live/user/settings.ex:48
 msgid "push.registration.denied"
 msgstr "Push notifications are deactivated on this browser"
 
@@ -112,12 +112,12 @@ msgid "push.registration.label"
 msgstr "Activate on this browser"
 
 #, elixir-format
-#: lib/core_web/live/user/settings.ex:46
+#: lib/core_web/live/user/settings.ex:47
 msgid "push.registration.pending"
 msgstr "Determining state.."
 
 #, elixir-format
-#: lib/core_web/live/user/settings.ex:52
+#: lib/core_web/live/user/settings.ex:54
 msgid "push.registration.test.button"
 msgstr "Send test notification"
 
@@ -170,3 +170,8 @@ msgstr "Students of the selected studies are eligitable. No selection means all
 #: bundles/link/lib/pool/form/submission.ex:146
 msgid "features.content.description"
 msgstr "Students with the selected characteristics are eligitable. No selection means all students are eligitable."
+
+#, elixir-format, fuzzy
+#: lib/core_web/live/user/settings.ex:49
+msgid "push.registration.unavailable"
+msgstr "Notifications are not (yet) available for your browser. Firefox, Chrome or Edge are supported."

core/priv/gettext/en/LC_MESSAGES/eyra-imagecatalog.po

@@ -12,29 +12,29 @@ msgstr ""
 "Plural-Forms: nplurals=2\n"
 
 #, elixir-format
-#: lib/core_web/image_catalog_picker.ex:38
+#: lib/core_web/image_catalog_picker.ex:147
 msgid "no.results.found.message"
 msgstr "No images found"
 
 #, elixir-format
-#: lib/core_web/image_catalog_picker.ex:33
+#: lib/core_web/image_catalog_picker.ex:142
 msgid "search.image.button"
 msgstr "Search"
 
 #, elixir-format
-#: lib/core_web/image_catalog_picker.ex:22
+#: lib/core_web/image_catalog_picker.ex:131
 msgid "search.image.title"
 msgstr "Search and select an image"
 
 #, elixir-format
-#: lib/core_web/image_catalog_picker.ex:42
+#: lib/core_web/image_catalog_picker.ex:151
 msgid "images.found.message"
 msgid_plural "images.found.message.%{count}"
 msgstr[0] "1 image found:"
 msgstr[1] "%{count} images found:"
 
 #, elixir-format
-#: lib/core_web/image_catalog_picker.ex:73
+#: lib/core_web/image_catalog_picker.ex:161
 msgid "page.info.message"
 msgid_plural "page.info.message.%{count}"
 msgstr[0] "1 image"

core/priv/gettext/en/LC_MESSAGES/eyra-link.po

@@ -91,7 +91,7 @@ msgstr "For research"
 msgid "marketplace-button"
 msgstr "Go to marketplace"
 
-#, elixir-format, fuzzy
+#, elixir-format
 #: bundles/link/lib/index.ex:53
 msgid "link.message.interested"
 msgstr "Interested? Sent an email to "

core/priv/gettext/en/LC_MESSAGES/eyra-promotion.po

@@ -22,32 +22,32 @@ msgid "back.button.label"
 msgstr "Back to overview"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:153
+#: lib/core_web/live/promotion/form.ex:148
 msgid "banner.subtitle.label"
 msgstr "Subtitle"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:140
+#: lib/core_web/live/promotion/form.ex:135
 msgid "banner.title"
 msgstr "Banner"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:152
+#: lib/core_web/live/promotion/form.ex:147
 msgid "banner.title.label"
 msgstr "Title"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:154
+#: lib/core_web/live/promotion/form.ex:149
 msgid "banner.url.label"
 msgstr "Website"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:146
+#: lib/core_web/live/promotion/form.ex:141
 msgid "choose.banner.photo.file"
 msgstr "Choose photo"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:147
+#: lib/core_web/live/promotion/form.ex:142
 msgid "choose.other.banner.photo.file"
 msgstr "Choose different photo"
 
@@ -57,7 +57,7 @@ msgid "deadline.label"
 msgstr "Still %{days} days available"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:137
+#: lib/core_web/live/promotion/form.ex:132
 msgid "description.label"
 msgstr "Some background information for the participants"
 
@@ -67,7 +67,7 @@ msgid "description.public.label"
 msgstr "Some background information for the participants"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:136
+#: lib/core_web/live/promotion/form.ex:131
 msgid "description.title"
 msgstr "About the study"
 
@@ -83,7 +83,7 @@ msgid "duration.title"
 msgstr "Expected duration"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:133
+#: lib/core_web/live/promotion/form.ex:128
 msgid "expectations.label"
 msgstr "Expectations for the participants"
 
@@ -93,17 +93,17 @@ msgid "expectations.public.label"
 msgstr "Expectations for the participants"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:132
+#: lib/core_web/live/promotion/form.ex:127
 msgid "expectations.title"
 msgstr "About the task"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:121
+#: lib/core_web/live/promotion/form.ex:116
 msgid "image.label"
 msgstr "The selected image will be visible in the marketplace overview and on promotion page"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:120
+#: lib/core_web/live/promotion/form.ex:115
 msgid "image.title"
 msgstr "Image"
 
@@ -134,31 +134,31 @@ msgid "reward.title"
 msgstr "Credits"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:127
+#: lib/core_web/live/promotion/form.ex:122
 msgid "search.different.image.button"
 msgstr "Select image"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:111
+#: lib/core_web/live/promotion/form.ex:106
 msgid "subtitle.label"
 msgstr "Subtitle"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:115
+#: lib/core_web/live/promotion/form.ex:110
 msgid "themes.label"
 msgstr "Select one or more themes."
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:114
+#: lib/core_web/live/promotion/form.ex:109
 msgid "themes.title"
 msgstr "Themes"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:110
+#: lib/core_web/live/promotion/form.ex:105
 msgid "title.label"
 msgstr "Title"
 
 #, elixir-format
-#: lib/core_web/live/promotion/form.ex:108
+#: lib/core_web/live/promotion/form.ex:103
 msgid "form.title"
 msgstr "Promotion"