2

Apple активно развивает Safari — разбираем новые экспериментальные функции в iOS 13.5

Егор


Для различных новых фич, которые не до конца отлажены, Apple несколько лет назад создала в настройках Safari на iOS раздел с экспериментальными функциями. Их может включить любой желающий, но, разумеется, стоит понимать, что браузер после этого может начать работать нестабильно.

Обычно я рассказывал об этих функциях раз в год, после релиза новых мажорных версий системы, однако уже к iOS 13.5 в браузере набралось под два десятка нововведений в сравнении с iOS 13.0, некоторые из которых достаточно интересны, так что сегодня мы о них и поговорим.

Найти экспериментальные функции можно в разделе настроек браузера Safari > Дополнения > Experimental Features:



Теперь поговорим про каждую из них:
  1. @page CSS at-rule support — оператор, который «объясняет» CSS, что нужно делать. Каждый оператор начинается с «@», после чего следуют нескольких доступных ключевых слов, которые действуют как идентификатор того, что должен делать CSS.
  2. Accessibility Object Model — экспериментальный JavaScript API, который позволяет разработчикам изменять дерево доступности браузера, иными словами — новый удобный доступ к структуре сайта.
  3. Ad Click Attribution (Debug Mode) — новая функция конфиденциальности, которая позволяет подтвердить переход по рекламной ссылке, но при этом рекламодатель не получит никаких приватных данных о пользователе.
  4. Async Clipboard API — доступ к буферу обмена с помощью JavaScript. Дает возможность веб-приложениям читать и писать в системный буфер обмена.
  5. Automatic HTTPS upgrade — при включении этой опции Safari будет пытаться сначала загружать защищенную версию страницы и ее элементов (HTTPS), и только если их нет, будет открываться незащищенная HTTP-версия.
  6. Blank anchor target implies rel=noopener — замечали когда-нибудь, что при переходе по ссылке открывается еще одно окно с рекламой, а страница где вы нажали на ссылку меняется на фишинговую? Включение этой опции запретит изменять текущую страницу при нажатии на ссылку на ней. 
  7. Block top-level redirects in third-party iframes — тут все понятно просто по переводу, блокировка редиректов из сторонних фреймов. Иными словами, если при загрузке сайта подгрузился HTML-документ с другого сайта, то переходы по ссылкам в нем будут заблокированы.
  8. CSS Animations via Web Animations — анимации CSS силами JavaScript.
  9. CSS Custom Properties and values — так называемые пользовательские свойства CSS, позволяющие менять внешний вид элементов на странице после ее загрузки. Например, они позволяют просто и изящно сделать так, чтобы ссылка после загрузки страницы подсвечивалась зеленым, а после нажатия на нее — красным.
  10. CSS Painting API — часть низкоуровневого CSS Houdini, позволяющая программно рисовать на странице все, что душа пожелает. А с учетом того, что это JavaScript — нарисованное можно сделать динамическим. По сути очень похоже на API Canvas в HTML5, только реализовано иначе и может работать быстрее.
  11. CSS Shadow Parts — часть нового API Shadow DOM, которая позволяет виджетам пользовательского интерфейса (то есть элементам управления, таким как кнопки или полосы прокрутки) выглядеть слегка по-разному на разных устройствах, что важно для написания веб-приложений для целого зоопарка современных гаджетов.
  12. CSS Spring Animation — весна тут ни при чем, это функция, позволяющая сделать реалистичную с точки зрения физики анимацию элементов на сайтах.
  13. CSS Typed OM — говоря простым языком, это новая объектная модель, которая упрощает и ускоряет работу с объектами CSS: они теперь представляются в виде типизированных объектов JavaScript, что позволяет манипулировать с меньшим негативным влиянием на производительность (да и улучшается общая «читабельность» кода, упрощая поиск багов).
  14. Capture video in UIProcess информации о функции практически нет. Судя по всему, она позволяет захватывать окно браузера, а раз используется UI Process, то это происходит выше WebCore, что позволяет делать это быстрее и использовать преимущества многоядерных процессоров, иными словами это запись экрана в браузере с минимальной нагрузкой на систему.
  15. Dialog Element — очередное крайне расплывчатое описание. Если брать HTML, то под этим обычно подразумевают всплывающее окошко с подтверждением, например, банковского перевода или регистрации аккаунта.
  16. Disable Full 3rd-Party Cookie Blocking (ITP) — крайне небезопасная функция, отключающая Intelligent Tracking Prevention. Суть в том, что по умолчанию Safari блокирует куки от сторонних сайтов, не позволяя им следить за пользователем, при этом не ломая переходы между сайтами, например, при оплате. Соответственно, отключение этой опции позволит следить сторонним сайтам за вашими действиями в интернете.
  17. Disable Removal of Non-Cookie Data After 7 Days — сайты частенько хранят в памяти устройства не только куки, но и так называемый кэш (части страниц, например лого). Safari по умолчанию чистит эти файлы раз в неделю, чтобы сильно не захламлять накопитель. Соответственно, включение этой опции даст возможность хранить эти данные сколько угодно, но, разумеется, это приведет к серьезному потреблению памяти на накопителе браузером.
  18. Disable Web SQL — отключает специальное API веб-страниц для хранения данных в веб-браузере на основе SQL. С учетом того, что его уже почти 10 лет не развивают — давно пора.
  19. Disallow sync XHR during page dismissal — зачастую, дабы не потерять данные, когда пользователь закрывает страничку, сайты используют XMLHttpRequest, чтобы еще секунду продержать ее открытой и успеть отправить данные на сервер. На практике для пользователя обычно это выглядит как лаг при закрытии вкладки. Однако на практике механизм XHR уже устарел, и например в Chrome 80 и новее по умолчанию отключен. Теперь же его отключение тестирует и Apple с Safari.
  20. Fetch API Request KeepAlive — функция для сбора аналитики, работает даже тогда, когда сайт не был загружен до конца.
  21. Generic Text Track Cue API — функция, нужная для корректного отображения современных субтитров в видео или же для описаний медиа-файлов с ссылками, различными цветами и стилями текста и так далее.
  22. HDR Media Capabilities — опять не самое точное описание, но судя по всему это часть Media Capabilities API, которая запрашивает браузер, умеет ли он работать с HDR-контентом и в каком качестве и разрешении. 
  23. Highlight API — позволяет разработчикам более широко работать с текстом, не ограничиваясь возможностями браузера. Это нужно, например, для проверки орфографии на страницах, или же для распознавания текста на картинках.
  24. ImageBitmap — фунция, ускоряющая рендеринг графики на странице благодаря использованию многоядерности процессора и прямому доступу к «железу».
  25. Intersection Observer — позволяет асинхронно следить за тем, какие объекты и как взаимодействуют друг с другом на видимой области сайта. Это крайне важное нововведение для, например, бесконечных сайтов типа ленты ВК: теперь можно без серьезных затрат производительности понимать, что нужно отрисовывать сейчас, а что уже скрылось за экраном и его можно «выкинуть» из памяти, а что нужно показывать всегда (например, рекламный блок).
  26. IsLoggedin web API — новый API, который проверяет, вошел ли пользователь в систему (например, аккаунт), и позволяет браузеру оставлять вас залогиненными и при последующих заходах на этот сайт. К тому же он поддерживает некоторые дополнительные функции, например, автоматический выход по истечении определенного времени.
  27. Lazy Image Loading — подгрузка изображений только тогда, когда пользователь может их увидеть. Здорово экономит трафик и снижает время загрузки тяжелых страниц с множеством картинок.
  28. Link preload responsive images — функция, которая позволяет загружать в фоне так называемые гибкие изображения (те, которые умеют «подгоняться» под различные экраны).
  29. LinkPrefetch — низкоприоритетная ресурсная подсказка, позволяющая браузеру загружать в фоновом режиме (в свободное время) те ресурсы, которые могут пригодиться позже, и сохранять их на будущее в кэше браузера.
  30. MathML Core — позволяет точно визуализировать математические символы и формулы на веб-страницах с использованием XML-языка MathML.
  31. Media Capabilities Extensions — расширения, позволяющие определять сайту возможности устройства по кодированию и декодированию видео, тем самым позволяя, например, запускать воспроизведение видео в определенном качестве.
  32. MediaRecorder — интерфейс MediaStream API, позволяющий перехватывать аудио- или видеопоток и сохранять его на устройстве.
  33. NSURLSession WebSoket — функция для веб-разработчиков, позволяет передавать данные между сервером и приложением в том числе в фоновом режиме. Вообще появилась еще в iOS 7, однако поддержку WebSoket — то есть возможность получать ответы на основе событий без необходимости запроса ответов с сервера — добавили только сейчас.
  34. Pointer Events — свойство CSS, которое устанавливает, при каких обстоятельствах (если таковые имеются) конкретный графический элемент может работать ссылкой при нажатии на него.
  35. Quirk to prevent delayed initial painting on sites — разработчики Apple всегда радуют великолепными описаниями новых функций (дословно это переводится как «причуда для предотвращения начальной задержки при рисовании на сайтах»). Собственно, тут можно лишь предположить, что это убирает задержку при рисовании стилусом на страницах в интернете.
  36. Referrer Policy attribute — обычно, при переходе с одного сайта на другой, последний узнает, откуда к нему пришли — так и работает, например, Google Analytics. Для управления тем, передавать такую информацию или нет, и при каких условиях, и была придумана Referrer Policy. Увы, что дает включение этой опции в настройках Safari, неизвестно — Apple, как обычно, не дает никакой информации.
  37. Remote Playback API — позволяет управлять удаленным воспроизведением мультимедиа с веб-страницы. API позволяет анализировать подключенные удаленные устройства (например, телевизоры) и оптимизировать мультимедиа под них (например, если телевизор поддерживает HDR, то будет доступен соответствующий контент, даже если внутренний экран устройства поддерживает только SDR).
  38. Resize Observer — функция, позволяющая получать уведомление, когда какой-либо элемент на сайте изменяет свой размер. Нужна для того, чтобы если изменился размер окна браузера (например, вы повернули телефон набок), сайт не распадался на части, а корректно «пересобирался» снова. 
  39. Server Timing — удобный механизм для отладки, позволяющий понять на стороне сервера, сколько времени заняла загрузка и (или) отображение определенного элемента на сайте.
  40. Swap Processes on Cross-Site Navigation — функция сохраняет процессы на сайте при переходе с него по ссылке дальше, для того, чтобы если вы захотели вернуться назад, страница выглядела такой, какой вы ее оставили.
  41. Synthetic Editing Commands — увы, даже спустя полгода после появления информации об этой функции больше не стало. Из единственной темы на баг-трекере WebKit получилось узнать, что это как-то связано с жестами мыши в Safari.
  42. Visual Viewport API — механизм изменения свойств той части страницы, которая на данный момент находится на экране.
  43. Web Animations composite operations — опция включает анимации, которые влияют на свойства элементов. Например, иконка меняет цвет, когда вы ее двигаете. 
  44. Web Animation mutable timelines — тут перевод говорит сам за себя, эта функция позволяет синхронизировать и изменять анимации с привязкой ко времени (например, начать анимацию через секунду после загрузки страницы).
  45. Web Animations — включение анимации на сайтах, написанной на JavaScript. Без этой опции две выше работать не будут.
  46. Web Authentication — беспарольный вход на сайты с помощью сканера отпечатка пальца, Face ID и тому подобное. Не совсем понятно, зачем это нужно на iOS с ее Связкой ключей.
  47. WebGL 2.0 — библиотека для языка программирования JavaScript, позволяющая создавать на нем интерактивную 3D-графику.
  48. WebGPU — позволяет использовать графический процессор для отрисовки информации на сайтах.
  49. WebRTC DTMF — функция, нужная для IP-телефонии. Позволяет совершить набор номера так называемыми DTMF-кодами (Dual-Tone Multi-Frequency) — каждой кнопке телефона соответствует свой RTP-пакет, в котором содержится информация о нажатой клавише.
  50. WebRTC mDNS ICE candidates — вкратце, это технология защиты данных при связи peer-to-peer (между пользователями без использования серверов). В небезызвестном Telegram при звонке у обоих пользователей высвечиваются четыре смайлика, которые должны быть одинаковыми — это пример реализации этой технологии.
  51. requestIdleCallback — функция, которая сигнализирует сайту о простое браузера. Нужна веб-разработчикам для того, чтобы решать низкоприоритетные задачи в то время, когда пользователь не использует активно сайт, тем самым не снижая его юзабельность лишними задачами в то время, когда вы им активно пользуетесь.
