Hello.

I am Paul Kinlan.

A Developer Advocate for Chrome and the Open Web at Google.

Debugging Web Pages on the Nokia 8110 with KaiOS using Chrome OS

Paul Kinlan

Dieser Beitrag ist eine Fortsetzung des Beitrags zum Debuggen eines KaiOS device with Web IDE , aber anstelle von macOS können Sie jetzt Chrome OS (m75) mit Crostini verwenden. Ich schaue nach KaiOS Environment Setup was ein guter Anfang ist, aber nicht genug, um mit Chrome OS und Crostini loszulegen. Unten ist der grobe Leitfaden, dem ich gefolgt bin. Vergewissern Sie sich, dass Sie mindestens Chrome OS m75 (derzeit am 15.

Read More

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

New WebKit Features in Safari 12.1 | WebKit

Paul Kinlan

Große Updates für die neueste Safari!

Ich dachte, dass dies eine ziemlich große Ankündigung war, und das Gegenteil von Google, das vor einiger Zeit sagte, dass Google Pay Lib der empfohlene Weg ist, um Zahlungen zu implementieren … Ich meine, es ist keine Million Meilen entfernt, Google Pay ist darauf aufgebaut der Zahlungsaufforderung, aber es ist nicht zuerst PR.

Payment Request is now the recommended way to pay implement Apple Pay on the web.

Read full post .

Und meine Lieblingsfunktion angesichts meiner Geschichte mit Web Intents.

Web Share API

The Web Share API adds navigator.share(), a promise-based API developers can use to invoke a native sharing dialog provided the host operating system. This allows users to share text, links, and other content to an arbitrary destination of their choice, such as apps or contacts.

Jetzt nur um die Share Target API zu erhalten und wir sind auf einem Gewinner! :)

Offline fallback page with service worker

Paul Kinlan

Vor einigen Jahren habe ich untersucht, wie native Anwendungen auf mangelnde Netzwerkkonnektivität reagierten. Ich habe zwar den Link zur Analyse verloren (ich könnte schwören, dass es auf Google+ war), die übergeordnete Erzählung lautete jedoch, dass viele native Anwendungen unlösbar mit dem Internet verbunden sind, dass sie einfach nicht funktionieren. Klingt nach einer Menge Web - Apps, was sie jedoch vom Web abhebt, ist, dass die Erfahrung immer noch "on - brand" ist. Bart Simpson würde Ihnen sagen, dass Sie online sein müssen (zum Beispiel) und trotzdem für das Internet Bei der Mehrzahl der Web-Erlebnisse erhalten Sie einen 'Dino' (siehe Chrom: // Dino).

Wir arbeiten schon lange an Service Worker, und während immer mehr Sites von einem Service Worker kontrollierte Seiten haben, hat die überwiegende Mehrheit der Sites nicht einmal ein grundlegendes Fallback-Erlebnis, wenn das Netzwerk dies nicht tut verfügbar.

Ich fragte meinen guten Kumpel Jake, ob wir irgendwelche Anhaltspunkte dafür haben, wie man eine generische Fall-Back-Seite erstellt, unter der Annahme, dass man keine vollständig erste Offline-Erfahrung erstellen möchte, und innerhalb von 10 Minuten hatte er sie erstellt. Check it out .

Der Einfachheit halber habe ich den Code unten eingefügt, da er nur etwa 20 Zeilen lang ist. Es speichert die Offline-Assets zwischen, und dann wird bei jedem Abruf, der eine "Navigation" ist, der Abruf sehen, ob Fehler auftreten (aufgrund des Netzwerks), und dann die Offline-Seite anstelle des ursprünglichen Inhalts gerendert.

addEventListener('install', (event) => {
  event.waitUntil(async function() {
    const cache = await caches.open('static-v1');
    await cache.addAll(['offline.html', 'styles.css']);
  }());
});

// See https://developers.google.com/web/updates/2017/02/navigation-preload#activating_navigation_preload
addEventListener('activate', event => {
  event.waitUntil(async function() {
    // Feature-detect
    if (self.registration.navigationPreload) {
      // Enable navigation preloads!
      await self.registration.navigationPreload.enable();
    }
  }());
});

addEventListener('fetch', (event) => {
  const { request } = event;

  // Always bypass for range requests, due to browser bugs
  if (request.headers.has('range')) return;
  event.respondWith(async function() {
    // Try to get from the cache:
    const cachedResponse = await caches.match(request);
    if (cachedResponse) return cachedResponse;

    try {
      // See https://developers.google.com/web/updates/2017/02/navigation-preload#using_the_preloaded_response
      const response = await event.preloadResponse;
      if (response) return response;

      // Otherwise, get from the network
      return await fetch(request);
    } catch (err) {
      // If this was a navigation, show the offline page:
      if (request.mode === 'navigate') {
        return caches.match('offline.html');
      }

      // Otherwise throw
      throw err;
    }
  }());
});

Das ist alles. Wenn der Benutzer online ist, wird die Standardeinstellung angezeigt.

Wenn der Benutzer offline ist, erhält er die Fallback-Seite.

Ich finde dieses einfache Skript unglaublich mächtig und ja, obwohl es immer noch verbessert werden kann, glaube ich, dass selbst eine einfache Änderung in der Art und Weise, wie wir mit unseren Benutzern sprechen, wenn ein Problem mit dem Netzwerk vorliegt, die Möglichkeit hat, sich grundlegend zu verbessern die Wahrnehmung des Webs für Benutzer auf der ganzen Welt.

** Update ** Jeffrey Posnick erinnerte mich an die Verwendung von Navigation Preload, um nicht auf alle SW-Boot-Vorgänge warten zu müssen. Dies ist besonders wichtig, wenn Sie nur failed-Netzwerkanforderungen steuern.

testing block image upload

Paul Kinlan

Dies ist nur ein Test, um zu sehen, ob ich das Bild richtig hochgeladen habe. Wenn Sie das sehen, habe ich es ja getan :)

