Push Notification

Reactive

Push Notification API.

Usage

<script>
    import { pushNotification } from "@sveu/browser"

    const { result, supported } = pushNotification("/sw.js", "vapid key")
</script>
<script>
    import { pushNotification } from "@sveu/browser"

    const { result, supported } = pushNotification("/sw.js", "vapid key")
</script>
svelte

Example

Not supported

<script>
    import { pushNotification } from "@sveu/browser"

    const { supported, result } = pushNotification(
        "/sw/web-push.js",
        "BJhRxOx05VZ7Yd9vmpvlibidolVdM-jjDJDDXSAZh8bTBcHLWJFT6dCwGViQ0SbnlDo-GGQoFuDKOuJvsieSs2Q",
    )

    let text = ""

    async function send() {
        text = "Close the Tab"

        const rep = await fetch("http://localhost:5173/api/push/web-push", {
            method: "POST",
            body: JSON.stringify({
                tokens: [$result],
                payload: {
                    title: "test",
                    body: "Hello from Svelte Utility",
                },
            }),
            headers: {
                "Content-Type": "application/json",
            },
        })

        const data = await rep.json()
        
        if(data.success) text = ""
    }
</script>

<div class="flex flex-col items-center justify-center">
    {#if $supported}
        <h3>Push Notification Key:</h3>
        <textarea class="h-60 w-60" value="{$result}"></textarea>

        {#if text}<p class="mt-15 text-center">{text}</p>{/if}

        <button
            class="mt-8 w-1/2"
            on:click="{send}">Send</button>
    {:else}
        <p>Not supported</p>
    {/if}
</div>
<script>
    import { pushNotification } from "@sveu/browser"

    const { supported, result } = pushNotification(
        "/sw/web-push.js",
        "BJhRxOx05VZ7Yd9vmpvlibidolVdM-jjDJDDXSAZh8bTBcHLWJFT6dCwGViQ0SbnlDo-GGQoFuDKOuJvsieSs2Q",
    )

    let text = ""

    async function send() {
        text = "Close the Tab"

        const rep = await fetch("http://localhost:5173/api/push/web-push", {
            method: "POST",
            body: JSON.stringify({
                tokens: [$result],
                payload: {
                    title: "test",
                    body: "Hello from Svelte Utility",
                },
            }),
            headers: {
                "Content-Type": "application/json",
            },
        })

        const data = await rep.json()
        
        if(data.success) text = ""
    }
</script>

<div class="flex flex-col items-center justify-center">
    {#if $supported}
        <h3>Push Notification Key:</h3>
        <textarea class="h-60 w-60" value="{$result}"></textarea>

        {#if text}<p class="mt-15 text-center">{text}</p>{/if}

        <button
            class="mt-8 w-1/2"
            on:click="{send}">Send</button>
    {:else}
        <p>Not supported</p>
    {/if}
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
Click fold/expand code

API

Arguments

Name Description Type Required
swUrl The service worker url string Yes
vapid The vapid key string Yes


Options

Name Description Type
base64 Either to convert the push object into a base64 string. boolean
userVisibleOnly Either to start subscribing, when the user is visible. boolean
Last update at: Invalid Date