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

Егор


Уже несколько лет компания Apple перед добавлением новых фишек в Safari позволяет протестировать их всем желающим — находятся они в Настройках > Safari > Дополнения > Experimental Features:



Однако все также уже несколько лет сохраняется старая проблема — полное отсутствие описания этих функций, поэтому я в очередной раз составил их полный список, теперь уже для iOS 14, с краткими комментариями. Нужно понимать, что это не до конца протестированные нововведения, поэтому просто так включить их все не стоит — Safari может начать работать нестабильно. Лучше выбрать из списка ниже только те фишки, которые вам действительно интересны, и попробовать проверить их работу.
  1. @page CSS at-rule support — оператор, который «объясняет» CSS, что нужно делать. Каждый оператор начинается с «@», после чего следуют нескольких доступных ключевых слов, которые действуют как идентификатор того, что должен делать CSS.
  2. Accessibility Object Model — экспериментальный JavaScript API, который позволяет разработчикам изменять дерево доступности браузера, иными словами — новый удобный доступ к структуре сайта.
  3. Ad Click Attribution (Debug Mode) — новая функция конфиденциальности, которая позволяет подтвердить переход по рекламной ссылке, но при этом рекламодатель не получит никаких приватных данных о пользователе.
  4. Aspect ratio of <img> from width and height — позволяет браузеру динамически масштабировать картинки, чтобы, например, подгонять их под размер экрана.
  5. Async Clipboard API — доступ к буферу обмена с помощью JavaScript. Дает возможность веб-приложениям читать и писать в системный буфер обмена.
  6. Automatic HTTPS upgrade — при включении этой опции Safari будет пытаться сначала загружать защищенную версию страницы и ее элементов (HTTPS), и только если их нет, будет открываться незащищенная HTTP-версия.
  7. Blank anchor target implies rel=noopener — замечали когда-нибудь, что при переходе по ссылке открывается еще одно окно с рекламой, а страница где вы нажали на ссылку меняется на фишинговую? Включение этой опции запретит изменять текущую страницу при нажатии на ссылку на ней. 
  8. Block top-level redirects in third-party iframes — тут все понятно просто по переводу, блокировка редиректов из сторонних фреймов. Иными словами, если при загрузке сайта подгрузился HTML-документ с другого сайта, то переходы по ссылкам в нем будут заблокированы.
  9. CSS Animations via Web Animations — анимации CSS силами JavaScript.
  10. CSS Custom Properties and values — так называемые пользовательские свойства CSS, позволяющие менять внешний вид элементов на странице после ее загрузки. Например, они позволяют просто и изящно сделать так, чтобы ссылка после загрузки страницы подсвечивалась зеленым, а после нажатия на нее — красным.
  11. CSS Painting API — часть низкоуровневого CSS Houdini, позволяющая программно рисовать на странице все, что душа пожелает. А с учетом того, что это JavaScript — нарисованное можно сделать динамическим. По сути очень похоже на API Canvas в HTML5, только реализовано иначе и может работать быстрее.
  12. CSS Shadow Parts — часть нового API Shadow DOM, которая позволяет виджетам пользовательского интерфейса (то есть элементам управления, таким как кнопки или полосы прокрутки) выглядеть слегка по-разному на разных устройствах, что важно для написания веб-приложений для целого зоопарка современных гаджетов.
  13. CSS Spring Animations — весна тут ни при чем, это функция, позволяющая сделать реалистичную с точки зрения физики анимацию элементов на сайтах.
  14. CSS Typed OM — говоря простым языком, это новая объектная модель, которая упрощает и ускоряет работу с объектами CSS: они теперь представляются в виде типизированных объектов JavaScript, что позволяет манипулировать с меньшим негативным влиянием на производительность (да и улучшается общая «читабельность» кода, упрощая поиск багов).
  15. CSSOM View Smooth Scrolling — позволяет обеспечивать плавную динамическую прокрутку различных списков на видимой на экране части страницы силами JavaScript.
  16. Capture video in UI Process — информации о функции практически нет. Судя по всему, она позволяет захватывать окно браузера, а раз используется UI Process, то это происходит выше WebCore, что позволяет делать это быстрее и использовать преимущества многоядерных процессоров, иными словами это запись экрана в браузере с минимальной нагрузкой на систему.
  17. CoreImage-Accelerated Filter Rendering — позволяет аппаратно ускорять использование различных фильтров при рендеринге (например, эффект размытия фона при увеличении картинки на сайте).
  18. Defer async scripts until DOMContentLoaded — позволяет браузеру откладывать выполнение скриптов до начала момента загрузки внешних ресурсов, таких как стили или картинки. Это дает возможность быстрее выводить хоть какую-либо информацию на экран при загрузке страницы.
  19. Dialog Element — очередное крайне расплывчатое описание. Если брать HTML, то под этим обычно подразумевают всплывающее окошко с подтверждением, например, банковского перевода или регистрации аккаунта.
  20. Disable Full 3rd-Party Cookie Blocking (ITP) — крайне небезопасная функция, отключающая Intelligent Tracking Prevention. Суть в том, что по умолчанию Safari блокирует cookie от сторонних сайтов, не позволяя им следить за пользователем, при этом не ломая переходы между сайтами, например, при оплате. Соответственно, отключение этой опции позволит следить сторонним сайтам за вашими действиями в интернете.
  21. Disable Removal of Non-Cookie Data After 7 Days — сайты частенько хранят в памяти устройства не только куки, но и так называемый кэш (части страниц, например лого). Safari по умолчанию чистит эти файлы раз в неделю, чтобы сильно не захламлять накопитель. Соответственно, включение этой опции даст возможность хранить эти данные сколько угодно, но, разумеется, это приведет к серьезному потреблению памяти на накопителе браузером.
  22. Disable Web SQL — отключает специальное API веб-страниц для хранения баз данных в веб-браузере на основе SQL. С учетом того, что его уже почти 10 лет не развивают — давно пора.
  23. Disallow sync XHR during page dismissal — зачастую, дабы не потерять данные, когда пользователь закрывает страничку, сайты используют XMLHttpRequest, чтобы еще секунду продержать ее открытой и успеть отправить данные на сервер. На практике для пользователя обычно это выглядит как лаг при закрытии вкладки. Однако на практике механизм XHR уже устарел, и например в Chrome 80 и новее по умолчанию отключен. Теперь же его отключение тестирует и Apple с Safari.
  24. Fetch API Request KeepAlive — функция для сбора аналитики, работает даже тогда, когда сайт не был загружен до конца.
  25. Generic Text Track Cue API — функция, нужная для корректного отображения современных субтитров в видео или же для описаний медиа-файлов с ссылками, различными цветами и стилями текста и так далее.
  26. HDR Media Capabilities — опять не самое точное описание, но судя по всему это часть Media Capabilities API, которая запрашивает браузер, умеет ли он работать с HDR-контентом и в каком качестве и разрешении. 
  27. HTTP/3 — третья версия транспортного протокола HTTP. Вместо TCP использует QUIC, так что даже потеря части пакетов не приводит к задержке передачи данных. К тому же обновления протокола больше не привязаны к ОС (то есть не будет такого, что на Windows 7 условно через 5 лет перестанут открываться сайты).
  28. Highlight API — позволяет разработчикам более широко работать с текстом, не ограничиваясь возможностями браузера. Это нужно, например, для проверки орфографии на страницах, или же для распознавания текста на картинках.
  29. ImageBitmap — фунция, ускоряющая рендеринг графики на странице благодаря использованию многоядерности процессора и прямому доступу к «железу».
  30. In-Process Cookie Cache — функция опять же нужна в основном только «сервисописателям». Подходит для кэширования в нераспределенных системах, то есть приложения создают и управляют своими собственными или сторонними объектами кэша в выделенном для них пространстве памяти.
  31. Intersection Observer — позволяет асинхронно следить за тем, какие объекты и как взаимодействуют друг с другом на видимой области сайта. Это крайне важное нововведение для, например, бесконечных сайтов типа ленты ВК: теперь можно без серьезных затрат производительности понимать, что нужно отрисовывать сейчас, а что уже скрылось за экраном и его можно «выкинуть» из памяти, а что нужно показывать всегда (например, рекламный блок).
  32. IsLoggedin web API — новый API, который проверяет, вошел ли пользователь в систему (например, аккаунт), и позволяет браузеру оставлять вас залогиненными и при последующих заходах на этот сайт. К тому же он поддерживает некоторые дополнительные функции, например, автоматический выход по истечении определенного времени.
  33. Lazy Image Loading — подгрузка изображений только тогда, когда пользователь может их увидеть. Здорово экономит трафик и снижает время загрузки тяжелых страниц с множеством картинок.
  34. Link preload responsive images — функция, которая позволяет загружать в фоне так называемые гибкие изображения (те, которые умеют «подгоняться» под различные экраны).
  35. LinkPrefetch — низкоприоритетная ресурсная подсказка, позволяющая браузеру загружать в фоновом режиме (в свободное время) те ресурсы, которые могут пригодиться позже, и сохранять их на будущее в кэше браузера.
  36. Mask WebGL Strings — позволяет делать маски для строк (то есть, например, заменять вводимые символы звездочками или превращать «12» в «двенадцать») силами графического API WebGL.
  37. MathML Core — позволяет точно визуализировать математические символы и формулы на веб-страницах с использованием XML-языка MathML.
  38. Media Capabilities Extensions — расширения, позволяющие определять сайту возможности устройства по кодированию и декодированию видео, тем самым позволяя, например, запускать воспроизведение видео в определенном качестве.
  39. MediaRecorder — интерфейс MediaStream API, позволяющий перехватывать аудио- или видеопоток и сохранять его на устройстве.
  40. Modern WebAudio API — вообще WebAudio API нужен для манипуляции с аудио на странице (например, чтобы добавлять к нему дополнительные звуковые эффекты при кликах или же визуализировать). Что есть «Modern» («Современный») в данном случае сказать сложно.
  41. NSURLSession WebSoket — функция для веб-разработчиков, позволяет передавать данные между сервером и приложением в том числе в фоновом режиме. Вообще появилась еще в iOS 7, однако поддержку WebSoket — то есть возможность получать ответы на основе событий без необходимости запроса ответов с сервера — добавили только сейчас.
  42. Paint Timing — полезная для разработчиков функция, которая позволяет узнать, как долго со стороны клиента происходила отрисовка определенных частей страницы при минимальном влиянии на сам процесс.
  43. Quirk to prevent delayed initial painting on sites — разработчики Apple всегда радуют великолепными описаниями новых функций (дословно это переводится как «причуда для предотвращения начальной задержки при рисовании на сайтах»). Собственно, тут можно лишь предположить, что это убирает задержку при рисовании стилусом на страницах в интернете.
  44. ReadableByteStream — еще одна функция для разработчиков. Нужна, чтобы отслеживать ход загрузки данных с сервера. Позволяет отправлять ответ на сервер по частям, по мере поступления данных.
  45. Referrer Policy attribute — обычно, при переходе с одного сайта на другой, последний узнает, откуда к нему пришли — так и работает, например, Google Analytics. Для управления тем, передавать такую информацию или нет, и при каких условиях, и была придумана Referrer Policy. Увы, что дает включение этой опции в настройках Safari, неизвестно — Apple, как обычно, не дает никакой информации.
  46. Remote Playback API — позволяет управлять удаленным воспроизведением мультимедиа с веб-страницы. API позволяет анализировать подключенные удаленные устройства (например, телевизоры) и оптимизировать мультимедиа под них (например, если телевизор поддерживает HDR, то будет доступен соответствующий контент, даже если внутренний экран устройства поддерживает только SDR).
  47. Resize Observer — функция, позволяющая получать уведомление, когда какой-либо элемент на сайте изменяет свой размер. Нужна для того, чтобы если изменился размер окна браузера (например, вы повернули телефон набок), сайт не распадался на части, а корректно «пересобирался» снова. 
  48. SameSite strict enforcement (ITP) — позволяет принудительно запретить передачу любых cookie по запросу стороннего ресурса. Крайне небезопасная функция, может сломать даже картинки на странице, если они динамически подтягиваются со стороннего сервера. 
  49. Server Timing — удобный механизм для отладки, позволяющий понять на стороне сервера, сколько времени заняла загрузка и (или) отображение определенного элемента на сайте.
  50. Swap Processes on Cross-Site Navigation — функция сохраняет процессы на сайте при переходе с него по ссылке дальше, для того, чтобы если вы захотели вернуться назад, страница выглядела такой, какой вы ее оставили.
  51. Synthetic Editing Commands — увы, даже спустя год (!!) после появления этой экспериментальной функции информации о ней мало. EditingCommands представляет собой список команд для удобного редактирования документов (типа перехода к концу строки или новому абзацу). Что означает «Synthetic» («Синтетический») все еще не ясно — возможно, через год узнаем.
  52. Visual Viewport API — механизм изменения свойств той части страницы, которая на данный момент находится на экране.
  53. Web Animations composite operations — опция включает анимации, которые влияют на свойства элементов. Например, иконка меняет цвет, когда вы ее двигаете. 
  54. Web Animation mutable timelines — тут перевод говорит сам за себя: эта функция позволяет синхронизировать и изменять анимации с привязкой ко времени (например, начать анимацию через секунду после загрузки страницы).
  55. Web Animations — включение анимации на сайтах, написанной на JavaScript. Без этой опции две выше работать не будут.
  56. Web Authentication Local Authenticator — позволяет использовать локальную аутентификацию (например, датчик отпечатков или Face ID) для захода на сайты.
  57. Web Authentication — беспарольный вход на сайты с помощью сканера отпечатка пальца, Face ID и тому подобное. Если функция выше будет работать только на устройствах Apple, то эта — отраслевой стандарт, который уже работает в том же Chrome на Windows 10 при наличии на устройстве работающей Windows Hello.
  58. Web Share API Level 2 — позволяет делиться файлами из интернета через нативную опцию «Поделиться» в iOS. Level 1, работающий сейчас, позволяет таким образом передавать только ссылки, картинки и текст.
  59. WebGL 2.0 — библиотека для языка программирования JavaScript, позволяющая создавать на нем интерактивную 3D-графику.
  60. WebGPU — позволяет использовать графический процессор для отрисовки информации на сайтах.
  61. WebRTC H264 LowLatency encoder — позволяет стримить видео в H264 с низкой задержкой.
  62. WebRTC H265/VP9 codec — опять же передача видео методом peer-to-peer (то есть как torrent), только в формате H265 (HEVC) или VP9 (используется, например, на YouTube).
  63. WebRTC Platform Codecs in GPU Process — позволяет использовать аппаратное ускорение на GPU при работе с кодеками.
  64. requestIdleCallback — функция, которая сигнализирует сайту о простое браузера. Нужна веб-разработчикам для того, чтобы решать низкоприоритетные задачи в то время, когда пользователь не использует активно сайт, тем самым не снижая его юзабельность лишними задачами в то время, когда вы им активно пользуетесь.