Как видите, набралось больше 50 экспериментальных функций. В итоге Safari в тесте на поддержку стандартов html5 набирает по умолчанию 494 балла, а если включить все опции — 503:



Для сравнения, последний на данный момент десктопный Chrome 83 набирает 528 очков, так что разница невелика.
45
iGuides в Яндекс.Дзен —  zen.yandex.ru/iguides
iGuides в Telegram — t.me/iguides
iGuides в VK —  vk.com/iguides
iGuides в Ok.ru — ok.ru/iguides

Будь в курсе последних новостей из мира гаджетов и технологий

Мы в соцсетях

Комментарии

Esthet
+1862
Ништяк) спасибо за статью))))👍🏻
3 июня 2020 в 12:38
#
tellurian
+1264
Вот это дельная статья. Егор спасибо!
Побольше таких!
3 июня 2020 в 12:58
#
tellurian
+1264
Ради таких статей и нужен ресурс.
Амине только слухи и другие новости не о чем!
3 июня 2020 в 12:58
#
Mers
+5076
Ого! Однозначно в «запоминалки».👍
3 июня 2020 в 13:08
#
Hello!
+692
У меня запоминалка не работает, статьи пропадают.
3 июня 2020 в 16:28
#
Mers
+5076
Попробовал перейти к избранному. Оооочень долгая загрузка, не как обычно, но все же работает. Поломали приложение видимо. Одно лечат, другое калечат🤦🏻‍♂️
3 июня 2020 в 16:33
#
Hello!
+692
И текст не копируется, так бы в заметки закинул.
3 июня 2020 в 16:36
#
Mers
+5076
Текст никогда не копировался. Это тоже минус приложения.
3 июня 2020 в 16:48
#
Hello!
+692
Недавно удалял из избранного старье всякое, пять статей. Сейчас зашел, а они на месте 🤦🏻. Зато этой нет.
3 июня 2020 в 17:57
#
Mers
+5076
😂😂😂 мистика))
3 июня 2020 в 18:12
#
Bor™
+604
Не согласен.
3 июня 2020 в 20:49
#
Mers
+5076
Это в приложении? У меня на SE нельзя копировать.
3 июня 2020 в 21:11
#
Mers
+5076
А, ну в статье можно, а вот в отзывах нельзя.
3 июня 2020 в 21:12
#
Bor™
+604
Как бы не согласен. Давно уже копируется
3 июня 2020 в 20:49
#
Hello!
+692
У меня нет этого.
3 июня 2020 в 23:39
#
online
+168
Отлично, спасибо автору!
3 июня 2020 в 13:20
#
45th
+229
Спасибо!
3 июня 2020 в 14:22
#
+358
Очень интересно, но, простому пользователю не понятно.
3 июня 2020 в 16:05
#
–23
Согласен. Было бы не плохо расписать что-то типа «отключайте это» или «обязательно включайте» или разъяснить каждый пункт зачем нужен и как пригодится, как в некоторых пунктах автор и сделал, а пользователь сам решит.
Но всё равно статья хорошая, спасибо. Однозначно в избранное!
4 июня 2020 в 00:16
#
–23
Что за хрень? Вчера добавил статью в Избранное, сегодня её там нет!
Добавил в из ранете, затем проверил там ли статья и все норм, затем перезапустил приложение и опять пропала! (Старые избранные на месте)
iGuides ОБРАТИТЕ ВНИМАНИЕ!
4 июня 2020 в 09:42
#
Симон Симонян
+5
Наконец-то кто-то добрался до этой темы! У меня давно все включены и на iOS, и на macOS. Попугаи в browsermark взлетают, но теперь будет попонятнее в деталях. Спасибо!
4 июня 2020 в 00:16
#
Ckor_30
+681
Спасибо круто👍
4 июня 2020 в 12:15
#
Sorry
–20
8 июня 2020 в 01:14
#
melissa
–21
25 июня 2020 в 16:28
#