Read More

Editor.js

Paul Kinlan

Ich habe ein Update von Hugo-Editor vorgenommen, um zu versuchen, EditorJS als Editor für das Blog zu verwenden.

Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor’s Core.

Read full post .

Ich denke es funktioniert.

Ich habe ein wenig mit der Codebase zu kämpfen, die Beispiele verwenden alle ES-Module, jedoch wird der NPM-Dist nur im IIFE-ES5-Code ausgegeben. Aber nachdem ich diese Hürde genommen hatte, war es ziemlich einfach, eine Benutzeroberfläche zu erstellen, die eher wie ein Medium aussieht.

Debugging Web Pages on the Nokia 8110 with KaiOS

Paul Kinlan

Wir haben in letzter Zeit viel an Feature-Handys entwickelt und es war hart, aber lustig. Das Schwierigste ist, dass wir unter KaiOS das Debuggen von Webseiten nicht finden konnten, insbesondere auf der Hardware, die wir hatten (Das Nokia 8110). Das Nokia ist ein großartiges Gerät, es ist mit KaiOS gebaut, von dem wir wissen, dass es auf einer Art Firefox 48 basiert, aber es ist gesperrt. Es gibt keinen herkömmlichen Entwicklermodus wie bei anderen Android-Geräten, was bedeutet, dass Sie keine Verbindung mit Firefox herstellen können Einfach WebIDE.

Read More

Object Detection and Augmentation

Paul Kinlan

Ich habe viel mit dem Shape Detection API in Chrome Shape Detection API und ich mag das Potenzial, das es bietet, sehr. Zum Beispiel ein sehr einfaches QRCode detector ich vor langer Zeit geschrieben habe, verfügt über eine JS-Polyfill, verwendet jedoch die new BarcodeDetector() API, falls verfügbar.

Einige der anderen Demos, die ich hier aufgebaut habe, können Sie mit den anderen Funktionen der Face Detection API sehen: Face Detection , Barcode Detection und Text Detection .

Ich war angenehm überrascht, als ich am Wochenende über Jeeliz stolperte, und ich war unglaublich beeindruckt von der Leistung ihres Toolkits - vorausgesetzt, ich habe einen Pixel3 XL verwendet, aber die Erkennung von Gesichtern schien wesentlich schneller zu sein, als dies mit der FaceDetector API möglich FaceDetector .

Checkout some of their demos .

