Bootstrap is een populair framework voor het werken met html, css en JavaScript. Je kunt er snel professionele websites mee ontwerpen. En dan in het bijzonder zogeheten responsieve websites, die mooi meeschalen met het type apparaat waarop ze bekeken worden. Hoe gaat dat in zijn werk?

Bootstrap is vooral een goede hulp bij het maken van ‘responsive’ of responsieve websites. Responsief houdt in dat de weergave wordt aangepast aan de beschikbare ruimte. Open maar eens een website als die van de NOS in een venster en maak dit venster steeds kleiner. Let op hoe de weergave zich aanpast. Op een klein scherm zal bijvoorbeeld het menu compacter worden en verhuist een kolom van de rechterkant naar onderen. De meeste websites werken al zo en dat is voor een groot deel te danken aan Bootstrap.

We gaan aan de slag met Bootstrap en we gaan handmatig een verse start maken. Maak daarvoor eventueel een nieuw mapje voor je Bootstrap-site aan en open deze map in je favoriete teksteditor. Wij gebruiken de teksteditor Brackets.

Starten met bootstrap

Ga naar getbootstrap.com. Zorg dat rechtsboven de laatste versie is geselecteerd. Zo heb je meteen de juiste bijbehorende documentatie. Klik dan op Get Started. Blader naar onderen, naar Starter template. Klik in dit venster op Copy. Hiermee kopieer je alle html-code naar het klembord. Plak het dan in een nieuw bestand in Brackets en bewaar het als html-bestand, bijvoorbeeld index.html. Open Live Voorbeeld om te zien hoe het eruitziet. Dit wordt ons vertrekpunt. 

De html-code zal weinig verrassingen hebben. Wel is de metatag viewport nieuw. Je weet dat de viewport het zichtbare gedeelte van een pagina is. De aanduiding width=device-width geeft in feite aan dat de browser de breedte van de pagina gelijk moet stellen aan de schermbreedte van het apparaat. Als het ontbreekt, zullen apparaten zelf de weergave aanpassen, wat ze zeker op smartphones verre van optimaal doen.

Stylesheets en scripts

In de head ziet je hoe het stylesheet van Bootstrap wordt geladen. Dit bevat alle vooraf gedefinieerde stijlen die je direct kunt gebruiken. We raden aan om onder dit stylesheet een verwijzing te maken naar een eigen, nu nog leeg stylesheet, waarin je aanpassingen maakt:

<link href="css/custom.css" rel="stylesheet" type="text/css">

Deze stijlen zullen, omdat het stylesheet later is geladen, voorrang hebben boven de standaardstijlen van Bootstrap. Onderaan het html-document zie je hoe de jQuery-bibliotheek en een Bootstrap-bundel worden geladen. Die laatste omvat ook Popper.js, een soort hulpbibliotheek voor JavaScript waarvan veel Bootstrap-componenten gebruikmaken. 

Alle onderdelen worden vanaf een zogenoemd Content Delivery Network (CDN) geladen. Als je zo’n CDN gebruikt, zal altijd automatisch de dichtstbijzijnde server worden gebruikt, zodat iedere bezoeker optimale prestaties heeft. Je mag de scripts natuurlijk ook op je eigen pc (of later je hostingaccount) zetten.

©PXimport

Om te zien welke mogelijkheden je hebt, is het slim om de documentatie erbij te houden. Onder Layout zie je tips voor bijvoorbeeld het werken met grids. Ook het kopje Content verdient je aandacht. Hier lees je over alle mogelijke manieren om met afbeeldingen te werken en om bijvoorbeeld tekst of tabellen op te maken. 

Onder Components vind je uiteenlopende componenten die je kunt opnemen in je pagina. Onder Utilities zie je handige opties die je kunt gebruiken. Zo kun je door een class toe te voegen bijvoorbeeld de tekst- of achtergrondkleur wijzigen, of marges en padding beïnvloeden.

Containers en jumbotrons

