Skip to main content
SimilarExport ZIP
100%

https://meta.discourse.org/push-service-worker.js

✓ Published0🌍 Public
NN0taN3rd
Last edited May 26, 2017
Created on May 26, 2017

This example demonstrates how to handle push notifications in a service worker, replacing any existing notification with the same tag before displaying a new one, and managing notification clicks by focusing or navigating to the target URL. The code uses the Service Worker API, including `self.registration.showNotification`, `getNotifications`, `clients.matchAll`, and the `push` and `notificationclick` events. It reads payload data from the push event via `event.data.json()` and closes stale notifications before showing the new one.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist eeac85f83bbc682a4f2d

This example demonstrates how to run a simple inline Web Worker that greets a user by name, with a fallback to executing the worker script on the main thread when the browser lacks necessary APIs. It uses a `<script type="javascript/worker">` block for the worker code and the `runWorkerJs` helper, which checks for `Blob`, `BlobBuilder`, `URL.createObjectURL`, and `Worker` support. If those are available, it creates a worker from the script’s text and posts a parameter object; otherwise, it evals the script in a proxy scope. The result updates the page body text.

PPhilippe Rivière
51% match
Loading thumbnail…

Gist 3413ee69199762ea0375292e47168e84

This example shows a Redux-based offline-first data visualization for a rail system, persisting station directory data to localStorage and using a service worker to cache assets for offline use. The code uses `localforage` for asynchronous storage, `axios` for fetching JSON station data, and `throttle` from Lodash to limit state saves. It demonstrates a fetch-then-cache strategy where API responses are stored locally, while the service worker intercepts network requests to serve cached resources or fall back to offline behavior. The visualization itself is not shown, but the data flow centers on storing and retrieving station directory JSON to support the application’s offline functionality.

CCKschneid
47% match
Loading thumbnail…

Create a notification within a sketch plugin

This example shows how a Sketch plugin can display a native macOS notification to the user. The code creates a new `NSUserNotification`, assigns it a unique identifier, and sets its title, subtitle, and informative text. It then retrieves the default notification center and delivers the notification. The data is hard-coded strings, and the implementation relies on the Sketch plugin API’s `NSUserNotificationCenter` and `NSUserNotification` classes.

KKevinGutowski
46% match
Loading thumbnail…

D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding

This example demonstrates a hands-on D3 workshop exercise that introduces basic HTML structure, the D3.js v4 library, and fundamental data-binding concepts. It shows a sandboxed webpage with a button that, when clicked, triggers a JavaScript function to manipulate existing paragraph elements and append new ones based on an array of data. The code uses `d3.select` and `d3.selectAll` to target DOM elements, applies styles and text changes, and employs the data join pattern with `.data()`, `.enter()`, and `.append()` to create new paragraphs. It also attaches click event handlers to dynamically added elements, logging a message and altering their appearance, while the accompanying exercise checklist guides users through modifying the code to reinforce learning.

AAndrewMcKernan
45% match
Loading thumbnail…

Force-Directed Web Worker

This example shows a force-directed graph of 1,000 nodes computed in a web worker, with a progress bar indicating the simulation’s tick rate. The main thread receives progress updates and renders the final layout on a Canvas using `getContext("2d")`. The layout is calculated with `d3.forceSimulation`, using `forceManyBody`, `forceLink`, and `forceX`/`forceY` forces in worker.js, which imports d3-force modules via `importScripts`.

Mmbostock
45% match
Loading thumbnail…

Gist 7facf6eee4cdc2d78b333fb54eafc2c9

This example demonstrates a dynamic task-management interface that updates in response to simulated HTTP polling data. The visualization shows a table of devices and their associated tasks, where each periodic response adds new tasks to existing devices or introduces entirely new device rows. Users can click on individual tasks to complete them, removing them from the display to free up space for future updates. The implementation uses plain JavaScript with a custom `getResponse` function to generate random device-task assignments, and the UI is built directly via the DOM API without external libraries, featuring a clean two-column layout for professional presentation.

WWill Carter
45% match
Loading thumbnail…

D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding

This interactive D3 workshop demonstrates the basics of data binding and DOM manipulation in a live sandbox. It shows how a button click triggers JavaScript to modify existing paragraph elements—changing their text and font size—while also appending new paragraphs from a hardcoded array. The code uses D3 v4’s `selectAll`, `data`, and `enter` methods to bind the array `myData` to new `<p>` elements, then adds click interactivity via `on`, which changes the clicked paragraph’s text and color. The example also includes an HTML checkbox exercise list, though only the button-driven D3 logic is functional.

DDeveloperJeffb
45% match
Loading thumbnail…

info.design.2021.hello.wolrd

This example demonstrates a minimal web page that combines HTML, CSS, and JavaScript to display a static message and trigger a browser alert. The page shows a heading rendered with black background and white text via the external `info.css` stylesheet. It also includes inline JavaScript that performs a simple arithmetic operation and logs the result to the console, alongside the `java.js` script which invokes the `alert` function. The example uses no external libraries or data sources, relying solely on native DOM elements and standard JavaScript APIs.

JJuyewon
44% match