Building blocks for modern web apps
Whatever you are building—a video editor, a word game, or a social network—you will likely need a few common capabilities: saving files, sharing progress, and pasting images. Unfortunately, none of these have a single universal implementation across all browsers.
Take sharing progress. Not every browser supports the Web Share API, so you may need a fallback such as Twitter's Web Intents or copying to the clipboard, an approach used by Wordle when the Web Share API is unavailable. For saving files, the File System Access API is the preferred route because it returns a FileSystemFileHandle, enabling a true save-edit-save flow. The next best option is a classic <a download>, which works but creates a new file on each download, leaving users with my-video.mp4, my-video (1).mp4, and so on. And for pasting images, when the Async Clipboard API is not supported, you can fall back to the Drag and Drop API or a file picker—less elegant but functional.
The new pattern collections
These are just a few examples of reoccurring tasks that lack a universal solution. To help address this, new pattern collections are now available, grouped into three areas.
Clipboard patterns
The clipboard patterns cover everything related to the system clipboard, from copying to pasting various types of content.
Files patterns
The files patterns address everything concerning files and directories, including saving, opening, dragging and dropping, receiving, and sharing.
Web apps patterns
The web apps patterns deal with advanced app features such as app shortcuts, background data synchronization, and app badges.