We beginnen met wat tips voor de lay-out. Uitgebreide details hierover vind je in de documentatie in het betreffende gedeelte. Als voorbeeld zullen we de kop <h1> in een zogenoemde container zetten:

Omdat we hier container als classnaam gebruiken, wordt de breedte in sprongetjes aan de vensterbreedte aangepast. Dat komt door enkele @media-regels in het stylesheet, waaronder deze twee:

Wat hier wordt bepaald, is dat indien de breedte van het venster minimaal 576 pixels is, de container maximaal 540 pixels groot moet zijn. En als het venster minimaal 768 pixels is, moet de container een maximale breedte van 720 pixels aannemen. 

Gebruik je container-fluid, dan zijn zulke regels er niet en wordt steeds de volledige breedte gebruikt. Deze @media-regels vormen ook de basis voor responsieve websites. Dit soort details kun je achterhalen via het volledige stylesheet van Bootstrap (zie onderstaande alinea’) of via de ontwikkelaarstools, door rechts op een element te klikken en dan Inspecteren te kiezen.

Het is handig om de bronbestanden van Bootstrap bij de hand te hebben. Deze vind je op deze pagina onder Source files. Pak het zip-bestand na het downloaden uit in een map op je pc. Je kunt nu altijd even spieken hoe iets precies wordt aangepakt in bijvoorbeeld het stylesheet van Bootstrap, die in het mapje dist/css staat.

Met een kleine aanpassing van de classnaam maak je een zogenoemde jumbotron, een grote grijze box die de volledige schermbreedte inneemt en vooral is bedoeld om de aandacht op bepaalde content te vestigen.

Als je in de documentatie naar Utilities gaat, zie je onder Colors hoe je met een paar extra classes de kleur van de achtergrond en tekst kunt veranderen, bijvoorbeeld bg-primary om het de standaard (blauwe) achtergrondkleur te geven en text-white voor een witte tekstkleur:

Meer mogelijkheden

Op een vergelijkbare manier kun je bijvoorbeeld mooie buttons of strakkere formulieren maken. De documentatie is een onmisbare hulplijn en gelukkig heel verzorgd. En omdat het framework zo populair is, vind je op internet enorm veel voorbeelden of zelfs kant-en-klare sites die ermee zijn gebouwd. Je hebt de volledige versie van de Bootstrap-bibliotheek en kunt naar vrijheid alle componenten proberen. Ben je wat verder en heb je een goed beeld van wat je wel of niet gaat gebruiken, dan is het slim die bibliotheek wat terug te brengen.

Bootstrap maakt gebruik van Sass, een soort vereenvoudigde taal om css in te schrijven. Je herkent de bestanden aan de .scss-extensie. Zulke bestanden moeten worden omgezet naar css voordat de browser ze kan gebruiken. Daarvoor gebruik je een zogenoemde pre-processor. Het proces wordt ook wel compileren genoemd. Het voordeel van deze benadering is dat je precies kunt aangeven welke componenten van Bootstrap je wel of niet nodig hebt, zodat de uiteindelijke bibliotheek niet groter wordt dan nodig. Ook kun je persoonlijke aanpassingen mee laten nemen, bijvoorbeeld aangepaste standaardkleuren of een andere aanvangsgrootte voor het lettertype.

©PXimport

Werken met grids

Mede dankzij Bootstrap werken veel websites responsief, waarbij met een grid wordt gewerkt om de pagina in vlakken te verdelen. We laten zien hoe je dit toepast. Bij Bootstrap kun je een pagina flexibel verdelen in maximaal twaalf kolommen. Meestal zul je die niet allemaal nodig hebben en zul je ze groeperen om bredere kolommen te maken. Het grid is responsief en de kolommen kunnen zich herschikken, afhankelijk van de schermgrootte. De achterliggende techniek die Bootstrap gebruikt heet Flexbox. Dat kun je samen met CSS Grid gebruiken om complexere lay-outs te maken met alleen css.

