PWA setup along with routes for storing subscriptions and sending push notifications

.gitignore

@@ -4,7 +4,7 @@
 /deps
 /*.ez
 
-/priv/static/
+# /priv/static/
 /rel
 
 node_modules/

assets/src/app.js

@@ -7,6 +7,9 @@ import apolloClient from './apolloClient'
 import Root from './components/Root'
 import ReactGA from 'react-ga'
 
+import * as serviceWorker from './serviceWorker'
+import { subscribeUser } from './subscription'
+
 if (ENV.GOOGLE_ANALYTICS_ID) {
   ReactGA.initialize(ENV.GOOGLE_ANALYTICS_ID)
   ReactGA.pageview(window.location.pathname + window.location.search);
@@ -18,3 +21,7 @@ render(
   </ApolloProvider>,
   document.getElementById('root'),
 )
+
+serviceWorker.register()
+
+subscribeUser() 

assets/src/config.js

@@ -0,0 +1,5 @@
+
+export default {
+    VAPID_KEY: "BItTHe7BXVxVxTWcwu-485CJ3ePaCQcoEbF_Qnlap5H9Do-J-hjnpD0VCcymjEt4JX5BkSHJrLfyGcwZ2XplZLs",
+    API_URL: "http://localhost:4000"
+}

assets/src/serviceWorker.js

@@ -0,0 +1,137 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+    window.location.hostname === 'localhost' ||
+      // [::1] is the IPv6 localhost address.
+      window.location.hostname === '[::1]' ||
+      // 127.0.0.1/8 is considered localhost for IPv4.
+      window.location.hostname.match(
+        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+      )
+  );
+
+  export function register(config) {
+    if ('serviceWorker' in navigator) {
+      // The URL constructor is available in all browsers that support SW.
+      const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+      if (publicUrl.origin !== window.location.origin) {
+        // Our service worker won't work if PUBLIC_URL is on a different origin
+        // from what our page is served on. This might happen if a CDN is used to
+        // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+        return;
+      }
+
+      window.addEventListener('load', () => {
+        const swFileName = process.env.NODE_ENV === 'production' ? 'service-worker.js' : 'custom-sw.js'
+        const swUrl = `${publicUrl.origin}/${swFileName}`;
+
+
+        if (isLocalhost) {
+          // This is running on localhost. Let's check if a service worker still exists or not.
+          checkValidServiceWorker(swUrl, config);
+
+          // Add some additional logging to localhost, pointing developers to the
+          // service worker/PWA documentation.
+          navigator.serviceWorker.ready.then(() => {
+            console.log(
+              'This web app is being served cache-first by a service ' +
+                'worker. To learn more, visit https://bit.ly/CRA-PWA'
+            );
+          });
+        } else {
+          // Is not localhost. Just register service worker
+          registerValidSW(swUrl, config);
+        }
+      });
+    }
+  }
+
+  function registerValidSW(swUrl, config) {
+    navigator.serviceWorker
+      .register(swUrl)
+      .then(registration => {
+        registration.onupdatefound = () => {
+          const installingWorker = registration.installing;
+          if (installingWorker == null) {
+            return;
+          }
+          installingWorker.onstatechange = () => {
+            if (installingWorker.state === 'installed') {
+              if (navigator.serviceWorker.controller) {
+                // At this point, the updated precached content has been fetched,
+                // but the previous service worker will still serve the older
+                // content until all client tabs are closed.
+                console.log(
+                  'New content is available and will be used when all ' +
+                    'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+                );
+
+                // Execute callback
+                if (config && config.onUpdate) {
+                  config.onUpdate(registration);
+                }
+              } else {
+                // At this point, everything has been precached.
+                // It's the perfect time to display a
+                // "Content is cached for offline use." message.
+                console.log('Content is cached for offline use.');
+
+                // Execute callback
+                if (config && config.onSuccess) {
+                  config.onSuccess(registration);
+                }
+              }
+            }
+          };
+        };
+      })
+      .catch(error => {
+        console.error('Error during service worker registration:', error);
+      });
+  }
+
+  function checkValidServiceWorker(swUrl, config) {
+    // Check if the service worker can be found. If it can't reload the page.
+    fetch(swUrl)
+      .then(response => {
+        // Ensure service worker exists, and that we really are getting a JS file.
+        const contentType = response.headers.get('content-type');
+        if (
+          response.status === 404 ||
+          (contentType != null && contentType.indexOf('javascript') === -1)
+        ) {
+          // No service worker found. Probably a different app. Reload the page.
+          navigator.serviceWorker.ready.then(registration => {
+            registration.unregister().then(() => {
+              window.location.reload();
+            });
+          });
+        } else {
+          // Service worker found. Proceed as normal.
+          registerValidSW(swUrl, config);
+        }
+      })
+      .catch(() => {
+        console.log(
+          'No internet connection found. App is running in offline mode.'
+        );
+      });
+  }
+
+  export function unregister() {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.ready.then(registration => {
+        registration.unregister();
+      });
+    }
+  }

assets/src/subscription.js

@@ -0,0 +1,64 @@
+import subscription from "./config"
+
+const VapidKey = subscription.VAPID_KEY
+const APIUrl = subscription.API_URL
+const convertedVapidKey = urlBase64ToUint8Array(VapidKey)
+
+function urlBase64ToUint8Array(base64String) {
+  const padding = "=".repeat((4 - base64String.length % 4) % 4)
+
+  const base64 = (base64String + padding).replace(/\-/g, "+").replace(/_/g, "/")
+
+  const rawData = window.atob(base64)
+  const outputArray = new Uint8Array(rawData.length)
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i)
+  }
+  return outputArray
+}
+
+function sendSubscription(subscription) {
+  return fetch(`${APIUrl}/webpush/notifications/subscribe`, {
+    method: 'POST',
+    body: JSON.stringify(subscription),
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+
+export function subscribeUser() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(function(registration) {
+      if (!registration.pushManager) {
+        console.log('Push manager unavailable.')
+        return
+      }
+
+      registration.pushManager.getSubscription().then(function(existedSubscription) {
+        if (existedSubscription === null) {
+          console.log('No subscription detected, make a request.')
+          registration.pushManager.subscribe({
+            applicationServerKey: convertedVapidKey,
+            userVisibleOnly: true,
+          }).then(function(newSubscription) {
+            console.log('New subscription added.')
+            sendSubscription(newSubscription)
+          }).catch(function(e) {
+            if (Notification.permission !== 'granted') {
+              console.log('Permission was not granted.')
+            } else {
+              console.error('An error ocurred during the subscription process.', e)
+            }
+          })
+        } else {
+          console.log('Existed subscription detected.')
+        }
+      })
+    })
+      .catch(function(e) {
+        console.error('An error ocurred during Service Worker registration.', e)
+      })
+  }
+}

config/config.exs

@@ -26,6 +26,12 @@ config :logger, :console,
 
 config :orcasite, env: Mix.env()
 
+config :web_push_encryption, :vapid_details,
+  subject: "mailto:[email protected]",
+  public_key: "BItTHe7BXVxVxTWcwu-485CJ3ePaCQcoEbF_Qnlap5H9Do-J-hjnpD0VCcymjEt4JX5BkSHJrLfyGcwZ2XplZLs",
+  private_key: "v4oOsWwufaMaFelexFj8NjCVAkzMsP2Wni-14wyB_YM"
+
+
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{Mix.env}.exs"

config/dev.exs

@@ -11,8 +11,12 @@ config :orcasite, OrcasiteWeb.Endpoint,
   debug_errors: true,
   code_reloader: true,
   check_origin: false,
+  # watchers: [
+  #   npm: ["run", "watch",
+  #   cd: Path.expand("../assets", __DIR__)
+  # ]]
   watchers: [
-    npm: ["run", "watch",
+    node: ["node_modules/webpack-dev-server/bin/webpack-dev-server.js", "--colors", "--stdin", 
     cd: Path.expand("../assets", __DIR__)
   ]]
 

lib/orcasite_web/controllers/webpush_router.ex

@@ -0,0 +1,50 @@
+defmodule OrcasiteWeb.WebpushRouter do
+  use OrcasiteWeb, :controller
+  alias Orcasite.Repo
+
+  defmodule Subscription do
+    use Ecto.Schema
+
+    schema "subscriptions" do
+      field :p256dh, :string
+      field :auth, :string
+      field :endpoint, :string
+      field :expirationTime, :string
+
+      timestamps
+    end
+  end
+
+  def index(conn, params) do
+    send_resp(conn, 200, "world")
+  end
+
+  def postsubsobject(conn, params) do
+    subs = params
+
+    Repo.insert(%Subscription{ p256dh: subs["keys"]["p256dh"], 
+    auth: subs["keys"]["auth"],
+    endpoint: subs["endpoint"],
+    expirationTime: subs["expirationTime"]})
+
+    send_resp(conn, 200, "Subscribed successfully")
+  end
+
+  def sendnotifications(conn, params) do
+    import Ecto.Query
+
+    payload = ~s({"title": "#{params["title"]}", "body": "#{params["body"]}"})
+
+    Repo.all(from(i in Subscription, select: {i.p256dh, i.auth, i.endpoint, i.expirationTime}))
+    |> Enum.each(fn(x) ->
+        IO.puts(elem(x, 1)) 
+        subscription = %{
+          keys: %{p256dh: elem(x, 0), auth: elem(x, 1)},
+          endpoint: elem(x, 2),
+          expirationTime: elem(x, 3)
+        }
+        WebPushEncryption.send_web_push(payload, subscription)
+       end)
+    send_resp(conn, 200, "Sent successfully")
+  end  
+end

lib/orcasite_web/endpoint.ex

@@ -20,7 +20,7 @@ defmodule OrcasiteWeb.Endpoint do
     at: "/",
     from: :orcasite,
     gzip: false,
-    only: ~w(css fonts images js favicon.ico robots.txt)
+    only: ~w(css fonts images js favicon.ico robots.txt custom-sw.js service-worker.js)
   )
 
   # Code reloading can be explicitly enabled under the

lib/orcasite_web/router.ex

@@ -29,6 +29,13 @@ defmodule OrcasiteWeb.Router do
     forward "/", Absinthe.Plug.GraphiQL, schema: OrcasiteWeb.Schema, interface: :simple, json_codec: Jason
   end
 
+  scope "/webpush", OrcasiteWeb do
+    pipe_through :api
+    get "/hello", WebpushRouter, :index
+    post "/notifications/subscribe", WebpushRouter, :postsubsobject
+    get "/notifications/payload", WebpushRouter, :sendnotifications
+  end
+
   scope "/", OrcasiteWeb do
     pipe_through :browser # Use the default browser stack
     get("/*page", PageController, :index)

mix.exs

@@ -38,7 +38,7 @@ defmodule Orcasite.Mixfile do
       {:phoenix_ecto, "~> 4.0"},
       {:ecto_sql, "~> 3.0"},
       {:postgrex, ">= 0.0.0"},
-      {:phoenix_html, "~> 2.10"},
+      {:phoenix_html, "~> 2.14"},
       {:phoenix_live_reload, "~> 1.0", only: :dev},
       {:gettext, "~> 0.11"},
       {:plug_cowboy, "~> 2.0"},
@@ -48,7 +48,9 @@ defmodule Orcasite.Mixfile do
       {:poison, "~> 3.1.0"}, # JSON parser, works with Absinthe out of the box
       {:logfmt, "~> 3.0"},
       {:geo_postgis, "~> 2.0"},
-      {:jason, "~> 1.1"}
+      {:jason, "~> 1.1"},
+      {:web_push_encryption, "~> 0.2"},
+      {:cors_plug, "~> 2.0"}
     ]
   end