implement unregister
This commit is contained in:
@@ -2,27 +2,30 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>7am</title>
|
||||
<title>7am Weather</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
|
||||
<link href="./style.css" rel="stylesheet">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<h1>7am</h1>
|
||||
<h2>Daily weather updates delivered to you at 7am.</h2>
|
||||
<hr class="divider" />
|
||||
<ul>
|
||||
<li><a href="/london">London</a></li>
|
||||
<li><a href="/sf">San Francisco</a></li>
|
||||
<li><a href="/sj">San Jose</a></li>
|
||||
<li><a href="/la">Los Angeles</a></li>
|
||||
<li><a href="/nyc">New York City</a></li>
|
||||
<li><a href="/tokyo">Tokyo</a></li>
|
||||
</ul>
|
||||
</main>
|
||||
<main>
|
||||
<h1>7am</h1>
|
||||
<h2>Daily weather updates delivered to you at 7am.</h2>
|
||||
<hr class="divider" />
|
||||
<ul>
|
||||
<li><a href="/london">London</a></li>
|
||||
<li><a href="/sf">San Francisco</a></li>
|
||||
<li><a href="/sj">San Jose</a></li>
|
||||
<li><a href="/la">Los Angeles</a></li>
|
||||
<li><a href="/nyc">New York City</a></li>
|
||||
<li><a href="/tokyo">Tokyo</a></li>
|
||||
</ul>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
@@ -17,7 +17,7 @@
|
||||
html, body {
|
||||
font-family: Geist, sans-serif;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
@@ -2,11 +2,14 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>WeatherBoy</title>
|
||||
<title>7am Weather</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
|
||||
<link href="/style.css" rel="stylesheet">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
@@ -1,11 +1,12 @@
|
||||
const KEY_SUBSCRIPTION = "subscription"
|
||||
|
||||
const canReceiveUpdates = "Notification" in window && "serviceWorker" in navigator
|
||||
const canReceiveUpdates = "serviceWorker" in navigator
|
||||
const getSummaryButton = document.getElementById("get-summary-btn")
|
||||
const loc = getSummaryButton.dataset.loc
|
||||
getSummaryButton.style.display = "none"
|
||||
|
||||
async function main() {
|
||||
getSummaryButton.style.display = "none"
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
navigator.serviceWorker.register("/sw.js")
|
||||
})
|
||||
@@ -29,13 +30,33 @@ async function main() {
|
||||
async function onButtonClick() {
|
||||
const reg = await navigator.serviceWorker.ready
|
||||
|
||||
const pushSub = await reg.pushManager.getSubscription()
|
||||
const existingSubscriptionJson = localStorage.getItem(KEY_SUBSCRIPTION)
|
||||
const existingSubscription = existingSubscriptionJson ? JSON.parse(existingSubscriptionJson) : null
|
||||
const currentlyEnabled = existingSubscription?.locations?.includes(loc) ?? false
|
||||
const registeredSubscription = existingSubscriptionJson ? JSON.parse(existingSubscriptionJson) : null
|
||||
const currentlyEnabled = (registeredSubscription?.locations?.includes(loc) ?? false) && pushSub !== null
|
||||
|
||||
if (currentlyEnabled) {
|
||||
await reg.pushManager.getSubscription().then((sub) => sub?.unsubscribe())
|
||||
localStorage.removeItem(KEY_SUBSCRIPTION)
|
||||
registeredSubscription.locations.splice(
|
||||
registeredSubscription.locations.indexOf(loc),
|
||||
1
|
||||
)
|
||||
if (registeredSubscription.locations.length === 0) {
|
||||
await reg.pushManager.getSubscription().then((sub) => sub?.unsubscribe())
|
||||
await fetch(`/registrations/${registeredSubscription.id}`, { method: "DELETE" })
|
||||
localStorage.removeItem(KEY_SUBSCRIPTION)
|
||||
} else {
|
||||
const newReg = await fetch(`/registrations/${registeredSubscription.id}`, {
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
subscription: pushSub,
|
||||
locations: registeredSubscription.locations,
|
||||
})
|
||||
}).then(jsonOrThrow)
|
||||
localStorage.setItem(KEY_SUBSCRIPTION, newReg)
|
||||
}
|
||||
getSummaryButton.innerText = "Get daily updates at 7am"
|
||||
} else {
|
||||
const worker = await navigator.serviceWorker.ready
|
||||
@@ -50,27 +71,22 @@ async function onButtonClick() {
|
||||
const pushSub = await worker.pushManager.subscribe({
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: publicKey
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
})
|
||||
|
||||
registeredSubscription.locations.push(loc)
|
||||
|
||||
let newSubscription
|
||||
if (existingSubscription) {
|
||||
newSubscription = await fetch(`/registrations/${existingSubscription.id}`, {
|
||||
if (registeredSubscription) {
|
||||
newSubscription = await fetch(`/registrations/${registeredSubscription.id}`, {
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
subscription: pushSub,
|
||||
locations: [...existingSubscription.locations, loc]
|
||||
locations: registeredSubscription.locations,
|
||||
})
|
||||
}).then((res) => {
|
||||
if (res.status === 200) {
|
||||
return res.json()
|
||||
}
|
||||
throw new Error(`${res.status}`)
|
||||
})
|
||||
}).then(jsonOrThrow)
|
||||
} else {
|
||||
newSubscription = await fetch("/registrations", {
|
||||
method: "POST",
|
||||
@@ -81,22 +97,23 @@ async function onButtonClick() {
|
||||
subscription: pushSub,
|
||||
locations: [loc]
|
||||
})
|
||||
}).then((res) => {
|
||||
if (res.status === 200) {
|
||||
return res.json()
|
||||
}
|
||||
throw new Error(`${res.status}`)
|
||||
})
|
||||
}).then(jsonOrThrow)
|
||||
}
|
||||
|
||||
localStorage.setItem(KEY_SUBSCRIPTION, JSON.stringify(newSubscription))
|
||||
|
||||
getSummaryButton.innerText = "Stop updates"
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
alert(`Error when trying to subscribe to updates: ${error}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function jsonOrThrow(res) {
|
||||
if (res.status === 200) {
|
||||
return res.json()
|
||||
}
|
||||
throw new Error(`server returned status ${res.status}`)
|
||||
}
|
||||
|
||||
if (canReceiveUpdates) {
|
||||
|
Reference in New Issue
Block a user