Flexbox en CSS Grid zijn bedoeld om samen te gebruiken. Met CSS Grid is elke denkbare lay-out te maken, in een denkbeeldig grid met horizontale en verticale lijnen. Flexbox werkt maar in één richting tegelijk en is daarom eenvoudiger te doorgronden. Je kunt het ook gebruiken binnen een met CSS Grid gedefinieerde rij (horizontaal) of kolom (verticaal). Flexbox lost problemen op die met standaard css uitdagend zijn, zoals een gelijkmatige verdeling van elementen binnen de ruimte of een aantal kolommen met precies dezelfde hoogte, ongeacht de inhoud.

©PXimport

Gelijke kolommen

We vergeten Flexbox even en richten ons op het werken met grids in Bootstrap. Als eerste voorbeeld maken we een lay-out met drie kolommen die in de browser steeds dezelfde breedte moeten krijgen, onafhankelijk van de schermgrootte van het apparaat. We beginnen met een container, waar we vervolgens één rij aan toevoegen met in die rij drie kolommen met col als class:

Verschillende schermgroottes

Stel dat bovenstaande opmaak zich niet leent voor kleinere apparaten, zoals een smartphone, maar eigenlijk alleen voor tablets of groter. Dan zul je een andere class moeten gebruiken dan col. We gaan de weergave richten op alle schermen vanaf een bepaalde breedte. Alle opties zie je in de documentatie van Bootstrap onder Layout / Grid. 

De belangrijkste zijn je col-sm-* voor kleine schermen zoals smartphones, col-md-* voor gemiddelde schermen zoals tablets, col-lg-* voor grotere schermen als een desktop-pc en col-xl-* voor nog grotere schermen. Het sterretje staat voor een bepaald getal, waarbij de som van de kolommen steeds twaalf is. We zullen dat demonstreren.

Lay-outs voor tablets

Om de lay-out op tablets en groter te richten, veranderen we alleen voor elke kolom de class col naar col-md-4. De kolommen staan dan nog steeds netjes naast elkaar vanaf een schermbreedte van 768 pixels, maar op kleinere schermen worden ze onder elkaar gezet. Merk op dat de som van de kolommen (4-4-4) twaalf is. Andere combinaties zijn ook mogelijk, zoals een 3-6-3 opstelling:

Nog meer responsiviteit

We gaan een nog wat flexibelere lay-out maken. Het doel is dat op apparaten met groot scherm (aangegeven door col-lg-*) de kolommen naast elkaar staan, zoals hierboven in 3-6-3-opstelling. Bij een gemiddelde schermbreedte (col-md-*) moeten de eerste twee kolommen in een verhouding van 1:2 naast elkaar staan en moet de derde kolom naar onderen verhuizen. Dat kun je als volgt bereiken:

Zoals je ziet is er een klein beetje rekenwerk nodig. Op apparaten met gemiddeld scherm worden de eerste kolom (col-md-4) en tweede kolom (col-md-8) naast elkaar in een 1:2-verhouding gezet, en omdat de som twaalf is, wordt de derde kolom (col-md-12) automatisch daaronder gezet. Bootstrap geeft je die flexibiliteit. Op grotere schermen wordt de pagina normaal volgens 3-6-3 opgebouwd.

Probeer het in je browser door de vensterbreedte langzaam kleiner of groter te maken. Er zijn meer trucjes, maar de belangrijkste basisprincipes hebben we nu doorgenomen, waarmee je nu verder kunt experimenteren! 

Kom je er niet helemaal uit? Op de website van Bootstrap vind je bij Examples handige voorbeelden van lay-outs die met het framework zijn gemaakt. Je kunt het als inspiratie voor je eigen creaties gebruiken of zelfs voorbeelden een-op-een overnemen, als je dat wilt.

Microsoft heeft een flinke aanscherping van de beveiliging in Windows 11 aangekondigd. Onder de noemer Windows Baseline Security Mode en User Transparency and Consent krijgen gebruikers meer grip op wat apps precies uitspoken op hun computer. Voor de gemiddelde thuisgebruiker betekent dit vooral dat Windows meer gaat lijken op de overzichtelijke beveiliging die we al kennen van onze smartphones.

