diff --git a/scripts/hab-build-and-push.sh b/scripts/hab-build-and-push.sh
index f9ffb81ad1ef8e780bdc4efd8499eee9c0eab4c4..1f0b129f00851cfae504fc347b17adfdde7ffb3f 100755
--- a/scripts/hab-build-and-push.sh
+++ b/scripts/hab-build-and-push.sh
@@ -31,6 +31,7 @@ npm rebuild node-sass # HACK sometimes node-sass build fails
npm run build
mkdir dist/pages
mv dist/*.html dist/pages
+mv dist/hub.service.js dist/pages
aws s3 sync --acl public-read --cache-control "max-age=31556926" dist/assets "$TARGET_S3_URL/assets"
aws s3 sync --acl public-read --cache-control "no-cache" --delete dist/pages "$TARGET_S3_URL/pages/latest"
diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss
index f0424741082257a992e0adfd24de80703d1899c7..d94b199b07ffcaf6b6af11904fb8a779804ea13a 100644
--- a/src/assets/stylesheets/entry.scss
+++ b/src/assets/stylesheets/entry.scss
@@ -184,4 +184,24 @@
cursor: pointer;
color: $dark-grey-text;
}
+
+ :local(.subscribe) {
+ margin-bottom: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: $darker-grey;
+
+ input {
+ @extend %checkbox;
+ }
+
+ input:checked {
+ @extend %checkbox-checked;
+ }
+
+ label {
+ margin-right: 8px;
+ }
+ }
}
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index 6a0ef8e55878ae40406566750d081eaea7058408..d44b6b31916977101aea39ee8824cee35e388559 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -155,16 +155,15 @@ $spoke-action-color: $bright-blue;
-webkit-appearance: none;
width: 2em;
height: 2em;
- border: 1px solid #e2e2e2;
- border-radius: 9px;
+ border: 3px solid #aaa;
+ border-radius: 6px;
vertical-align: sub;
margin: 0 0.6em
}
%checkbox-checked {
- border: 9px double #aaa;
- outline: 9px solid #aaa;
- outline-offset: -18px;
+ outline: 9px solid $action-color;
+ outline-offset: -15px;
}
%background-agnostic {
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index f1114c4069a4da2ae2c62ade41afbf55a48a0e93..819a5a04649cf73d1cc12f9d8b64f6cd1b5ababd 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -32,6 +32,7 @@
"entry.enable-screen-sharing": "Share my desktop",
"entry.return-to-vr": "Enter in VR",
"entry.lobby": "Lobby",
+ "entry.notify_me": "Notify me when others are here",
"profile.save": "Accept",
"profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32",
"profile.header": "Name & Avatar",
diff --git a/src/hub.js b/src/hub.js
index a054c1bf211022fe470dc2f8944928a89f0e5e4e..a6cb4084259c25a9d5f50cbab54e60956cde7526 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -70,6 +70,7 @@ import { connectToReticulum } from "./utils/phoenix-utils";
import { disableiOSZoom } from "./utils/disable-ios-zoom";
import { proxiedUrlFor } from "./utils/media-utils";
import SceneEntryManager from "./scene-entry-manager";
+import Subscriptions from "./subscriptions";
import "./systems/nav";
import "./systems/personal-space-bubble";
@@ -132,7 +133,6 @@ if (!isBotMode && !isTelemetryDisabled) {
disableiOSZoom();
const concurrentLoadDetector = new ConcurrentLoadDetector();
-
concurrentLoadDetector.start();
store.init();
@@ -286,6 +286,18 @@ async function runBotMode(scene, entryManager) {
}
document.addEventListener("DOMContentLoaded", async () => {
+ const hubId = qs.get("hub_id") || document.location.pathname.substring(1).split("/")[0];
+ console.log(`Hub ID: ${hubId}`);
+
+ const subscriptions = new Subscriptions(hubId);
+
+ if (navigator.serviceWorker) {
+ navigator.serviceWorker.register("/hub.service.js");
+ navigator.serviceWorker.ready
+ .then(registration => subscriptions.setRegistration(registration))
+ .catch(() => subscriptions.setRegistrationFailed());
+ }
+
const scene = document.querySelector("a-scene");
const hubChannel = new HubChannel(store);
const entryManager = new SceneEntryManager(hubChannel);
@@ -296,7 +308,14 @@ document.addEventListener("DOMContentLoaded", async () => {
window.APP.scene = scene;
registerNetworkSchemas();
- remountUI({ hubChannel, linkChannel, enterScene: entryManager.enterScene, exitScene: entryManager.exitScene });
+ remountUI({
+ hubChannel,
+ linkChannel,
+ subscriptions,
+ enterScene: entryManager.enterScene,
+ exitScene: entryManager.exitScene,
+ initialIsSubscribed: subscriptions.isSubscribed()
+ });
pollForSupportAvailability(isSupportAvailable => remountUI({ isSupportAvailable }));
@@ -344,10 +363,6 @@ document.addEventListener("DOMContentLoaded", async () => {
}
});
- // Connect to reticulum over phoenix channels to get hub info.
- const hubId = qs.get("hub_id") || document.location.pathname.substring(1).split("/")[0];
- console.log(`Hub ID: ${hubId}`);
-
const socket = connectToReticulum(isDebug);
remountUI({ sessionId: socket.params().session_id });
@@ -357,13 +372,17 @@ document.addEventListener("DOMContentLoaded", async () => {
hmd: availableVREntryTypes.isInHMD
};
- const joinPayload = { profile: store.state.profile, context };
+ const pushSubscriptionEndpoint = await subscriptions.getCurrentEndpoint();
+ const joinPayload = { profile: store.state.profile, push_subscription_endpoint: pushSubscriptionEndpoint, context };
const hubPhxChannel = socket.channel(`hub:${hubId}`, joinPayload);
hubPhxChannel
.join()
.receive("ok", async data => {
hubChannel.setPhoenixChannel(hubPhxChannel);
+ subscriptions.setHubChannel(hubChannel);
+ subscriptions.setSubscribed(data.subscriptions.web_push);
+ remountUI({ initialIsSubscribed: subscriptions.isSubscribed() });
await handleHubChannelJoined(entryManager, hubChannel, data);
})
.receive("error", res => {
@@ -470,6 +489,10 @@ document.addEventListener("DOMContentLoaded", async () => {
// Reticulum global channel
const retPhxChannel = socket.channel(`ret`, { hub_id: hubId });
- retPhxChannel.join().receive("error", res => console.error(res));
+ retPhxChannel
+ .join()
+ .receive("ok", async data => subscriptions.setVapidPublicKey(data.vapid_public_key))
+ .receive("error", res => console.error(res));
+
linkChannel.setSocket(socket);
});
diff --git a/src/hub.service.js b/src/hub.service.js
new file mode 100644
index 0000000000000000000000000000000000000000..73a51a649b07c95425d98c389b0b848a56070968
--- /dev/null
+++ b/src/hub.service.js
@@ -0,0 +1,46 @@
+self.addEventListener("install", function(e) {
+ return e.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener("activate", function(e) {
+ return e.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("push", function(e) {
+ const payload = JSON.parse(e.data.text());
+
+ return e.waitUntil(
+ self.clients.matchAll({ type: "window" }).then(function(clientList) {
+ for (let i = 0; i < clientList.length; i++) {
+ const client = clientList[i];
+ if (client.url.indexOf(e.notification.data.hub_id) >= 0) return;
+ }
+
+ return self.registration.showNotification("Hubs by Mozilla", {
+ body: "Someone has joined " + payload.hub_name,
+ image: payload.image,
+ icon: "/favicon.ico",
+ badge: "/favicon.ico",
+ tag: payload.hub_id,
+ data: { hub_url: payload.hub_url }
+ });
+ })
+ );
+});
+
+self.addEventListener("notificationclick", function(e) {
+ e.notification.close();
+
+ e.waitUntil(
+ self.clients.matchAll({ type: "window" }).then(function(clientList) {
+ for (let i = 0; i < clientList.length; i++) {
+ const client = clientList[i];
+ if (client.url.indexOf(e.notification.data.hub_url) >= 0 && "focus" in client) return client.focus();
+ }
+
+ if (self.clients.openWindow) {
+ return self.clients.openWindow(e.notification.data.hub_url);
+ }
+ })
+ );
+});
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index a24030d15c325e1aea4fe71673777da617bfe5b9..fe99b50763f2aa4d7cc9394b8a8ecd19565754bf 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -89,7 +89,9 @@ class UIRoot extends Component {
isSupportAvailable: PropTypes.bool,
presenceLogEntries: PropTypes.array,
presences: PropTypes.object,
- sessionId: PropTypes.string
+ sessionId: PropTypes.string,
+ subscriptions: PropTypes.object,
+ initialIsSubscribed: PropTypes.bool
};
state = {
@@ -147,6 +149,11 @@ class UIRoot extends Component {
this.props.scene.removeEventListener("exit", this.exit);
}
+ updateSubscribedState = () => {
+ const isSubscribed = this.props.subscriptions && this.props.subscriptions.isSubscribed();
+ this.setState({ isSubscribed });
+ };
+
onSceneLoaded = () => {
this.setState({ sceneLoaded: true });
};
@@ -175,6 +182,13 @@ class UIRoot extends Component {
this.props.scene.emit("penButtonPressed");
};
+ onSubscribeChanged = async () => {
+ if (!this.props.subscriptions) return;
+
+ await this.props.subscriptions.toggle();
+ this.updateSubscribedState();
+ };
+
handleStartEntry = () => {
const promptForNameAndAvatarBeforeEntry = !this.props.store.state.activity.hasChangedName;
@@ -673,6 +687,8 @@ class UIRoot extends Component {
};
renderEntryStartPanel = () => {
+ const hasPush = navigator.serviceWorker && "PushManager" in window;
+
return (
<div className={entryStyles.entryPanel}>
<div className={entryStyles.name}>{this.props.hubName}</div>
@@ -697,6 +713,20 @@ class UIRoot extends Component {
</form>
</div>
+ {hasPush && (
+ <div className={entryStyles.subscribe}>
+ <input
+ id="subscribe"
+ type="checkbox"
+ onChange={this.onSubscribeChanged}
+ checked={this.state.isSubscribed === undefined ? this.props.initialIsSubscribed : this.state.isSubscribed}
+ />
+ <label htmlFor="subscribe">
+ <FormattedMessage id="entry.notify_me" />
+ </label>
+ </div>
+ )}
+
<div className={entryStyles.buttonContainer}>
<button
className={classNames([entryStyles.actionButton, entryStyles.wideButton])}
diff --git a/src/subscriptions.js b/src/subscriptions.js
new file mode 100644
index 0000000000000000000000000000000000000000..11e760c2f8d7f8acec40f909069cbd043bdcf4b4
--- /dev/null
+++ b/src/subscriptions.js
@@ -0,0 +1,89 @@
+import nextTick from "./utils/next-tick.js";
+
+// Manages web push subscriptions
+//
+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;
+}
+
+export default class Subscriptions {
+ constructor(hubId) {
+ this.hubId = hubId;
+ }
+
+ setHubChannel = hubChannel => {
+ this.hubChannel = hubChannel;
+ };
+
+ setRegistration = registration => {
+ this.registration = registration;
+ };
+
+ setRegistrationFailed = () => {
+ this.registration = null;
+ };
+
+ setVapidPublicKey = vapidPublicKey => {
+ this.vapidPublicKey = vapidPublicKey;
+ };
+
+ setSubscribed = isSubscribed => {
+ this._isSubscribed = isSubscribed;
+ };
+
+ isSubscribed = () => {
+ return this._isSubscribed;
+ };
+
+ getCurrentEndpoint = async () => {
+ if (!navigator.serviceWorker) return null;
+
+ // registration becomes null if failed, non null if registered
+ while (this.registration === undefined) await nextTick();
+ if (!this.registration || !this.registration.pushManager) return null;
+ try {
+ if ((await this.registration.pushManager.permissionState()) !== "granted") return null;
+ } catch (e) {
+ return null; // Chrome can throw here complaining about userVisible if push is not right
+ }
+ const sub = await this.registration.pushManager.getSubscription();
+ if (!sub) return null;
+
+ return sub.endpoint;
+ };
+
+ toggle = async () => {
+ if (this._isSubscribed) {
+ const pushSubscription = await this.registration.pushManager.getSubscription();
+ const res = await this.hubChannel.unsubscribe(pushSubscription);
+
+ if (res && res.has_remaining_subscriptions === false) {
+ pushSubscription.unsubscribe();
+ }
+ } else {
+ let pushSubscription = await this.registration.pushManager.getSubscription();
+
+ if (!pushSubscription) {
+ const convertedVapidKey = urlBase64ToUint8Array(this.vapidPublicKey);
+
+ pushSubscription = await this.registration.pushManager.subscribe({
+ userVisibleOnly: true,
+ applicationServerKey: convertedVapidKey
+ });
+ }
+
+ this.hubChannel.subscribe(pushSubscription);
+ }
+
+ this._isSubscribed = !this._isSubscribed;
+ };
+}
diff --git a/src/utils/hub-channel.js b/src/utils/hub-channel.js
index 734cafa5fcc11c8ef84d708da4e16c32b54396aa..81714efc2fe069ce43cc8d0721c4550a2f42667d 100644
--- a/src/utils/hub-channel.js
+++ b/src/utils/hub-channel.js
@@ -91,6 +91,14 @@ export default class HubChannel {
this.channel.push("events:profile_updated", { profile: this.store.state.profile });
};
+ subscribe = subscription => {
+ this.channel.push("subscribe", { subscription });
+ };
+
+ unsubscribe = subscription => {
+ return new Promise(resolve => this.channel.push("unsubscribe", { subscription }).receive("ok", resolve));
+ };
+
sendMessage = (body, type = "chat") => {
if (!body) return;
this.channel.push("message", { body, type });
diff --git a/webpack.config.js b/webpack.config.js
index e6567532eb15a79f243b7e8a5df1b9064e5eeefd..55afb6708d844a885ade6473327360ca6198c243 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -240,6 +240,12 @@ module.exports = (env, argv) => ({
to: "hub-preview.png"
}
]),
+ new CopyWebpackPlugin([
+ {
+ from: "src/hub.service.js",
+ to: "hub.service.js"
+ }
+ ]),
// Extract required css and add a content hash.
new ExtractTextPlugin({
filename: "assets/stylesheets/[name]-[md5:contenthash:hex:20].css",