Dive into a fantastic collection of new patterns for amazing apps, including clipboard patterns, file patterns, and app patterns.
No matter what you build—be it a next generation video editing app, an addictive word game, or a future online social networking app—you will always find yourself in need of a few basic building blocks:
- The video editing app will probably allow the user to save the edited video.
- Your game will maybe allow the user to share game progress with friends.
- An online social networking app will highly likely allow the user to paste images into a post.
No universal way to realize these patterns
These were just a couple of examples of such patterns, and there are many more. But all of these have one thing in common: there is no universal way to realize them.
Sharing progress
For example, not all browsers implement the Web Share API, so in some cases you will have to fall back to a different approach, like Twitter's Web Intents, or copying to the clipboard, which is the approach chosen in Wordle when the Web Share API isn't implemented. Phew, barely got this one:
Wordle 471 6/6
⬛⬛⬛⬛🟨
🟩⬛⬛⬛🟨
🟩🟩🟩⬛⬛
🟩🟩🟩⬛⬛
🟩🟩🟩🟩⬛
🟩🟩🟩🟩🟩
Saving files
When it comes to saving, the go-to approach is to use the
File System Access API, so you end up with a FileSystemFileHandle, which
allows you to implement a true save, edit, save flow. The next
best thing is to fall back to a classic <a download>, which likewise lets the user save data, but
has the downside of creating new files on each download, so they end up with my-video.mp4,
my-video (1).mp4, my-video (2).mp4, etc.
Pasting images
To conclude the introductory examples, not all browsers support pasting images into a web app, so you can fall back to using the Drag and Drop API or showing a file picker, which is not as elegant as the Async Clipboard API, but at least it works.
The new patterns
With this out of the way, the new pattern sections are:
Clipboard patterns
Clipboard patterns for everything concerned with the system clipboard like copying and pasting of all sorts of things.
Files patterns
Files patterns for everything concerned with files and directories; be it saving, opening, dragging and dropping, receiving or sharing.
Web apps patterns
Web apps patterns for everything concerned with advanced app features like providing app shortcuts, periodically syncing data in the background, showing app badges, and many more.
Feedback
I hope these patterns will help you build amazing apps, and I'm looking forward to your feedback!
You can provide feedback by tweeting at @ChromiumDev or
filing an Issue. In both cases, tag
@tomayac to make sure I see it.
Acknowledgements
I'm grateful to Joe Medley for his help with reviewing and editing the patterns. Thanks to Pete LePage, Ewa Gasperowicz, Rachel Andrew, Ken Pascal, and Matthias Rohmer for all their technical and organizational support and encouragements to land this. The entire patterns project would not have been possible without the help of the authors of the individual patterns, namely Harry Theodoulou, Tony Conway, Palances Liao, Cecilia Cong, François Beaufort, and Joe Medley.