De aanleiding voor deze verandering is de toenemende irritatie over apps die ongevraagd instellingen aanpassen, extra software installeren of zonder duidelijke toestemming toegang krijgen tot persoonlijke gegevens. Microsoft wil met deze update de regie teruggeven aan de gebruiker, waarbij transparantie en toestemming de belangrijkste uitgangspunten zijn.

Meer grip op je privacy

Een van de meest zichtbare veranderingen is de manier waarop apps om toestemming vragen. Waar programma's in Windows voorheen vaak automatisch toegang hadden tot bepaalde mappen of functies, gaat Windows 11 nu actiever om bevestiging vragen. Wil een app je camera, microfoon of specifieke bestanden gebruiken? Dan verschijnt er een duidelijke melding in beeld, vergelijkbaar met de pop-ups op een iPhone of Android-toestel.

Het mooie van dit systeem is dat je deze keuzes altijd weer kunt terugdraaien. In de instellingen van Windows komt een overzicht waar je precies ziet welke app waarvoor toestemming heeft. Vertrouw je een programma niet langer, dan trek je met één handeling de toegang tot je bestanden of hardware weer in.

©Garun Studios - stock.adobe.com

Alleen veilige software door Baseline Security

Verder introduceert Microsoft de Windows Baseline Security Mode. Dit is een technische beveiligingslaag die ervoor zorgt dat het systeem continu controleert of de software die draait wel integer is. In de praktijk betekent dit dat Windows alleen nog apps, stuurprogramma's en diensten toestaat die officieel zijn ondertekend en als veilig bekendstaan.

Dit voorkomt dat schadelijke software op de achtergrond wijzigingen aanbrengt in je systeem zonder dat je het doorhebt. Voor de meeste mensen verandert er weinig in het dagelijks gebruik; bekende software van grote ontwikkelaars blijft gewoon werken. Mocht je toch een specifiek programma willen gebruiken dat niet aan de strengste eisen voldoet, dan behoud je als gebruiker (of systeembeheerder) de mogelijkheid om handmatig een uitzondering te maken.

Wat merk je in de praktijk?

De uitrol van deze functies gebeurt stap voor stap. Microsoft neemt hier de tijd voor, zodat alles goed blijft werken op de miljarden computers waar Windows op draait. Om dit soepel te laten verlopen, zijn ze op dit moment vooral in overleg met bekende softwaremakers zoals Adobe en 1Password. Zo weet je zeker dat hun programma's gewoon blijven werken onder de nieuwe regels, nog voordat jij de update krijgt. Ook voor de opkomst van slimme AI-hulpjes zijn deze aanpassingen belangrijk. Omdat deze assistenten steeds vaker zelfstandig klusjes voor je opknappen, is het fijn dat je precies kunt zien en bepalen wat zo'n hulpje wel en niet mag doen op jouw pc. 

Kortom: Windows 11 wordt een stukje strenger, maar daardoor ook een stuk transparanter. Je zult iets vaker een vraag krijgen of een app ergens bij mag, maar je krijgt daar een veiliger gevoel en meer controle voor terug.

Als je services op je eigen thuisserver draait, wil je daar ook eenvoudig meldingen van kunnen ontvangen. Ntfy stelt je in staat om eenvoudig pushnotificaties naar je telefoon of computer te sturen. Bovendien kun je ntfy op je eigen thuisserver draaien, zodat je alles in eigen handen hebt. In dit artikel gaan we ermee aan de slag.

Netwerkmonitoringsoftware, een programma dat je Docker-containers bijwerkt, een smarthomecontroller, back-upsoftware, ze hebben allemaal één ding gemeen: ze moeten je meldingen kunnen sturen als er iets gebeurt. Dat kan op verschillende manieren: via e-mail, instant messaging of pushnotificaties naar je telefoon. Dat laatste verloopt doorgaans via een gecentraliseerde dienst zoals Firebase Cloud Messaging (voorheen Google Cloud Messaging) of Apple Push Notification service.

