В Chrome 111 под Origin Trial или за флагом
chrome://flags/#document-picture-in-picture-api добавили очень крутое внедрение. Теперь можно делать отдельные плавающие окна для ваших веб-приложений, которые живут поверх всех вкладок. Уверен, вы видели такое раньше для видео, но теперь можно внутрь этих маленьких окошек помещать почти полноценное веб-приложение.Особенности приложений внутри PiP:
- PiP-окно плавает поверх всех окон.
- PiP-окно закрывается сразу же вместе с окном, из которого оно было вызвано.
- Из PiP нельзя открывать другие окна.
- Внутри PiP не работает навигация (нельзя переходить по ссылкам).
- Из вызывающего окна нельзя управлять позицией PiP на экране.
В подкасте я уже говорил про то, что есть опасения по поводу применения этой технологии для назойливой рекламы. Но немного подумал и понял, что хуже не станет. PiP уже давно работает для видео, так что возможностей надоесть пользователям было много. Но то, что внутри PiP не работает навигация, делает такие окна бесполезными для рекламы, где нужен пользовательский клик.
Работать с таким окном несложно, в статье есть подробные примеры кода, как определить поддержку фичи, как открыть окно и установить его размер, как отслеживать события внутри окна, и так далее. Везде нужно работать с новым свойством
window.documentPictureInPicture. Забавно выглядит свойство window.documentPictureInPicture.window, которое возвращает текущее PiP-окно.Фича однозначно полезная. Когда появились первые PiP-видео, я всё ждал, что большие стриминговые сервисы их поддержат. Прошло несколько лет, но тем же Netflix важно оставаться внутри их собственного плеера, у которого есть как хорошая поддержка доступности, так и взаимодействие с пользователем. Теперь им технически проще будет поддержать PiP для своего контента.
Ну а пример с Pomodoro-таймером в статье пленил сердечко. У меня есть несколько приложений, которые разработчикам пришлось заворачивать в Electron исключительно ради вот этого окошка поверх других окон. Скоро от них можно будет отказаться — люблю всё делать через браузер.
https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