Ich habe viel darüber nachgedacht. Dieses Toolkit für die Objekterkennung (und ähnliche) verwendet APIs, die im Web allgemein verfügbar sind, insbesondere Camera access, WebGL und WASM. Diese Funktionen unterscheiden sich von der Shape-Erkennungs-API von Chrome (die nur in Chrome und nicht auf allen Plattformen, auf denen sich Chrome befindet, konsistent sind ) kann verwendet werden, um auf einfache Weise umfassende Erfahrungen zu erstellen und Milliarden von Benutzern mit einer konsistenten Erfahrung auf allen Plattformen zu erreichen.

Augmentation ist der Punkt, an dem es interessant wird (und wirklich das, was ich in diesem Beitrag vorzeigen wollte) und wo Sie Middleware-Bibliotheken benötigen, die jetzt auf die Plattform kommen. Wir können die lustigen, sneakers-ähnlichen Gesichtsfilter-Apps erstellen, ohne dass Benutzer MASSIVE-Apps installieren das Sammeln einer riesigen Datenmenge vom Benutzergerät (da dem System kein Zugriff zugrunde liegt).

Außerhalb der lustigen Demos können sehr fortgeschrittene Anwendungsfälle für den Benutzer schnell und einfach gelöst werden, z.

  • Textauswahl direkt von der Kamera oder Foto vom Benutzer
  • Live-Übersetzung von Sprachen aus der Kamera
  • Inline QRCode Erkennung, damit die Leute nicht ständig WeChat öffnen müssen :)
  • Extrahieren Sie Website-URLs oder Adressen automatisch aus einem Bild
  • Erkennung von Kreditkarten und Entnahme von Nummern (Benutzer können sich schneller auf Ihrer Website anmelden)
  • Visuelle Produktsuche in der Web-App Ihres Shops.
  • Barcode-Suche nach weiteren Produktdetails in der Web-App Ihres Stores.
  • Schnelles Zuschneiden von Profilfotos auf die Gesichter von Personen.
  • Einfache A11Y-Funktionen, damit der Benutzer den in Bildern gefundenen Text hören kann.

Ich habe gerade fünf Minuten damit verbracht, über diese Anwendungsfälle nachzudenken - ich weiß, dass es noch viel mehr gibt -, aber es hat mich aufgefallen, dass wir nicht viele Websites oder Web-Apps sehen, die die Kamera verwenden Benutzer müssen eine App herunterladen, und ich denke nicht, dass wir das noch tun müssen.

** Update ** Thomas Steiner in unserem Team erwähnte in unserem Team-Chat, dass es klingt, als würde mir die aktuelle ShapeDetection API nicht gefallen. Ich liebe die Tatsache, dass diese API uns Zugriff auf die The Lumpy Web Versandimplementierungen der jeweiligen Systeme The Lumpy Web Wie ich jedoch in The Lumpy Web schrieb, The Lumpy Web Webentwickler nach Konsistenz in der Plattform und es gibt eine Reihe von Problemen mit der Shape-Erkennungs-API zusammengefasst werden als:

  1. Die API ist nur in Chrome verfügbar
  2. Die API in Chrome unterscheidet sich auf allen Plattformen erheblich, da die zugrunde liegenden Implementierungen unterschiedlich sind. Android hat nur Punkte für Orientierungspunkte wie Mund und Augen, wo macOS Konturen hat. Bei Android gibt TextDetector den erkannten Text zurück, wohingegen er wie bei macOS einen 'Text Presence'-Indikator zurückgibt. Dabei werden nicht alle Fehler erwähnt, die Surma gefunden hat.

Das Web als Vertriebsplattform ist für Erfahrungen wie diese so sinnvoll, dass ich denke, es wäre ein Verdammnis, es nicht zu tun, aber die obigen zwei Gruppierungen von Fragen lassen mich die langfristige Notwendigkeit der Implementierung jedes Features in Frage stellen Die Webplattform nativ, wenn wir gute Lösungen in einem Paket implementieren könnten, das mit den heutigen Funktionen der Plattform wie WebGL, WASM und der zukünftigen Web-GPU ausgeliefert wird.

Jedenfalls liebe ich die Tatsache, dass wir dies im Internet tun können, und ich freue mich darauf, Websites mit ihnen zu sehen.

Got web performance problems? Just wait...

Paul Kinlan