Pushnotificaties zijn handig omdat ze bijna onmiddellijk aankomen en omdat zowel Android als iOS toestaan om in te stellen hoe je ervan op de hoogte wordt gebracht. Wil je pushnotificaties kunnen ontvangen zonder een server onder controle van een partij zoals Google of Apple, dan moet je ook hiervoor je eigen service installeren. Een opensource-project dat dit implementeert, is ntfy.

Werking van ntfy

Je ntfy-server ontvangt meldingen van je programma's via http over een REST-API en zet deze om in pushnotificaties voor de bijbehorende Android- of iOS-app of voor een webpagina op je computer. De API is in de documentatie van het project beschreven, zodat je ook je eigen software met ntfy kunt laten praten. Het project heeft ook een command-line-interface, zodat je bijvoorbeeld shellscripts op je Linux-server eenvoudig pushnotificaties kunt laten verzenden.

Ntfy gebruikt het bekende publish/subscribe-patroon. Een zender publiceert notificaties op een specifiek onderwerp door data te sturen naar een url via een http POST- of PUT-aanvraag. Het onderwerp wordt gedefinieerd door een segment van de url dat volgt op de domeinnaam. Een ontvanger kan zich dan abonneren op dit onderwerp. Elke keer dat de zender daarna een notificatie op dit onderwerp publiceert, stuurt ntfy de data naar alle ontvangers die zich op dit onderwerp hebben geabonneerd. Door ntfy op je eigen server te installeren, heb je de volledige controle over deze notificaties.

Serververeisten

De mobiele app van ntfy moet met je server kunnen communiceren om te vragen of er notificaties zijn. Als je ntfy op een server in je lokale netwerk installeert, moet die dus van buitenaf bereikbaar zijn. Dat kun je met portforwarding in je modem regelen of door je telefoon buitenshuis automatisch met een VPN-server op je lokale netwerk te laten verbinden. Heeft je internetaansluiting thuis geen vast ip-adres, dan moet je ook een DynDNS-updater te draaien.

Een andere optie is om ntfy op een VPS (Virtual Private Server) te installeren. Hierop draai je dan ook een reverse proxy voor https-toegang, die een TLS-certificaat van Let's Encrypt opvraagt. Je hebt dan een domein nodig, waarvoor je een DNS A-record naar het ip-adres van je server laat verwijzen. In de rest van dit artikel gaan we uit van een installatie van ntfy op een lokale server met Debian 13 ("trixie") met behulp van Docker Compose.

Basisconfiguratie

Creëer eerst enkele directory's voor ntfy:

$ mkdir -p containers/ntfy/{cache,etc,lib}

Creëer dan het bestand containers/ntfy/etc/server.yml met de volgende configuratie voor ntfy:

base-url: "https://ntfy.example.com"

cache-file: "/var/cache/ntfy/cache.db"

attachment-cache-dir: "/var/cache/ntfy/attachments"

auth-file: "/var/lib/ntfy/user.db"

auth-default-access: "deny-all"

Vervang het domein achter base-url door het domein waarop je ntfy-server draait. Als je gebruikmaakt van een reverse proxy, dan moet dit de url zijn die door de proxy naar ntfy wordt doorgestuurd. Bovendien moet je dan ook een regel behind-proxy: true toevoegen. In de documentatie van ntfy staan voorbeeldconfiguraties voor nginx, Apache2 en Caddy.

Met auth-default-access: "deny-all" tot slot heeft standaard niemand toegang tot onderwerpen. Elke toegang moet dus expliciet worden toegestaan.

Account bij ntfy.sh