В итоге получилось 64 функции — почти вдвое больше, чем годом ранее (36). Но, что достаточно забавно, браузер Safari теперь набирает в HTML5test 458 баллов, а если включить все функции выше (еще раз предупрежу, что не стоит этого делать на рабочем устройстве) — 469 баллов:



Однако годом ранее при всех включенных функциях на iOS 13 результат был ощутимо выше, 501 балл. Для сравнения, десктопный Chrome 85 набирает 525 баллов, так что отставание достаточно большое. Возможно, Apple просто поторопилась отключить некоторые старые функции, которые уже редко используются на сайтах, но учитываются при формировании результата теста. 
29
iGuides в Яндекс.Дзен —  zen.yandex.ru/iguides
iGuides в Telegram — t.me/iguides
iGuides в VK —  vk.com/iguides
iGuides в Ok.ru — ok.ru/iguides

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

Мы в соцсетях

Комментарии

СИМА
+749
Благодарю за статью, то что мне было необходимо для понимания фич💙
5 октября 2020 в 18:03
#
¯\_(ツ)_/¯
+1708
Спасибо.

7. Blank anchor target implies rel=noopener

У меня лично не работает... Все равно переходит в фоне на другой сайт.
5 октября 2020 в 18:19
#
Егор Морозов
+1764
Именно поэтому эта фишка является экспериментальной уже год)
5 октября 2020 в 18:27
#
+621
Я думал только у меня так сидишь на сайте.. уходишь в фон свернув открываешь и нет уже этого сайта
5 октября 2020 в 20:09
#
Mers
+5110
Егор, возможно ли создать рингтон на 5S с iOS12? Без ПК, Тунца и Гараж Банд?
5 октября 2020 в 18:30
#
+358
И без бубна:)
5 октября 2020 в 19:14
#
Mers
+5110
Пусть будет хоть два, но чтобы сделать))
5 октября 2020 в 19:30
#
Егор Морозов
+1764
Насколько мне известно — нет. Ну только если купить готовый в iTunes.
5 октября 2020 в 19:36
#
Mers
+5110
А передать его с одного i на другой i тоже никак?
5 октября 2020 в 19:59
#
tellurian
+1284
GarageBand.
Или на пк сделать.
Или просто скачать.
У вас вопрос так как нет пк?
5 октября 2020 в 20:13
#
Mers
+5110
У девушки нет ничего кроме i5S на iOS12. GB сейчас требует iOS 13.🤷🏻‍♂️
5 октября 2020 в 20:38
#
tellurian
+1284
Тогда купить за 18₽:) выбор хороший сейчас в магазине.
А так надо искать в интернете.
5 октября 2020 в 20:47
#
Mers
+5110
Ну там готовые, а ей нужен кусок. В инете не нашёл:(
5 октября 2020 в 20:49
#
tellurian
+1284
Тоже поискал. Везде 13 нужна :(
А то, что внутри приложений рингтоны обман :(
5 октября 2020 в 20:59
#
Егор Морозов
+1764
GB сейчас требует iOS 13.
Если он есть на учетной записи, то его всегда можно поставить из покупок на старое устройство — App Store скачает подходящую версию.
5 октября 2020 в 21:13
#
Mers
+5110
Наверное только так и придётся сделать, если она захочет. Девушки🤷🏻‍♂️
5 октября 2020 в 21:41
#
Esthet
+1860
А если попробовать вам сделать рингтон, затем создать семью, тоесть пригласить человека может он у нее появится? Или это только на покупки работает?
5 октября 2020 в 22:24
#
Mers
+5110
Я рингтон создал, но он только у меня и остался. На счёт семьи... даже без понятия. Никогда не сталкивался.
5 октября 2020 в 22:26
#
Esthet
+1860
Вот такое вот можно попробовать
5 октября 2020 в 22:29
#
Mers
+5110
🤔
А там есть рингтоны, в музыке?
5 октября 2020 в 23:01
#
Esthet
+1860
Рингтоны то есть общие, но этот варик не катит, только что пробовал или мож я че не так сделал, но вообще покупки музыки и рингтоны можно сделать общие
5 октября 2020 в 23:28
#
Mers
+5110
Так тобою отдельно добавленный себе рингтон появился на смартфоне жены?
Я правильно понял? Если да, то почему не катит?
5 октября 2020 в 23:31
#
Esthet
+1860
Не появился(но по идее должен, покупки же появляются, и это должно
5 октября 2020 в 23:35
#
Mers
+5110
Спасибо за пробу)
5 октября 2020 в 23:48
#
Esthet
+1860
Странная пакость, покупками можно делиться а созданным своим трудом хрен(
5 октября 2020 в 23:50
#
Mers
+5110
Ну да, бяка🤷🏻‍♂️
5 октября 2020 в 23:51
#
Mr.Igor
+121
Слишком много букв....всем спасибо))
5 октября 2020 в 21:23
#
Cikkặ Cikø Rặkkặ Cikặ
0
Кароче Братка, Спасибо за инфу, Кроме тебя в инете не некакой сайте не смог найти про Сафари инфу, Только некторых перевод выложили а у тебя 64 👍 Но ОДНУ пропустил или незнаю.)
12 ноября 2020 в 08:33
#
Cikkặ Cikø Rặkkặ Cikặ
0
Я сам из Баку если что Русский не очень..:/ думаю как то поймешь что написал, ну я надеюсь.) если что спроси что не понял я постораюсь обьясю, Спс
12 ноября 2020 в 08:37
#
Ильдар Суфияров
0
Проект закрыт? Обзоров экспериментальных функций из ios15 не ждать?
1 февраля 2022 в 17:52
#