Ich habe einen Tweet von einem guten Kumpel und Kollegen Mariko , in dem es darum ging, mit einer Reihe von Low-End-Geräten zu testen, was Sie wirklich auf dem Mariko hält.

Der Kontext des Tweets ist, dass wir untersuchen, wie Web Development aussieht, wenn Benutzer für Benutzer erstellen, die täglich mit diesen Geräteklassen leben.

Das Team arbeitet derzeit sehr viel in diesem Bereich, aber ich habe einen Tag damit verbracht, eine Website zu bauen, und es war unglaublich schwer, alles auf einem nur halbwegs vernünftigen Niveau funktionieren zu lassen.

  • Viewport-Kuriositäten und mysteriöse Wiedereinführung von 300ms Klickverzögerung (kann umgangen werden).
  • Große Neulackierung des gesamten Bildschirms, und es ist langsam.
  • Das Netzwerk ist langsam
  • Der Speicher ist eingeschränkt, und nachfolgende GCs sperren den Haupt-Thread für mehrere Sekunden
  • Unglaublich langsame JS-Ausführung
  • Die DOM-Manipulation ist langsam

Bei vielen Seiten, die ich erstellte, dauerte das Laden mehrerer Seiten, selbst bei einer schnellen WLAN-Verbindung, und die nachfolgenden Interaktionen waren einfach nur langsam. Es war schwer, den Versuch zu unternehmen, so viel wie möglich vom Hauptthread abzubringen, aber es war auch auf technischer Ebene unglaublich erfreulich, Änderungen in den Algorithmen und der Logik zu sehen, die ich bei meiner herkömmlichen Web-Entwicklung nicht gemacht hätte große leistungsverbesserungen.

Ich bin mir nicht sicher, was langfristig zu tun ist, ich vermute, dass eine große Bandbreite von Entwicklern, mit denen wir in den weiter entwickelten Märkten zusammenarbeiten, eine Reaktion haben wird: "Ich baue keine Websites für Nutzer in [Land x einfügen]" Auf hoher Ebene ist es schwer, mit dieser Aussage zu streiten, aber ich kann nicht die Tatsache ignorieren, dass jedes Jahr zehn Millionen neuer Benutzer zum Computing kommen und sie diese Geräte verwenden werden, und wir möchten, dass das Web die * Plattform * ist Die rise of the meta platform Wahl für Inhalte und Apps, damit wir mit dem rise of the meta platform nicht rise of the meta platform .

Wir werden noch lange Zeit die Leistung steigern müssen. Wir werden weiterhin Tools und Anleitungen erstellen, mit denen Entwickler schneller laden und reibungslose Benutzeroberflächen haben können :)

Browser Bug Searcher

Paul Kinlan

Ich habe gerade über einige work our team has done und ein Projekt von 2017 gefunden, das Robert Nyman und Eric Bidelman gegründet haben. Browser Bug Searcher! .

Es ist unglaublich, dass Sie mit nur wenigen Tastendrücken einen großartigen Überblick über Ihre bevorzugten Funktionen in allen großen Browser-Engines haben.

Source code available .

Dies hebt tatsächlich eines der Probleme hervor, die ich mit den Bug-Trackern von crbug und webkit habe, sie haben keine einfache Möglichkeit, Daten-Feeds in Formaten wie RSS abzurufen. Ich würde gerne meinen topicdeck Aggregator mit topicdeck usw. verwenden können. topicdeck habe ich ein Dashboard mit allen Dingen, die mich interessieren, basierend auf den neuesten Informationen der einzelnen Bug-Tracker.

Github's Web Components

Paul Kinlan

Ich war auf der Suche nach einem schnellen Markdown-Editor auf https://www.webcomponents.org/ damit ich das Posten in diesem Blog einfacher gestalten kann, und bin auf eine Reihe ordentlicher Komponenten von github .

Ich wusste, dass sie das <time-element> aber ich wusste nicht, dass sie so schöne und einfache nützliche Elemente haben.

London from Kingscross

The GDPR mess

Paul Kinlan

Die Art und Weise, wie wir (als Industrie) die Zustimmung der DSGVO umsetzen, ist ein Durcheinander. Ich bin mir nicht sicher, warum sich jemand für etwas anderes als "Nur notwendige Cookies verwenden" entscheiden sollte. Allerdings kann ich den Unterschied zwischen den beiden Optionen und dem Kompromiss zwischen den beiden Optionen nicht erkennen. Außerdem kann ich nur bestätigen, dass dies der Fall ist Verwenden Sie nur die notwendigen Cookies.