De ontwikkelaar van ntfy draait een publiek beschikbare ntfy-server op ntfy.sh. De webinterface daarvan is bereikbaar op https://ntfy.sh/app. Die kun je gratis gebruiken, bijvoorbeeld om ntfy uit te proberen, maar dat komt met beperkingen. Zo kun je geen onderwerpen reserveren en is er een maximum van 250 notificaties per dag en 2 MB per bijlage. Verder is er geen enkele vorm van authenticatie. De enige manier van beveiliging ligt dus in het geheimhouden van je onderwerpen. Die beperkingen heb je niet als je ntfy zelf installeert. Maar als je liever niet zelf een installatie onderhoudt, kun je een betaald plan nemen. Daarmee ondersteun je ook de ontwikkeling van het opensource-project. Dat begint met een Supporter-plan van 5 dollar per maand (circa 5 euro), waarmee je drie onderwerpen kunt reserveren en 2.500 notificaties mag sturen met maximum 25 MB per bijlage.

Betaal voor gebruik van de publieke ntfy-server en ondersteuning van het opensource-project.

Docker Compose

Definieer nu de container in het bestand docker-compose.yaml:

services:

  ntfy:

    image: binwiederhier/ntfy

    container_name: ntfy

    command: serve

    restart: always

    environment:

      - TZ=Europe/Amsterdam

    volumes:

      - ./containers/ntfy/cache:/var/cache/ntfy

      - ./containers/ntfy/etc:/etc/ntfy

      - ./containers/ntfy/lib:/var/lib/ntfy

    ports:

      - 80:80

Ga je voor de aanpak met een reverse proxy, dan definieer je in ditzelfde bestand ook een container voor die reverse proxy.

Start daarna de container met:

$ docker-compose up -d

Als alles goed gaat, is de webinterface van ntfy daarna bereikbaar op het ingestelde domein of ip-adres. Bovenaan links zie je een melding Notifications are disabled. Klik op Grant now om notificaties in je webbrowser toe te staan, en bevestig dit daarna in het dialoogvenster dat je webbrowser toont.

Lees ook: Docker op je NAS: zo draai je Plex, Home Assistant en meer

Notificaties testen

Omdat je ntfy zo geconfigureerd hebt dat alle toegang standaard wordt geblokkeerd, kun je nog niets doen in de webinterface. Je dient dus eerst gebruikers aan te maken en die de toelating te geven om op specifieke onderwerpen te publiceren of zich te abonneren. Open daarvoor een shell in de container van ntfy met de opdracht docker exec -ti ntfy /bin/sh. Als je daarna ntfy user list intypt, krijg je te zien dat anonieme, niet geauthenticeerde gebruikers geen enkele permissies hebben. Met de opdracht ntfy user add --role=admin admin voeg je dan een admin-gebruiker met de naam admin toe. Gebruikers met de rol admin kunnen op alle onderwerpen publiceren en zich erop abonneren. Geef de gebruiker een wachtwoord en bevestig.

Klik nu in de webinterface van ntfy links op Settings en dan onder Manage users op Add user. Vul de url van je ntfy-server in, de gebruikersnaam admin en het wachtwoord dat je zojuist hebt ingesteld. Klik dan links op Subscribe to topic. Kies een naam of klik op Generate name om ntfy een willekeurige naam te laten kiezen en abonneer je dan op het onderwerp met Subscribe. Klik dan op Publish notification en vul hetzelfde onderwerp in. Voer ook een titel en een bericht voor je notificatie in en klik op Send. Als alles goed gaat, verschijnt je testbericht nu in een 'conversatie' met de naam van het onderwerp, en wijst je webbrowser je op een notificatie.

Gebruikersrechten

De webapplicatie is leuk voor een test, maar een mobiele app is vaak handiger. De app van Ntfy voor Android en iOS stelt je in staat om op je telefoon je te abonneren op onderwerpen (publiceren is niet mogelijk) en daarvoor notificaties te ontvangen. Als je de Android-app via F-Droid installeert, is dat zonder ondersteuning voor Firebase; de versie op Google Play gebruikt wél de servers van Google. Je maakt voor je app bij voorkeur een gebruiker aan die alle onderwerpen alleen kan lezen. Dat doe je weer in de shell van de container van ntfy met ntfy user add android om de gebruiker android aan te maken (voer een wachtwoord in) en dan ntfy access android "*" read-only voor de leesrechten.

