Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
/deps
/*.ez

/priv/static/
# /priv/static/
/rel

node_modules/
Expand Down
9 changes: 6 additions & 3 deletions assets/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions assets/src/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -18,3 +21,7 @@ render(
</ApolloProvider>,
document.getElementById('root'),
)

serviceWorker.register()

subscribeUser()
5 changes: 5 additions & 0 deletions assets/src/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@

export default {
VAPID_KEY: "BItTHe7BXVxVxTWcwu-485CJ3ePaCQcoEbF_Qnlap5H9Do-J-hjnpD0VCcymjEt4JX5BkSHJrLfyGcwZ2XplZLs",
API_URL: "http://localhost:4000"
}
137 changes: 137 additions & 0 deletions assets/src/serviceWorker.js
Original file line number Diff line number Diff line change
@@ -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();
});
}
}
64 changes: 64 additions & 0 deletions assets/src/subscription.js
Original file line number Diff line number Diff line change
@@ -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)
})
}
}
6 changes: 6 additions & 0 deletions config/config.exs
Original file line number Diff line number Diff line change
Expand Up @@ -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"
6 changes: 5 additions & 1 deletion config/dev.exs
Original file line number Diff line number Diff line change
Expand Up @@ -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__)
]]

Expand Down
50 changes: 50 additions & 0 deletions lib/orcasite_web/controllers/webpush_router.ex
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion lib/orcasite_web/endpoint.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 7 additions & 0 deletions lib/orcasite_web/router.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
6 changes: 4 additions & 2 deletions mix.exs
Original file line number Diff line number Diff line change
Expand Up @@ -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"},
Expand All @@ -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

Expand Down
Loading