Read More

Brexit: History will judge us all

Paul Kinlan

Die Geschichte wird uns alle über dieses Durcheinander richten, und ich hoffe, es wird eine Fallstudie für alle über die Auswirkungen von Nationalismus, Eigeninteressen, Kolonialhassis und Promi-Affenfabrikation sein.

Fuckers

File Web Share Target

Paul Kinlan

Ich habe oft gesagt, dass Web-Apps, um effektiv in der Welt der Apps zu bestehen, in alle Orte integriert werden müssen, an denen Benutzer Apps erwarten. Inter-App-Kommunikation ist eines der wichtigsten fehlenden data out of their silo Webplattform. data out of their silo ist die gemeinsame Nutzung der nativen Ebenen eine der letzten fehlenden Funktionen: Web-Apps müssen in der Lage sein, data out of their silo in andere Websites und Apps zu integrieren.

Read More

Testing-file-share-target-from-camera

Paul Kinlan

Dies ist das Testen der Freigabe direkt von der Kamera-App. Es sieht so aus, als hätte es funktioniert :)

Read More

testing-file-share-target

Paul Kinlan

Dies ist ein Test der Share Target API auf Android und die Möglichkeit, Dateien gemeinsam zu nutzen. Wenn Sie hier etwas sehen, ist alles gut :)

Read More

Ricky Mondello: Adoption of Well-Known URL for Changing Passwords

Paul Kinlan

Ricky Mondello hatte kürzlich im Safari-Team eine Mitteilung darüber veröffentlicht, wie Twitter die Spezifikation ./well-known/change-password verwendet.

I just noticed that Twitter has adopted the Well-Known URL for Changing Passwords! Is anyone aware of other sites that have adopted it?

Twitter’s implementation: https://twitter.com/.well-known/change-password; Github’s: https://github.com/.well-known/change-password; Specification :https://github.com/WICG/change-password-url

Read full post .

Das Feature ist mir völlig übergangen, aber es ist eine nette Idee: Wenn eine Datei an einem bekannten Speicherort vorhanden ist, kann der Browser dem Benutzer eine Benutzeroberfläche bieten, mit der er sein Kennwort schnell zurücksetzen kann, ohne durch die komplexe Benutzeroberfläche der Website navigieren zu müssen.

Die Spezifikation ist täuschend einfach: Die bekannte Datei enthält lediglich die URL, über die der Benutzer zu dem Zeitpunkt gelangt, zu dem er die Aktion ausführen möchte. Dies führt mich zum Nachdenken, können wir weitere dieser Funktionen anbieten:

  • Bekannter Ort für DSPVO-basierte Einwilligungsmodelle (Cookie-Einwilligung) - Websitebesitzer können einen Link zu der Seite anbieten, auf der ein Benutzer alle Cookies und andere Dateneinwilligungselemente verwalten und möglicherweise widerrufen kann.
  • Bekannter Ort für die Verwaltung von Browser-Berechtigungen - Websitebesitzer können Benutzern einen schnellen Ort bieten, um Berechtigungen für Dinge wie Geo-Standort, Benachrichtigungen und andere Grundelemente zu widerrufen.
  • Ein bekannter Pfad zum Löschen und Ändern von Konten
  • Ein bekannter Pfad für die Verwaltung von Mailinglisten-Abonnements

Die Liste geht weiter … Ich mag die Idee, einfache Umleitungsdateien zu erstellen, um Benutzern zu helfen, häufige Benutzeraktionen zu erkennen, und dem Browser eine Möglichkeit zu bieten, sie aufzurufen.

pinch-zoom-element

Paul Kinlan

Jake und das Team erstellten dieses ziemlich beeindruckende benutzerdefinierte Element zum Verwalten des Pinch-Zooms in einem beliebigen HTML-Satz außerhalb der eigenen Pinch-Zoom-Dynamik des Browsers (z. B. Mobile Viewport Zooming). Das Element war eine der zentralen Komponenten, die wir für die von Chrome Dev Summit entwickelte und veröffentlichte squoosh App benötigten (… ich sage 'Chrome Dev Summit') - Jake zeigte es allen beim China Google Developer Day obwohl der Rest des Teams unter Embargo stand;) …)