Open daarna de Android-app en tik op de drie stippen rechtsboven. Kies Settings en stel dan Default server in op het domein van je ntfy-server. Tik daarna op Manage users en Add new user en vul de url van je ntfy-server in, de gebruikersnaam android en het bijbehorende wachtwoord. Tik dan op Add user. Keer dan terug naar het hoofdscherm van de app en klik op het plusicoontje rechtsonder. Voer het onderwerp in dat je tijdens de test in stap 5 hebt gebruikt en tik op Subscribe om je erop te abonneren. Vanaf nu zal de app voor elk ontvangen bericht op dit onderwerp een notificatie tonen. Je krijgt zelfs de al verzonden berichten te zien. Overigens toont de app twee waarschuwingen. Voor betrouwbare notificaties volg je de suggesties om batterijoptimalisaties uit te schakelen en naar WebSockets over te schakelen in plaats van een http-stream.

Shellscripts

Nu je hebt getest dat je ntfy-server werkt, is het tijd om je eigen services notificaties te laten uitsturen. Hoe je dat precies configureert, hangt van de service af. Maar je zult altijd eerst een gebruiker met schrijfpermissies voor een specifiek onderwerp moeten aanmaken. Voor een back-upproces dat je op de hoogte moet houden van de status van je back-ups, maak je bijvoorbeeld een gebruiker aan met de opdracht ntfy user add backup in de container van ntfy. Geef die dan schrijfrechten op het onderwerp backup met ntfy access backup backup write-only.

Het publiceren van een bericht op een specifiek onderwerp behelst niet meer dan het sturen van een http POST-aanvraag naar de webserver. Dat kan bijvoorbeeld in een shellscript op je Linux-server met de opdracht curl:

curl -u backup:password -d "Backup successful" ntfy.example.com/backup

Als je in de ntfy-app op je telefoon je op dit onderwerp abonneert, ontvang je deze notificatie nadat het back-upscript is uitgevoerd. Op deze manier is het heel eenvoudig om je eigen shellscripts notificaties te laten verzenden.

Berichten met extra's

Ntfy ondersteunt talloze extra functies om je berichten te laten opvallen of om hun gedrag aan te passen. Je gebruikt deze allemaal door een http-header aan je aanvraag toe te voegen. Zo kun je aan de notificaties van je back-upscript een titel, prioriteit en tags toevoegen. De tags worden als pictogrammen getoond door de mobiele app. Een voorbeeld:

curl -u backup:password -H "Title: Backup failure" -H "Priority: urgent" -H "Tags: warning,skull" -d "Backup unsuccessful" ntfy.example.com/backup

Als de Android-app een bericht met standaardprioriteit ontvangt, doet ze je telefoon kort vibreren en speelt ze een kort geluidje af. Door de prioriteit op urgent te zetten, wordt het standaardnotificatiegeluidje vergezeld van een langer getril van je telefoon, waardoor je onmiddellijk merkt dat dit dringend je aandacht vereist.

Plaatjes en lay-out

Ntfy kan ook plaatjes sturen, bijvoorbeeld een foto van een ip-camera die beweging detecteert, maar niet in combinatie met een tekstbericht. Om een bestand naar ntfy te uploaden met curl in een http PUT-aanvraag gebruik je de optie -T en de bestandsnaam. Met de header Filename voeg je de bestandsnaam toe die de ntfy-app je moet tonen. Dat ziet er dan als volgt uit:

curl -u admin:password -T foto.jpg -H "Filename: beweging.jpg" -H "Title: Beweging voordeur" -H "Tags: boom" ntfy.example.com/beweging

