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 &LTa 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.

Advanced apps patterns #

Advanced 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, and Rachel Andrew for all their 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.