install: npm install --save-dev pinch-zoom-element

<pinch-zoom>
  <h1>Hello!</h1>
</pinch-zoom>

Read full post .

Ich habe es gerade zu meinem Blog hinzugefügt (es dauerte nur ein paar Minuten). Sie können es in meinem life -Abschnitt life , wo ich Fotos weitergebe, die ich gemacht habe. Wenn Sie sich auf einem berührungsfähigen Gerät befinden, können Sie das Element schnell zusammenzoomen, wenn Sie ein Trackpad verwenden, das mit mehreren Fingereingaben umgehen kann, was ebenfalls funktioniert.

Dieses Element ist ein hervorragendes Beispiel dafür, warum ich Webkomponenten als Modell für die Erstellung von Komponenten der Benutzeroberfläche liebe. Das pinch-zoom Element ist knapp unter 3kb auf dem Draht (unkomprimiert) und minimiert die Abhängigkeiten für das Erstellen. Es macht nur eine Aufgabe außergewöhnlich gut, ohne dabei eine benutzerdefinierte Anwendungsebene zu binden, die die Verwendung erschwert (ich habe einige Gedanken zur UI-Logik vs App-Logikkomponenten, die ich basierend auf meinen Lernergebnissen aus der Squoosh-App freigeben werde).

Ich würde mir sehr freuen, wenn solche Elemente mehr Aufmerksamkeit und Bekanntheit erlangen würden. Ich könnte mir zum Beispiel vorstellen, dass dieses Element die Bildzoomfunktion ersetzen oder standardisieren könnte, die Sie auf vielen Commerce-Sites sehen, und den Entwicklern den Schmerz für immer nehmen wird.

Registering as a Share Target with the Web Share Target API

Paul Kinlan

Pete LePage führt die Web Share Target-API und die Verfügbarkeit in Chrome über einen Origin-Test ein

Until now, only native apps could register as a share target. The Web Share Target API allows installed web apps to register with the underlying OS as a share target to receive shared content from either the Web Share API or system events, like the OS-level share button.

Read full post .

Diese API ist ein Game-Changer im Web. Sie öffnet das Web für etwas, das für native Apps nur einmal verfügbar war: Native Sharing. Apps sind Silos, sie saugen alle Daten ein und machen es schwierig, plattformübergreifend zugänglich zu sein. Share Target fängt an, das Spielfeld zu nivellieren, damit das Web in demselben Spiel spielen kann.

Die already enabled Twitter Mobile hat Share Target already enabled . Dieser Beitrag wurde mit dem Share-Ziel erstellt, das ich im Administrationsbereich meiner Websites ' manifest.json ' manifest.json Es funktioniert ziemlich gut und manifest.json die Unterstützung für Dateien manifest.json , kann ich jedes Bild oder Blob auf meinem Gerät in meinem Blog veröffentlichen.

Sehr aufregende Zeiten.

Lesen Sie den verlinkten Beitrag, um mehr über die Zeitvorgaben für die Veröffentlichung dieser API und die Verwendung der API zu erfahren.

Why Build Progressive Web Apps: Push, but Don't be Pushy! Video Write-Up

Paul Kinlan

Ein großartiger Artikel sowie ein Video und ein Beispiel von Thomas Steiner zu guten Push-Benachrichtigungen im Web.

A particularly bad practice is to pop up the permission dialog on page load, without any context at all. Several high traffic sites have been caught doing this. To subscribe people to push notifications, you use the the PushManager interface. Now to be fair, this does not allow the developer to specify the context or the to-be-expected frequency of notifications. So where does this leave us?

Read full post .

Web Push ist eine erstaunlich leistungsfähige API, aber es ist einfach, Ihre Benutzer zu missbrauchen und zu ärgern. Das Schlechte an Ihrer Website ist, dass wenn ein Benutzer Benachrichtigungen aufgrund einer Eingabeaufforderung ohne Warnung blockiert, die Möglichkeit besteht, erneut zu fragen.

Behandeln Sie Ihre Benutzer mit Respekt. Context ist ein Muss für Web Push-Benachrichtigungen.