Skip to content

Instantly share code, notes, and snippets.

@johnmellor

johnmellor/index.html

Last active September 16, 2016 12:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save johnmellor/4d9d1d32d8c7915b63a48f462cceaf74 to your computer and use it in GitHub Desktop.
Save johnmellor/4d9d1d32d8c7915b63a48f462cceaf74 to your computer and use it in GitHub Desktop.
Download ZIP
Notification image demo
Raw
index.html
<!doctype html>
<!-- View this at https://rawgit.com/johnmellor/4d9d1d32d8c7915b63a48f462cceaf74/raw/ -->
<meta name=viewport content="initial-scale=1">
<a href="https://gist.github.com/johnmellor/4d9d1d32d8c7915b63a48f462cceaf74">View code</a><br><br>
<button id="show">Show notification</button>
<script>
navigator.serviceWorker.register('sw.js');
document.getElementById('show').addEventListener('click', event => {
navigator.serviceWorker.ready.then(swr => {
Notification.requestPermission(permission => {
if (permission != 'granted')
alert("Grant Notifications permission then try again");
swr.showNotification("Title", {
body: new Array(8 + 1).join("The cat sat on the mat. "),
image: 'https://tests.peter.sh/resources/large-cat.jpg',
icon: 'https://tests.peter.sh/resources/icons/13.png'
});
});
});
});
</script>
Raw
sw.js
self.addEventListener('install', () => skipWaiting());
self.addEventListener('activate', () => clients.claim());
self.addEventListener('notificationclick', event => {
event.notification.close();
event.waitUntil(clients.matchAll().then(cs => {
for (var client of cs) {
if (client.url == registration.scope)
return client.focus();
}
return clients.openWindow(registration.scope);
}));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment