Tauche ein in eine fantastische Sammlung neuer Muster für tolle Apps, einschließlich Zwischenablage-, Datei- und App-Mustern.
Ganz gleich, was Sie entwickeln – ob es sich um eine Videobearbeitungs-App der nächsten Generation, ein fesselndes Wortspiel oder eine zukünftige Online-App für soziale Netzwerke handelt – Sie benötigen immer ein paar grundlegende Bausteine:
- In der App zur Videobearbeitung können Nutzer das bearbeitete Video wahrscheinlich speichern.
- Der Nutzer kann in Ihrem Spiel vielleicht den Spielfortschritt mit Freunden teilen.
- In einer Online-App für soziale Netzwerke können Nutzer höchstwahrscheinlich Bilder in einen Beitrag einfügen.
Es gibt keine universelle Möglichkeit, diese Muster zu erkennen
Das waren nur einige Beispiele für solche Muster – und es gibt noch viele mehr. Aber alle diese Dinge haben eines gemeinsam: Es gibt keine universelle Methode, sie umzusetzen.
Freigabefortschritt
Die Web Share API wird beispielsweise nicht in allen Browsern implementiert. Daher müssen Sie in einigen Fällen auf einen anderen Ansatz zurückgreifen, z. B. auf Web Intents von Twitter, oder Sie kopieren in die Zwischenablage. Dies ist der Ansatz, der in Wordle gewählt wird, wenn die Web Share API nicht implementiert ist. Puh, das hab ich kaum:
Wordle 471 6/6
⬛⬛⬛⬛🟨
🟩⬛⬛⬛🟨
🟩🟩🟩⬛⬛
🟩🟩🟩⬛⬛
🟩🟩🟩🟩⬛
🟩🟩🟩🟩🟩
Dateien werden gespeichert
Zum Speichern empfiehlt sich die Verwendung der File System Access API. Sie erhalten dann eine FileSystemFileHandle, mit der Sie einen echten Speicher-, Bearbeitungs- und Speichervorgang implementieren können. Als Nächstes sollten Sie auf ein klassisches <a download> zurückgreifen, mit dem der Nutzer Daten speichern kann. Allerdings hat der Nachteil, dass bei jedem Download neue Dateien erstellt werden, sodass am Ende my-video.mp4, my-video (1).mp4, my-video (2).mp4 usw. entstehen.
Bilder werden eingefügt
Zum Abschluss der einführenden Beispiele unterstützen nicht alle Browser das Einfügen von Bildern in eine Webanwendung. Sie können also auf die Drag-and-drop API oder die Anzeige einer Dateiauswahl zurückgreifen. Das ist zwar nicht so elegant wie die Async Clipboard API, funktioniert aber zumindest.
Die neuen Muster
Die neuen Musterabschnitte sind:
Muster der Zwischenablage
Zwischenablagenmuster für alles, was mit der Systemzwischenablage zu tun hat, z. B. das Kopieren und Einfügen verschiedenster Dinge.
Dateimuster
Dateimuster für alles, was mit Dateien und Verzeichnissen zu tun hat: Speichern, Öffnen, Drag-and-drop, Empfangen oder Freigeben.
Muster für Web-Apps
Web-App-Muster für alles, was mit erweiterten App-Funktionen zu tun hat, z. B. das Bereitstellen von App-Verknüpfungen, die regelmäßige Synchronisierung von Daten im Hintergrund, die Anzeige von App-Logos und vieles mehr.
Feedback
Ich hoffe, dass dir diese Muster dabei helfen, tolle Apps zu erstellen, und freue mich auf dein Feedback!
Sie können uns Feedback geben, indem Sie einen Tweet an @ChromiumDev senden oder ein Problem melden. Füge in beiden Fällen das Tag @tomayac hinzu, damit ich es sehen kann.
Danksagungen
Ich bin Joe Medley für seine Hilfe beim Überprüfen und Bearbeiten der Muster dankbar. Wir danken Pete LePage, Ewa Gasperowicz, Rachel Andrew, Ken Pascal und Matthias Rohmer für ihre technische und organisatorische Unterstützung und ihren Mut zur Umsetzung. Ohne die Autoren der einzelnen Muster wie Harry Theodoulou, Tony Conway, Palances Liao, Cecilia Cong, François Beaufort und Joe Medley wäre das gesamte Musterprojekt nicht möglich gewesen.