Als je een tekstbericht als Markdown opmaakt, kun je wel plaatjes in een tekst opnemen, maar dan moet je naar het bestand linken. Alleen ntfy's webinterface ondersteunt dit; de mobiele app toont gewoon de Markdown-brontekst. Een Markdown-bericht stuur je door de header Markdown: yes of Content-Type: text/markdown aan je http POST-aanvraag toe te voegen. Ntfy ondersteunt overigens alleen beperkte Markdown-functies, zoals vette en schuine tekst, lijsten, links en afbeeldingen.

Acties

Je ontvangt de notificaties van ntfy in de app in een 'conversatie' per onderwerp. Wanneer je op een notificatie tikt, kopieert dit standaard gewoon de tekst van het bericht naar het klembord. Als je de header Click: URL toevoegt, opent de app die url wanneer je op de notificatie tikt. Zo kun je in een notificatie van je back-upscript bijvoorbeeld een link naar de webinterface van je back-upserver opnemen om het gemelde probleem snel te onderzoeken.

Je kunt ook tot drie 'actieknoppen' definiëren, die dan onderaan een notificatie verschijnen. Door op een van die knoppen te tikken, open je een website of app, activeer je een Android broadcast intent waarop andere apps dan weer kunnen reageren, of zend je een http POST-, PUT- of GET-aanvraag. De manier om dit alles te definiëren is wat omslachtig, maar wordt volledig in de documentatie van ntfy uitgelegd.

Python-code

Curl is natuurlijk niet de enige tool waarmee je notificaties naar je ntfy-server kunt sturen. Sommige tools bieden rechtstreeks ondersteuning voor notificaties via ntfy. Dan hoef je alleen maar het domein van je server, het onderwerp, de gebruikersnaam en het bijbehorende wachtwoord in te vullen. Maar ook in je eigen Python-scripts kun je eenvoudig ondersteuning voor ntfy inbouwen. Dat gaat via het pakket Requests, waarmee je http POST-aanvragen naar de server stuurt. Een eenvoudig voorbeeld ziet er als volgt uit:

import requests

requests.post("http://ntfy.example.com/backup",

    data="Backup unsuccessful",

    headers={

        "Authorization": "Basic Z2VicnVpa2Vyc25hYW06d2FjaHR3b29yZA==",

        "Title": "Backup failure",

        "Priority": "urgent",

        "Tags": "warning,skull"

    })

Met de header Authorization stel je http Basic-authenticatie in. De tekenreeks die na Basic komt, is een Base64-codering van de gebruikersnaam en het wachtwoord met een dubbele punt ertussen. Je creëert die codering op je Linux-systeem met de opdracht echo "Basic $(echo -n 'gebruikersnaam:wachtwoord' | base64)".

En verder

Ntfy biedt een betrouwbare manier om notificaties van allerlei services te centraliseren, terwijl je zelf de volledige controle behoudt. Het programma blinkt uit in flexibiliteit om het overal in te integreren. Als een service bijvoorbeeld geen http POST-aanvragen ondersteunt, kun je ook http GET-aanvragen doen. En als een service je niet de mogelijkheid geeft om de headers aan te passen, laat ntfy je toe om de berichten inclusief headers in JSON-formaat door te sturen. En als een service webhooks ondersteunt maar daarvoor zijn eigen JSON-formaat gebruikt, kan ntfy die met berichtsjablonen omzetten naar leesbare berichten.

Ook via e-mail is ntfy te integreren. Je kunt bijvoorbeeld berichten die op je ntfy-server aankomen automatisch laten doorsturen naar een SMTP-server om ze ook als e-mail te ontvangen. Maar ook de andere richting is voorzien: ntfy kan dan zelf een ingebouwde SMTP-server draaien, handig voor services die alleen maar notificaties via e-mail ondersteunen. Elk onderwerp op de ntfy-server heeft dan een bijbehorend e-mailadres op je domein. De service hoeft dan alleen maar een e-mail naar dat adres te sturen om berichten op dat onderwerp te publiceren op je ntfy-server. Deze en andere geavanceerde functies zijn uitgebreid gedocumenteerd op de website van ntfy.