Design flow for enabling push and the various status that go with it
This commit is contained in:
Jason Zimdars
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 22 22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><path d="m20.3 4.7h-2.8c-.1 0-.3-.1-.3-.3v-2.7c0-.4-.4-.8-.8-.8s-.8.4-.8.8v2.8c0 .1-.1.3-.3.3h-2.8c-.4 0-.8.4-.8.8s.4.8.8.8h2.8c.1 0 .3.1.3.3v2.8c0 .4.4.8.8.8s.8-.4.8-.8v-3c0-.1.1-.3.3-.3h2.8c.4 0 .8-.4.8-.8 0-.3-.3-.7-.8-.7z"/><path d="m8.2 1.6c.4 0 .8.3.8.8v5.8c0 .4-.3.8-.8.8h-5.9c-.4 0-.8-.3-.8-.8v-5.9c0-.4.3-.8.8-.8h5.9m0-1.5h-5.9c-1.2 0-2.3 1.1-2.3 2.3v5.8c0 1.3 1.1 2.3 2.3 2.3h5.8c1.3 0 2.3-1.1 2.3-2.3v-5.8c.1-1.2-1-2.3-2.2-2.3z"/><path d="m8.2 13.1c.4 0 .8.3.8.8v5.8c0 .4-.3.8-.8.8h-5.9c-.4 0-.8-.3-.8-.8v-5.8c0-.4.3-.8.8-.8zm0-1.6h-5.9c-1.3 0-2.3 1.1-2.3 2.3v5.8c0 1.3 1.1 2.4 2.3 2.4h5.8c1.3 0 2.3-1.1 2.3-2.3v-5.8c.1-1.3-1-2.4-2.2-2.4z"/><path d="m19.7 13.1c.4 0 .8.3.8.8v5.8c0 .4-.3.8-.8.8h-5.8c-.4 0-.8-.3-.8-.8v-5.8c0-.4.3-.8.8-.8zm0-1.6h-5.8c-1.3 0-2.3 1.1-2.3 2.3v5.8c0 1.3 1.1 2.3 2.3 2.3h5.8c1.3 0 2.3-1.1 2.3-2.3v-5.8c0-1.2-1.1-2.3-2.3-2.3z"/></svg>
|
||||
|
After Width: | Height: | Size: 965 B |
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m20.3 16.9c0 .1-.1.2-.2.2h-16.1c-.1 0-.2-.1-.2-.2v-9.8c-.1-.1 0-.2.2-.2h5.8c0-.1 0-.2 0-.3 0-.6.1-1.1.2-1.7h-6.3c-1.1 0-2 .9-2 2v11.7c0 1.1.9 2 2 2h7.1c.1 0 .2.1.2.2v1c0 .1-.1.2-.2.2h-4.9c-.5 0-1 .4-1 1 0 .5.4 1 1 1h12.2c.5 0 1-.4 1-1 0-.5-.4-1-1-1h-4.9c-.1 0-.2-.1-.2-.2v-1c0-.1.1-.2.2-.2h7.1c1.1 0 2-.9 2-2v-5.8c-.6.5-1.2.8-2 1.1z"/><path d="m17.5.1c-3 0-5.6 2.1-6.3 4.9-.1.4-.2 1-.2 1.6v.3c.2 3.4 3 6.2 6.5 6.2 1 0 2-.2 2.8-.6.7-.4 1.4-.8 2-1.4 1-1.3 1.7-2.8 1.7-4.5 0-3.6-2.9-6.5-6.5-6.5zm2.4 7.3-2 2.5c-.2.2-.5.3-.7.1 0 0-.1 0-.1-.1l-2-2.5c-.2-.2-.1-.5.1-.7.1-.1.2-.1.3-.1h.8c.1 0 .2-.1.2-.2v-2.8c0-.6.4-1 1-1s1 .4 1 1v2.8c0 .1.1.2.2.2h.8c.3 0 .5.2.5.5 0 .1 0 .2-.1.3z"/></svg>
|
||||
|
After Width: | Height: | Size: 785 B |
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19.79 15.41c.95-2.17.95-4.66 0-6.82l-2.74 1.24c.6 1.38.6 2.95.01 4.34zm-4.37-11.2c-2.17-.95-4.66-.95-6.83 0l1.24 2.73c1.39-.59 2.96-.59 4.35.01zm-11.21 4.37c-.95 2.18-.95 4.66 0 6.84l2.74-1.25c-.6-1.38-.6-2.96 0-4.35zm4.38 11.21c2.17.95 4.66.95 6.83-.01l-1.24-2.73c-1.38.6-2.96.6-4.34.01zm3.41-17.79a10 10 0 0 1 10 10 10 10 0 0 1 -10 10 10 10 0 0 1 -10-10 10 10 0 0 1 10-10m0 6a4 4 0 0 0 -4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0 -4-4z"/></svg>
|
||||
|
After Width: | Height: | Size: 515 B |
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8 13c-1.86 0-3.41 1.28-3.86 3h-2.14v2h2.14c.45 1.72 2 3 3.86 3s3.41-1.28 3.86-3h10.14v-2h-10.14c-.45-1.72-2-3-3.86-3m0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2m11.86-13c-.45-1.72-2-3-3.86-3s-3.41 1.28-3.86 3h-10.14v2h10.14c.45 1.72 2 3 3.86 3s3.41-1.28 3.86-3h2.14v-2zm-3.86 3c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
|
||||
|
After Width: | Height: | Size: 403 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zM7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" /></svg>
|
||||
|
After Width: | Height: | Size: 278 B |
@@ -41,10 +41,15 @@
|
||||
.icon--crown { --svg: url("crown.svg "); }
|
||||
.icon--email { --svg: url("email.svg "); }
|
||||
.icon--everyone { --svg: url("everyone.svg "); }
|
||||
.icon--gear { --svg: url("gear.svg "); }
|
||||
.icon--filter { --svg: url("filter.svg "); }
|
||||
.icon--globe { --svg: url("globe.svg "); }
|
||||
.icon--golden-ticket { --svg: url("golden-ticket.svg "); }
|
||||
.icon--home { --svg: url("home.svg "); }
|
||||
.icon--install { --svg: url("install.svg "); }
|
||||
.icon--install { --svg: url("install.svg "); }
|
||||
.icon--install-edge { --svg: url("install-edge.svg "); }
|
||||
.icon--lifebuoy { --svg: url("lifebuoy.svg "); }
|
||||
.icon--lock { --svg: url("lock.svg "); }
|
||||
.icon--logout { --svg: url("logout.svg "); }
|
||||
.icon--menu { --svg: url("menu.svg "); }
|
||||
@@ -72,6 +77,8 @@
|
||||
.icon--search { --svg: url("search.svg "); }
|
||||
.icon--settings { --svg: url("settings.svg "); }
|
||||
.icon--share { --svg: url("share.svg "); }
|
||||
.icon--sliders { --svg: url("sliders.svg "); }
|
||||
.icon--switch { --svg: url("switch.svg "); }
|
||||
.icon--tag { --svg: url("tag.svg "); }
|
||||
.icon--thumb-up { --svg: url("thumb-up.svg "); }
|
||||
.icon--trash { --svg: url("trash.svg "); }
|
||||
|
||||
@@ -44,5 +44,53 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Help
|
||||
/* ------------------------------------------------------------------------ */
|
||||
.notifications-help {
|
||||
h2 {
|
||||
font-size: var(--text-medium);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
--icon-size: 1.2em;
|
||||
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-block: var(--block-space-half) var(--block-space);
|
||||
|
||||
&:last-of-type {
|
||||
margin-block-end: var(--block-space-half);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notifications-help__explainer {
|
||||
padding: var(--block-space);
|
||||
}
|
||||
|
||||
.notifications__on-message {
|
||||
display: none;
|
||||
|
||||
.notifications--on & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.notifications__off-message {
|
||||
display: block;
|
||||
|
||||
.notifications--on & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.notifications__status {
|
||||
--panel-padding: var(--block-space);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
/* PWA install */
|
||||
.pwa__instructions {
|
||||
@media (display-mode: standalone) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pwa__installer {
|
||||
display: none;
|
||||
|
||||
.pwa--can-install & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -219,6 +219,18 @@
|
||||
[hidden] { display: none !important; }
|
||||
[contents] { display: contents; }
|
||||
|
||||
.hide-in-pwa {
|
||||
@media (display-mode: standalone) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-in-browser {
|
||||
@media (display-mode: browser) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-focus-ring {
|
||||
--focus-ring-size: 0;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,24 @@
|
||||
import { Controller } from "@hotwired/stimulus"
|
||||
import { post } from "@rails/request.js"
|
||||
import { pageIsTurboPreview } from "helpers/turbo_helpers"
|
||||
import { onNextEventLoopTick } from "helpers/timing_helpers"
|
||||
export default class extends Controller {
|
||||
static classes = [ "enabled" ]
|
||||
static targets = [ "subscribeButton", "explainer" ]
|
||||
static values = { subscriptionsUrl: String }
|
||||
|
||||
async connect() {
|
||||
const state = await this.getCurrentState()
|
||||
|
||||
this.updateUI(state)
|
||||
async connect() {
|
||||
if (this.#allowed && Notification.permission == "default") {
|
||||
this.subscribeButtonTarget.hidden = false
|
||||
this.explainerTarget.hidden = true
|
||||
}
|
||||
|
||||
if (this.#allowed && Notification.permission == "granted") {
|
||||
const registration = await this.#getServiceWorkerRegistration()
|
||||
const subscription = await registration?.pushManager?.getSubscription()
|
||||
|
||||
if (registration && subscription) {
|
||||
this.element.classList.add(this.enabledClass)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async attemptToSubscribe() {
|
||||
@@ -20,8 +30,6 @@ export default class extends Controller {
|
||||
case "granted": { this.#subscribe(registration); break }
|
||||
case "default": { this.#requestPermissionAndSubscribe(registration) }
|
||||
}
|
||||
} else {
|
||||
console.log("Should display not-allowed notice")
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,9 +39,6 @@ export default class extends Controller {
|
||||
const existingSubscription = await registration?.pushManager?.getSubscription()
|
||||
|
||||
return Notification.permission == "granted" && registration && existingSubscription
|
||||
} else {
|
||||
console.log("Not alllowed")
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -59,7 +64,12 @@ export default class extends Controller {
|
||||
|
||||
async #syncPushSubscription(subscription) {
|
||||
const response = await post(this.subscriptionsUrlValue, { body: this.#extractJsonPayloadAsString(subscription), responseKind: "turbo-stream" })
|
||||
if (!response.ok) subscription.unsubscribe()
|
||||
if (response.ok) {
|
||||
this.element.classList.add(this.enabledClass)
|
||||
this.subscribeButtonTarget.hidden = true
|
||||
} else {
|
||||
subscription.unsubscribe()
|
||||
}
|
||||
}
|
||||
|
||||
async #requestPermissionAndSubscribe(registration) {
|
||||
@@ -91,35 +101,4 @@ export default class extends Controller {
|
||||
|
||||
return outputArray
|
||||
}
|
||||
|
||||
updateUI(state) {
|
||||
console.log(state)
|
||||
}
|
||||
|
||||
async getCurrentState() {
|
||||
if (!this.#allowed) {
|
||||
return { status: 'not-supported' }
|
||||
}
|
||||
|
||||
const registration = await this.#getServiceWorkerRegistration()
|
||||
const subscription = await registration?.pushManager?.getSubscription()
|
||||
|
||||
return {
|
||||
permission: Notification.permission,
|
||||
hasRegistration: !!registration,
|
||||
hasSubscription: !!subscription,
|
||||
status: this.#determineStatus(Notification.permission, registration, subscription)
|
||||
}
|
||||
}
|
||||
|
||||
#determineStatus(permission, registration, subscription) {
|
||||
if (permission === "denied") return "permission-denied"
|
||||
if (permission === "default") return "permission-not-requested"
|
||||
if (permission === "granted") {
|
||||
if (!registration) return "service-worker-missing"
|
||||
if (!subscription) return "subscription-missing"
|
||||
return "enabled"
|
||||
}
|
||||
return "unknown"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,6 +15,14 @@ class ApplicationPlatform < PlatformAgent
|
||||
user_agent.browser.match? /Chrome/
|
||||
end
|
||||
|
||||
def edge?
|
||||
user_agent.browser.match? /Edg/
|
||||
end
|
||||
|
||||
def firefox?
|
||||
user_agent.browser.match? /Firefox|FxiOS/
|
||||
end
|
||||
|
||||
def safari?
|
||||
user_agent.browser.match? /Safari/
|
||||
end
|
||||
@@ -26,4 +34,21 @@ class ApplicationPlatform < PlatformAgent
|
||||
def desktop?
|
||||
!mobile?
|
||||
end
|
||||
|
||||
def windows?
|
||||
operating_system == "Windows"
|
||||
end
|
||||
|
||||
def operating_system
|
||||
case user_agent.platform
|
||||
when /Android/ then "Android"
|
||||
when /iPad/ then "iPad"
|
||||
when /iPhone/ then "iPhone"
|
||||
when /Macintosh/ then "macOS"
|
||||
when /Windows/ then "Windows"
|
||||
when /CrOS/ then "ChromeOS"
|
||||
else
|
||||
os =~ /Linux/ ? "Linux" : os
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
<% unless (platform.safari? || platform.chrome?) && platform.ios? %>
|
||||
<div class="notifications-help" data-notifications-target="details">
|
||||
<% case
|
||||
when platform.firefox? && platform.android? %>
|
||||
<h2>Turn on notifications for <%= platform.browser.capitalize %>.</h2>
|
||||
<ol>
|
||||
<li>Tap <em><%= icon_tag "lock", alt: "the View site information button" %></em> in the address bar.</li>
|
||||
<li>Tap <em>Notification</em> to change to <em>Allowed</em>.</li>
|
||||
</ol>
|
||||
<% when platform.edge? && platform.desktop? %>
|
||||
<h2>Turn on notifications for this website.</h2>
|
||||
<ol>
|
||||
<li>Click <em><%= icon_tag "lock", alt: "the View site information button" %></em> left of the address bar.</li>
|
||||
<li>Under <em>Permissions for this site > Notifications</em>, choose <em>Allow</em>.</li>
|
||||
</ol>
|
||||
<h2>Turn on notifications for <%= platform.browser.capitalize %>.</h2>
|
||||
<ol>
|
||||
<% if platform.windows? %>
|
||||
<li>Click <em>Start</em>, then <em>Settings</em>.</li>
|
||||
<li>Go to <em>System > Notification</em>.</li>
|
||||
<li>Click <em><%= icon_tag "switch", alt: "the switch" %></em> <em>ON</em> for <%= platform.browser.capitalize %>.</li>
|
||||
<% else %>
|
||||
<li>Click <em aria-label="the Apple menu"></em> in the top left.</li>
|
||||
<li>Click <em>System Settings…</em>.</li>
|
||||
<li>Click <em>Notifications</em>.</li>
|
||||
<li>Click <em><%= platform.browser.capitalize %></em>.</li>
|
||||
<li>Click <em><%= icon_tag "switch", alt: "the switch" %></em> to <em>Allow notifications</em>.</li>
|
||||
<% end %>
|
||||
</ol>
|
||||
<% when platform.firefox? && platform.desktop? %>
|
||||
<h2>Turn on notifications for this website.</h2>
|
||||
<ol>
|
||||
<li>Click <em><%= platform.browser.capitalize %></em> in the top left.</li>
|
||||
<li>Click <em>Settings…</em>.</li>
|
||||
<li>Click <em>Privacy & Security</em> in the sidebar.</li>
|
||||
<li>Scroll down to <em>Permissions</em>.</li>
|
||||
<li>Click <em>Settings</em> next to <em>Notifications</em>.</li>
|
||||
<li>Select <em>Allow</em> next to <em><%= root_url %></em>.</li>
|
||||
</ol>
|
||||
|
||||
<h2>Turn on notifications for <%= platform.browser.capitalize %>.</h2>
|
||||
<ol>
|
||||
<% if platform.windows? %>
|
||||
<li>Click <em>Start</em>, then <em>Settings</em>.</li>
|
||||
<li>Go to <em>System > Notification</em>.</li>
|
||||
<li>Click <em><%= icon_tag "switch", alt: "the toggle button" %></em> <em>ON</em> for <%= platform.browser.capitalize %>.</li>
|
||||
<% else %>
|
||||
<li>Click <em aria-label="the Apple menu"></em> in the top left.</li>
|
||||
<li>Click <em>System Settings…</em>.</li>
|
||||
<li>Click <em>Notifications</em>.</li>
|
||||
<li>Click <em><%= platform.browser.capitalize %></em>.</li>
|
||||
<li>Click <em><%= icon_tag "switch", alt: "the switch" %></em> to <em>Allow notifications</em>.</li>
|
||||
<% end %>
|
||||
</ol>
|
||||
<% when platform.chrome? && platform.desktop? %>
|
||||
<h2>Turn on notifications for this website.</h2>
|
||||
<ol>
|
||||
<li>Click the <em><%= icon_tag "sliders", alt: "View site information" %></em> icon in the address bar.</li>
|
||||
<li>Click <em>Site Settings</em>.</li>
|
||||
<li>Ensure notifications are <em>Allowed</em>.</li>
|
||||
</ol>
|
||||
|
||||
<h2>Turn on notifications for <%= platform.browser.capitalize %>.</h2>
|
||||
<ol>
|
||||
<% if platform.windows? %>
|
||||
<li>Click <em>Start</em>, then <em>Settings</em>.</li>
|
||||
<li>Go to <em>System > Notification</em>.</li>
|
||||
<li>Click <em><%= icon_tag "switch", alt: "the switch" %></em> <em>ON</em> for <%= platform.browser.capitalize %>.</li>
|
||||
<% else %>
|
||||
<li>Click <em aria-label="the Apple menu"></em> in the top left.</li>
|
||||
<li>Click <em>System Settings…</em>.</li>
|
||||
<li>Click <em>Notifications</em>.</li>
|
||||
<li>Click <em><%= platform.browser.capitalize %></em>.</li>
|
||||
<li>Click <em><%= icon_tag "switch", alt: "the switch" %></em> to <em>Allow notifications</em>.</li>
|
||||
<% end %>
|
||||
</ol>
|
||||
<% when platform.chrome? && platform.android? %>
|
||||
<h2>Turn on notifications for <%= platform.browser.capitalize %>.</h2>
|
||||
<ol>
|
||||
<li>Tap the <em><%= icon_tag "menu-dots-vertical", alt: "More options" %></em> menu button.</li>
|
||||
<li>Tap <em>Settings</em>.</li>
|
||||
<li>Tap <em>Notifications</em>.</li>
|
||||
<li>Tap <em><%= icon_tag "switch", alt: "the switch" %></em> to <em>Allow <%= platform.browser.capitalize %> notifications</em>.</li>
|
||||
<li>Tap <em><%= icon_tag "switch", alt: "the switch" %></em> next to <em>Web apps</em>.</li>
|
||||
<li>Tap <em><%= icon_tag "notification-bell-alert", alt: "the notification bell" %></em> and select <em>Allow</em>.</li>
|
||||
</ol>
|
||||
<% when platform.safari? && platform.desktop? %>
|
||||
<h2>Turn on notifications for this website.</h2>
|
||||
<ol>
|
||||
<li>Click <em aria-label="the Apple menu"></em> in the top left.</li>
|
||||
<li>Click <em>System Settings…</em>.</li>
|
||||
<li>Click <em>Notifications</em>.</li>
|
||||
<li>Click <em><%= request.base_url %></em> in the list.</li>
|
||||
<li>Click <em><%= icon_tag "switch", alt: "the switch" %></em> to <em>Allow notifications</em>.</li>
|
||||
</ol>
|
||||
<h2>Turn on notifications for <%= platform.browser.capitalize %>.</h2>
|
||||
<ol>
|
||||
<li>Click <em><%= platform.browser.capitalize %></em> in the top left.</li>
|
||||
<li>Click <em>Settings…</em>.</li>
|
||||
<li>Click the <em>Websites</em> tab.</li>
|
||||
<li>Click <em>Notifications</em> in the sidebar.</li>
|
||||
<li>Click <em><%= request.base_url %></em> in the list.</li>
|
||||
<li>Select <em>Allow</em>.</li>
|
||||
</ol>
|
||||
<% else %>
|
||||
<p>Ensure notifications are enabled for <em><%= root_url %></em> in your web browser settings.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -0,0 +1,35 @@
|
||||
<% unless (platform.chrome? && !platform.ios?) || (platform.firefox? && !platform.android?) %>
|
||||
<div class="notifications-help pwa__instructions hide-in-pwa">
|
||||
<h2><%= platform.safari? && platform.desktop? ? "…or install" : "Install " -%> Fizzy as a web app.</h2>
|
||||
<% case
|
||||
when platform.edge? %>
|
||||
<ol>
|
||||
<li>Click <em><%= icon_tag "install-edge", alt: "the app available - install Fizzy button" %></em>in the address bar.</li>
|
||||
<li>Click <em>Install</em>.</li>
|
||||
</ol>
|
||||
<% when platform.chrome? && platform.android? %>
|
||||
<ol>
|
||||
<li>Tap the <em><%= icon_tag "menu-dots-vertical", alt: "More options" %></em> menu button.</li>
|
||||
<li>Tap <em>Install app</em> in the menu.</li>
|
||||
</ol>
|
||||
<% when platform.firefox? && platform.android? %>
|
||||
<ol>
|
||||
<li>Tap the <em><%= icon_tag "menu-dots-vertical", alt: "More options" %></em> menu button.</li>
|
||||
<li>Tap <em>Install</em> in the menu.</li>
|
||||
</ol>
|
||||
<% when platform.safari? && platform.desktop? %>
|
||||
<ol>
|
||||
<li>Click <em>File</em> in the top left.</li>
|
||||
<li>Click <em>Add to Dock…</em>.</li>
|
||||
</ol>
|
||||
<% when (platform.safari? || platform.chrome?) && platform.ios? %>
|
||||
<p>To receive push notifications in <%= platform.browser.capitalize %> for <%= platform.operating_system %>, you must first install Fizzy as a web app.</p>
|
||||
<ol>
|
||||
<li>Tap <em><%= icon_tag "share", alt: "the share button" %></em></li>
|
||||
<li>Tap <em>Add to Home Screen</em>.</li>
|
||||
</ol>
|
||||
<% else %>
|
||||
<p>Some platforms require you to install Fizzy as a web app to receive push notifications.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -0,0 +1,57 @@
|
||||
<div class="notifications-help hide-in-browser" data-notifications-target="details">
|
||||
<h2>Check your <%= platform.operating_system %> settings</h2>
|
||||
<% case
|
||||
when platform.firefox? && platform.android? %>
|
||||
<ol>
|
||||
<li>Tap the <em><%= icon_tag "menu-dots-vertical.svg", alt: "More options" %></em> menu button.</li>
|
||||
<li>Tap <em>Settings</em>.</li>
|
||||
<li>Tap <em>Notifications</em>.</li>
|
||||
<li>Tap <em><%= icon_tag "switch", alt: "the toggle button" %></em> to <em>Allow <%= platform.browser.capitalize %> notifications</em>.</li>
|
||||
</ol>
|
||||
<% when platform.edge? && platform.desktop? %>
|
||||
<ol>
|
||||
<li>Click <em>Start</em>, then <em>Settings</em>.</li>
|
||||
<li>Go to <em>System > Notification</em>.</li>
|
||||
<li>Click <em><%= icon_tag "switch", alt: "the toggle button" %></em> <em>ON</em> for Fizzy.</li>
|
||||
</ol>
|
||||
<% when (platform.firefox? || platform.chrome?) && platform.desktop? %>
|
||||
<ol>
|
||||
<% if platform.windows? %>
|
||||
<li>Click <em>Start</em>, then <em>Settings</em>.</li>
|
||||
<li>Go to <em>System > Notification</em>.</li>
|
||||
<li>Click <em><%= icon_tag "switch", alt: "the toggle button" %></em> <em>ON</em> for Fizzy.</li>
|
||||
<% else %>
|
||||
<li>Click <em aria-label="the Apple menu"></em> in the top left.</li>
|
||||
<li>Click <em>System Settings…</em>.</li>
|
||||
<li>Click <em>Notifications</em>.</li>
|
||||
<li>Click <em>Fizzy</em>.</li>
|
||||
<li>Click <em><%= icon_tag "switch", alt: "the allow notifications switch" %></em> to <em>Allow notifications</em>.</li>
|
||||
<% end %>
|
||||
</ol>
|
||||
<% when platform.safari? && platform.desktop? %>
|
||||
<ol>
|
||||
<li>Click <em aria-label="the Apple menu"></em> in the top left.</li>
|
||||
<li>Click <em>System Settings…</em>.</li>
|
||||
<li>Click <em>Notifications</em>.</li>
|
||||
<li>Click <em>Fizzy</em>.</li>
|
||||
<li>Click <em><%= icon_tag "switch", alt: "the allow notifications switch" %></em> to <em>Allow notifications</em>.</li>
|
||||
</ol>
|
||||
<% when (platform.safari? || platform.chrome?) && platform.ios? %>
|
||||
<ol>
|
||||
<li>Open the <em><%= icon_tag "gear", aria: { hidden: "true" } %></em> Settings app.</li>
|
||||
<li>Scroll to and tap <em>Fizzy</em>.</li>
|
||||
<li>Tap <em>Notifications</em>.</li>
|
||||
<li>Tap <em><%= icon_tag "switch", alt: "the allow notifications switch button" %></em> to <em>Allow Notifications</em>.</li>
|
||||
</ol>
|
||||
<% when platform.chrome? && platform.android? %>
|
||||
<ol>
|
||||
<li>Open the <em><%= icon_tag "gear", aria: { hidden: "true" } %></em> Settings app.</li>
|
||||
<li>Tap <em>Notifications</em>.</li>
|
||||
<li>Tap <em>App notifications</em>.</li>
|
||||
<li>Scroll to <em>Fizzy</em>.</li>
|
||||
<li>Tap <em><%= icon_tag "switch", alt: "the switch" %></em> to <em>Allow Notifications</em>.</li>
|
||||
</ol>
|
||||
<% else %>
|
||||
<p>Ensure notifications are allowed for <%= platform.browser.capitalize %> in your system settings.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
@@ -12,16 +12,34 @@
|
||||
</nav>
|
||||
<% end %>
|
||||
|
||||
<section class="panel unpad borderless center flex flex-column gap-half margin-block-start">
|
||||
<div class="pad fill-shade margin-block-end-double border-radius border" data-controller="notifications" data-notifications-subscriptions-url-value="<%= user_push_subscriptions_path(Current.user) %>">
|
||||
<span>
|
||||
<button class="btn txt-small" data-action="notifications#attemptToSubscribe">
|
||||
<%= icon_tag "bell" %>
|
||||
<span>Receive push notifications on this device</span>
|
||||
</button>
|
||||
</span>
|
||||
<div class="notifications__status panel fill-shade center margin-block-start margin-block-end-double" data-controller="notifications" data-notifications-subscriptions-url-value="<%= user_push_subscriptions_path(Current.user) %>" data-notifications-enabled-class="notifications--on">
|
||||
<h2 class="notifications__on-message txt-medium">Push notifications are ON</h2>
|
||||
<h2 class="notifications__off-message txt-medium">Push notifications are OFF</h2>
|
||||
|
||||
<div class="margin-block-start-half" data-notifications-target="subscribeButton" hidden>
|
||||
<button class="btn txt-small" data-action="notifications#attemptToSubscribe">
|
||||
<%= icon_tag "bell" %>
|
||||
<span>Turn ON push notifications on this device</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<details class="margin-block-start-half" data-notifications-target="explainer">
|
||||
<summary class="btn txt-x-small">
|
||||
<%= icon_tag "lifebuoy" %>
|
||||
<span class="notifications__off-message">Help me fix this</span>
|
||||
<span class="notifications__on-message">Not receiving notifications?</span>
|
||||
</summary>
|
||||
|
||||
<div class="notifications-help__explainer fill-white margin-block-start border-radius border txt-align-start">
|
||||
<p class="margin-none-block-start notifications__on-message">When push notifications aren’t working, this can usually be fixed by checking your notification settings to make sure they’re allowed.</p>
|
||||
<%= render partial: "notifications/settings/browser" %>
|
||||
<%= render partial: "notifications/settings/system" %>
|
||||
<%= render partial: "notifications/settings/install" %>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<section class="panel unpad borderless center flex flex-column gap-half">
|
||||
<h2 class="txt-medium txt-uppercase divider">Collections</h2>
|
||||
<%= render partial: "notifications/settings/collection", collection: @collections, locals: { user: Current.user } %>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user