Skip to content

Commit

Permalink
Add server-pushed PWA notifications
Browse files Browse the repository at this point in the history
  • Loading branch information
ducklol2 authored Feb 10, 2025
1 parent 87b8ee9 commit d62aed8
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 42 deletions.
144 changes: 102 additions & 42 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,55 +1,115 @@
<!DOCTYPE html>
<html lang="en">

<head>
<head>
<title>🦆.lol</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
</head>

<body>
<body>
<header>
<h1>🦆.lol</h1>
<h1>🦆.lol</h1>
<h5>
<a href="https://hachyderm.io/@duck_lol" target="_blank">Mastodon</a> |
<a href="https://github.com/ducklol2" target="_blank">GitHub</a>
</h5>
</header>

<main>
<article id="server-pushed-notifications">
<h5>Feb 10, 2025 | <a href="#server-pushed-notifications">🔗</a></h5>
<h2>Server pushed notifications to a PWA (works on iOS!)</h2>

<article id="publishing-local">
<h2>Publishing .local domains, automatically</h2>
<h5>Oct 7, 2023</h5>

<p>
My first thing! I've been playing with random things in
Docker containers on random local devices recently, but I didn't
like using IPs, or ports, or managing DNS servers, or adding DNS
entries to all my clients. I love how Traefik configures itself
based on Docker compose labels, so I made a tool that does the same
thing, but for using mDNS to publish `.local` addresses:
</p>

<p><a href="https://github.com/ducklol2/quack_domains">github.com/ducklol2/quack_domains</a></p>

<p>I swear that I looked around for something like this prior to
building it myself, and somehow I didn't find anything - but turns
out many others have built something similar. Check them out too, see
what makes sense to you!</p>

<ul>
<li>
<a href="https://gitlab.com/viraptor/docker_mdns">gitlab.com/viraptor/docker_mdns</a>
- written in Crystal, runs as a systemd service
</li>

<li>
<a
href="https://github.com/hardillb/traefik-avahi-helper">github.com/hardillb/traefik-avahi-helper</a>
- written in JS & Python, runs as a container, monitors for changes
</li>
</ul>
</pre>
</article>
</main>
</body>
<p>
I love the idea of PWAs (progressive web apps,
<a
href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps"
target="_blank"
>MDN</a
>): develop & debug like a website, no app store, works (...mostly)
everywhere. Of course, there are some limitations, and each platform
works slightly differently, but it still seems like a nice way to
create simple apps that don't use too many APIs (or prototype them, at
least). I spent a day figuring out how to get a PWA working in iOS,
create notifications, and to trigger notifications from the server.
</p>

<p>
Code, and instructions to run it yourself:
<a
href="https://github.com/ducklol2/web_push_rust_example"
target="_blank"
>web_push_rust_example</a
>
</p>

<p>I used a few dependencies / resources:</p>

<ul>
<li>
<a href="https://docs.rs/axum/latest/axum/" target="_blank">Axum</a
>, a Rust server framework
</li>
<li>
<a href="https://crates.io/crates/web-push/" target="_blank"
>web-push</a
>, a Rust library that communicates with browser's push servers
</li>
<li>
<a href="https://web.dev/explore/notifications" target="_blank"
>The web.dev Notifications documentation</a
>, which explains how everything works
</li>
</ul>
</article>

<hr />

</html>
<article id="publishing-local">
<h5>Oct 7, 2023 | <a href="#publishing-local">🔗</a></h5>
<h2>Publishing .local domains, automatically</h2>

<p>
My first thing! I've been playing with random things in Docker
containers on random local devices recently, but I didn't like using
IPs, or ports, or managing DNS servers, or adding DNS entries to all
my clients. I love how Traefik configures itself based on Docker
compose labels, so I made a tool that does the same thing, but for
using mDNS to publish `.local` addresses:
</p>

<p>
<a href="https://github.com/ducklol2/quack_domains" target="_blank"
>github.com/ducklol2/quack_domains</a
>
</p>

<p>
I swear that I looked around for something like this prior to building
it myself, and somehow I didn't find anything - but turns out many
others have built something similar. Check them out too, see what
makes sense to you!
</p>

<ul>
<li>
<a href="https://gitlab.com/viraptor/docker_mdns" target="_blank"
>gitlab.com/viraptor/docker_mdns</a
>
- written in Crystal, runs as a systemd service
</li>

<li>
<a
href="https://github.com/hardillb/traefik-avahi-helper"
target="_blank"
>github.com/hardillb/traefik-avahi-helper</a
>
- written in JS & Python, runs as a container, monitors for changes
</li>
</ul>
</article>
</main>
</body>
</html>
4 changes: 4 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,8 @@ main {
max-width: 600px;
margin: 0 auto;
padding: 10px;
}

h2, h5 {
margin: 5px;
}

0 comments on commit d62aed8

Please sign in to comment.