Когда речь заходит об использовании браузера для ежедневного посещения веб-сайтов, многие пользователи полагаются на то, что им знакомо. Для многих пользователей привычный интерфейс и коллекция любимых программ, накопленная годами, являются решающими аргументами в пользу сохранения верности своему веб-клиенту. Теме обновлений также не всегда придается должное значение, поэтому вы можете быть уверены, что многие посетители вашего веб-проекта используют браузеры, не поддерживающие передовые веб-функции, такие как элементы HTML5 или масштабируемая объемная графика (SVG).
Чтобы вы могли принимать посетителей от этих пользователей, рекомендуется использовать так называемые полифиллы. Эти практичные компоненты кода позволяют использовать новые функции, для которых в интернет-браузерах отсутствует встроенная поддержка (например, вышеупомянутые). В этой статье мы объясним, что такое полифилл и как можно использовать эту технологию.
Что такое полифилл?
Полифилл, или даже Полифилла, — это любой компонент кода, который делает современные функции HTML, CSS или JavaScript доступными в старых браузерах, в которых изначально отсутствует их поддержка. В большинстве случаев полифилл пишется на JavaScript. Однако, в принципе, в качестве основы для такого «наполнителя» можно использовать и другие языки веб-программирования. Компоненты HTML5, такие как растровый элемент canvas для графики, диаграмм и анимации, являются одними из наиболее важных областей применения polyfill в браузерах.
Термин «полифилл» происходит от популярного британского бренда Polyfilla, который на самом деле является шпатлевкой для ремонтных и реставрационных работ. Традиционно используемый для заполнения дыр в стенах, веб-разработчик Реми Шарп увидел в шпатлевке подходящее сравнение для полезных обходных кодов, поэтому в 2009 году ей было дано соответствующее название в «Introducing HTML5», книге, которую он написал вместе с Брюсом Лоусоном. Впоследствии Polyfill было принято в качестве официального обозначения.
Какие типы полифиллов существуют?
Тот факт, что термин polyfill тесно связан с HTML5, не случаен. Благодаря своим расширенным возможностям, которые, в частности, сделали ненужными флэш-видео, пятая версия языка гипертекстовой разметки стала постоянным атрибутом Интернета. Однако, что касается поддержки HTML5 в браузере, то развитие идет медленно, и даже последние версии зачастую не полностью реализуют передовой стандарт разметки. В дополнение к полифиллам для элементов HTML5, компоненты кода полифилла, среди прочего, также востребованы для интеграции следующих веб-элементов:
- SVG: Еще в 2001 году консорциум W3C рекомендовал SVG (Scalable Vector Graphics) в качестве формата для интеграции векторной графики, а после появления HTML5 этот формат находится на подъеме. Но поскольку многие браузеры отстают в поддержке, существует SVG polyfill и SVG Web.
- ECMAScript: ECMAScript — это объявленное стандартное ядро языка JavaScript, которое регулярно подвергается пересмотру с целью постепенного расширения функциональных возможностей языка сценариев. Самые последние возможности, такие как объекты promise или символьные функции, работают в более старых версиях браузеров и благодаря core-js, стандартной библиотеке JavaScript polyfill.
- Веб-хранилище: Даже альтернативы локального хранения (долговременное хранение на страницах клиента) и сессионного хранения (хранение, ограниченное текущей сессией) файлов cookie, которые можно объединить под общим термином веб-хранилище или DOM Storage, поддерживаются не всеми версиями браузеров. Известный полифилл, который был написан для устранения этой проблемы, — это лицензированный MIT полифилл webstorage.
- Кросс-оригинальный обмен ресурсами (CORS): CORS позволяет веб-приложениям получать доступ к веб-ресурсам, расположенным за пределами собственного сервера. Многие старые браузеры не поддерживают такой обмен данными. В качестве обходного пути используется комбинация из пакета XDomain JavaScript и CORS polyfill XHook.
- CSS (каскадные таблицы стилей): CSS в течение многих лет был одним из самых важных инструментов для проектирования графики веб-сайтов. Со временем таблицы стилей становились все более универсальными, поэтому полифиллы пользуются большим спросом в качестве интерфейса для старых моделей браузеров. Одним из самых известных инструментов обхода является css-polyfills.js.
- Геолокация: API геолокации для передачи своего местоположения долгое время был доступен только с помощью дополнительного плагина для браузера и не поддерживался браузерами. Если вы планируете сделать эту функцию доступной для пользователей старых версий веб-клиентов, не имеющих расширения, то вы можете сделать это с помощью полифилла.
Как используются полифиллы (включая пример)?
В целом, код polyfill JavaScript или скрипты polyfill могут быть встроены непосредственно в HTML-документ веб-проекта. При этом они органично встраиваются в существующий исходный код и выполняются при правильном программировании только в том случае, если в браузере доступа конкретная веб-функция фактически не поддерживается. Для этого в JavaScript используется команда if-command (например), с помощью которой можно определить отсутствие поддержки как условие для активации скрипта. В следующих двух примерах мы проиллюстрируем, насколько тщательно это должно соблюдаться в коде и как в целом выглядит структура полифилла.
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.indexOf(searchString, position) === position;
};
}Этот небольшой фрагмент JavaScript позволяет браузеру использовать метод JavaScript «startsWith()», даже если на самом деле он его не поддерживает. Этот метод, являющийся частью спецификации ECMAScript 6, определяет, начинается ли определенная строка с символа или серии символов другой строки. Если это так, он возвращает значение «true», в противном случае — «false». В результате, первая строка кода гарантирует, что скрипт не будет использоваться в случае, если браузер не поддерживает этот метод.
Более сложная, оптимизированная версия для интеграции метода «startsWith()» была доступна на GitHub разработчиком Матиасом Байненсом.
Продемонстрированный код не работает, если веб-клиент блокирует JavaScript или если язык сценариев отключен в настройках.
Пример 2: полифилл веб-хранилища
Второй пример полифилла JavaScript представляет собой простое кодовое решение, которое делает локальное или сессионное хранилище доступным во всех старых моделях браузеров.
if (typeof window.localStorage == 'undefined' || typeof window.sessionStorage == 'undefined') (function () {
// Define the storage type (local or session)
var Storage = function (type) {
// Define the storage type (local or session)
function setData(data) {
// Sets the data into storage
}
function clearData() {
// clears data from storage
}
return {
length: 0,
clear: function () {
clearData();
},
getItem: function (key) {
return data[key] === undefined ? null : data[key];
},
key: function (i) {
var ctr = 0;
for (var k in data) {
if (ctr == i) return k;
else ctr++;
}
return null;
},
removeItem: function (key) {
delete data[key];
this.length--;
setData(data);
},
setItem: function (key, value) {
data[key] = value + '';
this.length++;
setData(data);
}
};
};
// Set the local and session storage properties inside the window
// object
if (typeof window.localStorage == 'undefined') window.localStorage = new Storage('local');
if (typeof window.sessionStorage == 'undefined') window.sessionStorage = new Storage('session');
})();Указанный код включает в себя немедленно вызываемое функциональное выражение (Immediately Invoked Function Expression, IIFE). Однако прежде чем браузер загрузит его, команда if в первой строке кода (как и в первом примере) проверяет, поддерживает ли клиент нативно технологии веб-хранилища. Если это так, то возвращаемое значение «false» для команды if отменяет полифилл, поскольку типы определены для локального и сессионного хранилищ.