Firefox 151 Introduces Document Picture-in-Picture API
A new API for creating web widgets
1Definition of the New API
The Document Picture-in-Picture API, introduced with Firefox 151, differs from the traditional Picture-in-Picture API by allowing any HTML content to be displayed in a floating window, not just videos. This enables users to continue viewing content even when switching browser tabs or OS windows. The API is ideal for creating widgets like stock tickers, live chats, and notes.
2Use Cases
The Document Picture-in-Picture API offers various use cases. Users can display content such as stock tickers, live chats, playlists, to-do lists, and notes in floating windows. This feature provides a significant advantage for users who multitask. The API can be easily integrated using HTML, CSS, and JavaScript.
3Technical Details
The API allows creating a Document Picture-in-Picture window and inserting HTML, CSS, and JavaScript into it. For example, it's possible to clone a stock ticker from the main document and place it in a DPIP window. Media queries and pseudo-classes can be used to write custom CSS for the DPIP window. However, removing an HTML component from its context may break the CSS.
4Browser Support
The Document Picture-in-Picture API is currently supported only by Chrome and Firefox. It's important to note that Safari does not support this API yet. Additionally, the API must be opened in debug mode to work, as it doesn't function in nested browsing contexts like CodePen iframes. Users should be aware of these limitations.
5JavaScript Implementation
JavaScript is used to check whether the API is supported. If the API is not supported, the relevant button can be removed. If supported, button clicks can be listened to create a DPIP window. Remember that the API works only on desktop versions. Various options are available to set the window's position and size.
6Creating a DPIP Window
The `requestWindow` method is used to create a DPIP window. This method accepts options like width, height, and window position. During window creation, users have the option to close or recreate an existing DPIP window. Since the method returns a Promise, using `async` and `await` is recommended.
7Cloning Content
The `cloneNode` method can be used to add content to the DPIP window. To clone multiple elements, `querySelectorAll` and `createDocumentFragment` can be used. This method is more performant as it triggers a single reflow. However, cloning all elements may not be necessary, so adjustments should be made based on needs.
8Conclusion and Recommendations
The Document Picture-in-Picture API provides web developers with a new tool to enhance user experience. However, browser support and technical limitations should be considered. Developers should take user needs and expectations into account when using this API. Future versions of the API are expected to include more features and broader support.