company_banner

2019-й по версии Chrome


    Привет, Хабр! Сегодня мы попробуем объять необъятное и вспомнить всё, что нам принёс 2019-й год в вебе вообще и в Chrome, в частности, а также пригласить вас на серию вебинаров, посвящённых новым веб-технологиям. В 2019-м году мы пережили очередные I/O и Chrome Dev Summit, прошли от 72-й до 79-й версии, ускорили загрузку картинок и улучшили модель защиты данных пользователей, и многое-многое ещё, но обо всём по порядку.


    Январь команда Chrome начала с того, чтобы дать нам всем возможность чуть просторней дышать на просторах веба без назойливой и мешающей рекламы. Тут ни прибавить, ни убавить, но было бы интересно знать ваше мнение: стало ли в Chrome чище и просторней за прошедший год?


    В феврале мы устроили маленькую революцию и (наконец!) сделали возможным размещение прогрессивных веб-приложений в Play Store при помощи Trusted Web Activities. Да, да – там много оговорок, и некоторые другие браузеры и OS ближе к концу года пошли ещё дальше, но мы-то с вами уже с начала года начали понимать, что такое реальная универсальность веба для распространения контента! Рамблер/новости, DNS-shop, и Badoo уже используют TWA, а вы?


    В том же феврале к нам справа сверху постучали в первый раз в году, и мы все дружно обновились на 73-й Chrome. Там было: программное добавление таблиц стилей (и это был только первый подход к рывку CSS на новую высоту), новый regex метод для String.prototype и много-много прочих няшек.


    За февралём последовал март (Карл!), а с ним и Chrome за номером 74. Из самого вкусного он принёс нам: JavaScript API для Feature Policy и целый ряд приятностей, включая возможность учитывать предпочтения пользователей относительно подвижности элементов UX при помощи медиа-запросов.



    В апреле мы готовились к I/O, но успели провести 3-й AMP Conf, где было столько новых фишек, что не хватит и трёх обзоров! Но просто нельзя не упомянуть AMP для почты, который одними из первых поддержали в Mail.ru, amp-script и все новшества в AMP для WordPress (да-да, на WordPress AMP работает просто офигительно!).


    Дальше мы скорость не сбавляли! Вышел 75-й Chrome, а там: Web Share API с поддержкой файлов (раз!), отображение Service Worker’ов в task manager’е (два!), новый конструктор Animation() (три!), и ещё-ещё-ещё.


    Потом вебу стукнуло 30, а на Google I/O чуть не треть контента была посвящена ему любимому.



    Там вообще всех новшеств и объявлений не перечислить, но в хит-парад редакторов этого обзора вошли:


    • lazy loading изображений и iframe-ов прямо в браузере из коробки
    • Порталы (Portals, если вы ещё не видели порталы и не пробовали их использовать… )
    • Web Packaging и, в частности, Signed Exchanges как первый шаг (чуть ниже будет о том, как их использовали на Lenta.ru)
    • Web Perception Toolkit, облегчающий интеграцию с камерой устройства и опирающийся на Shape Detection APIs, а также Web Share Target API, благодаря которому любое веб-приложение может занять своё достойное место в списке приложений, через которые пользователи делятся контентом
    • В Chrome на десктопах в omnibox добавилась кнопочка установки PWA
    • И, да, чуть не забыли – мы запустили web.dev! Сайт для вас, с вами и о вас – не благодарите :) Серьёзно, лучше расскажите в комментариях, что вам нравится в нём, а что не очень, и как бы вы его улучшили.

    После I/O не всем удалось полноценно отдохнуть, поэтому уже в июне нас приветствовал 76-й Chrome, а в нём: затемнённый режим (для тех кому хорошо как на светлой, так и на тёмной стороне интерфейсов), улучшения в Payments API и (о радость!) возможность управлять появлением mini-infobar’а для добавления сайта на домашний экран на мобильных устройствах. И это ещё не всё, так что, если ещё не читали, читайте подробности по ссылке.


    В июне появилось несколько новых механизмов защиты пользователей. Во-первых, теперь есть расширение, при помощи которого наиболее бдительные из вас могут помогать остальным сохранять свои данные в безопасности. Во-вторых, сам Chrome теперь умеет вовремя уведомлять о том, что сайт, на который вы хотите зайти, возможно, не является тем, за кого себя выдаёт.



    Вскоре подоспел уже и 77-й релиз, в котором из важного стоит выделить появление нового параметра измерения скорости загрузки страниц: Largest Contentful Paint.



    Благодаря этому теперь легче стало определять, когда на экране появляется не просто какой-то контент, а всё-таки самый главный элемент контента. Кроме этого, появились новые возможности у форм, запустился Contact Picker API, а в Feature Policy появилась возможность пресекать использование document.domain. Тут же было объявлено и о том, что в режиме Lite все картинки и фреймы теперь по умолчанию загружаются по мере необходимости (lazy loading).


    В 78-м Chrome вышло сразу несколько долгожданных API: CSS Properties and Values, SMS Receiver (его уже подключили для авторизации Rambler&Co) и Native File System. Если вы верифицируете пользователей, отправляя SMS, или если у вас есть проект для редактирования файлов в виде нативного приложения, который вы всегда мечтали портировать на веб, последние два API – просто специально для вас. А для тех, кто всегда хочет пробовать всё новое первым, теперь есть целая отдельная страничка по Origin Trials.


    79-й Chrome, конечно, переплюнул всех, предоставив, наконец доступ к WebXR Device API.



    А ведь в 79-м мы получили ещё и обновление Wake Lock API, адаптивные иконки для установленных PWA и множество прочих маленьких, но приятных улучшений.


    Ну а потом ноябрь, как всегда, принёс с собой Chrome Dev Summit, и от новостей, запусков и обновлений зарябило в глазах. Не говоря уже о слюнках, которые текут от всего, что было намечено на следующий год. Из самого мощного отметим появление понятия Web Bundles, способного в корне изменить модель распространения контента в вебе, а также запуск веб-альманаха, невероятно полезного сборника самых разнообразных данных и аналитики со всего веба. Отметим и объявление о грядущих экспериментах с уведомлением пользователей об ожидаемой скорости загрузки сайта.



    К саммиту было приурочено ещё несколько полезных статей и мероприятий. Во-первых, подробный рассказ о возможностях, которые современному вебу дают Web Assembly и новые API. Во-вторых, по всему миру прошли митапы под эгидой CDS Extended. Среди них особо хочется отметить CDS Extended в Москве, организованный командой Mail.ru Group и сообществом GDG Moscow. Обязательно посмотрите запись его стрима, так как там коллеги из Mail.ru Group и Rambler&Co как раз рассказали о своём опыте практического внедрения целого ряда из тех новых возможностей, о которых мы рассказали в этой статье.


    Кстати об опыте практического внедрения – 2019-й год был особенно богат на замечательные примеры внедрения современных веб-технологий лидерами Рунета. Вот лишь несколько из наших самых любимых примеров.


    AMP


    Один из ведущих онлайн магазинов Рунета, Ситилинк, запустил AMP для каталога и продуктовых страниц, добившись повышения коэффициента конверсии в покупку на 33%. С нетерпением ждём результатов других ключевых игроков рынка (вроде Эльдорадо и М.Видео), которые тоже начали использовать AMP для своих лендингов.


    Конечно, многим в том как работает AMP не нравилось, что при переходе на AMP-страницу из любой поисковой выдачи в адресной строке отображался URL соответствующего кэша, а не самой страницы. Теперь этот вопрос решается при помощи Signed Exchanges и Lenta.ru первой на рынке применила эту технологию с использованием упаковщика для AMP (пример open source упаковщика: https://github.com/ampproject/amppackager).



    Источник: Rambler’s Denis Parashy on Twitter


    AMP можно с успехом использовать не только для веб-страниц, но и для почты, что с успехом доказали коллеги из почты Mail.ru, которые не просто запустили поддержку AMP, но и обеспечили успех использования этой технологии такими монстрами рассылок, как Ozon.ru.


    PWA


    Тинькофф Банк одним из первых в мире запустил PWA для банка и уже ближе к концу 2019 для своего сервиса Тинькофф Путешествия. Помимо в общем замечательного функционала самого веб-приложения, теперь пользователи Тинькофф Путешествий даже при временной потере связи, могут скоротать время за прикольной игрой, чтобы потом бесшовно вернуться к тому, что они пытались сделать на сайте, как только связь восстановится.



    Лидер российского рынка доставки еды Delivery Club порадовал своих партнёров перед Новым Годом запуском совершенно нового портала для вендоров, созданного в виде PWA и призванного полностью заменить использовавшиеся ранее нативные решения. Ребята не просто всё сделали, но ещё и занимательно рассказали об этом на организованном Mail.ru Group “CDS’19 Extended Moscow”. Все подробности в докладе Никиты Борисова.


    Помните про “маленькую февральскую революцию” с TWA, которую мы упоминали выше? В Рунете её весьма активно поддержали с самых разных сторон. Отрасль логистики представлена краснодарским стартапом ГдеЗерно. Их TWA весит всего 1,5 МБ, при том что приложение предлагает продвинутый функционал для работы с картами и отслеживания грузов. Из ритейла первыми стали экспериментировать DNS-shop, размер TWA которых не превышает 1,9 МБ. Badoo использовали TWA как формат для облегчённой версии своего приложения для знакомств Badoo Lite, ориентированной на пользователей устройств с меньшей производительностью. И наконец, в мире новостей первопроходцами стали команда новостей Рамблер, TWA которых сейчас на этапе тестирования.


    Новые возможности


    Многие из API, запущенных в 2019-м, живут под зонтиком проекта Fugu. Это самые передовые решения из тех, что сейчас можно найти в вебе, и поэтому вдвойне приятно, что они уже нашли применение в некоторых из ведущих проектов Рунета. Коллеги из Mail.ru, которые подключили WebAuthn для своих Почты и Облака, а на


    Id.rambler.ru внедрили и WebAuthn, и SMS Receiver API. Это означает, что логиниться в эти сервисы теперь можно и по отпечатку пальца (или с помощью другого биометрического сенсора), а сайт Рамблера теперь ещё и умеет считывать СМС-ки, которые их сервис отправляет вам для подтверждения входа в систему. Если кратко, всё это значит, что мы уверенной поступью идём к беспарольному вебу, и вы совсем скоро сможете сжечь и выбросить все свои бумажечки и блокнотики с паролями!


    В 2020-м году нас ждёт ещё больше нового и интересного. Ещё в середине января мы объявили о дальнейшем развитии инициативы Privacy Sandbox. Если кратко (мы уверены, вы засыплете нас вопросами в комментариях, и там можно будет разгуляться), то в слегка, но не очень, отдалённом будущем мы с вами придём к вебу, в котором сторонние куки больше не будут нужны для рекламы, аналитики и прочих подобных сервисов.


    WASM продолжит расти и хорошеть. Следите за новостями, изучайте примеры и пробуйте сами. Перечислять всё, что указано в https://goo.gle/fugu-api-tracker, займёт ещё страниц десять, поэтому дадим вам лишь небольшой тизер основных вкусностей. File handler API вкупе с Native File System API лишают вас последних оправданий, чтобы не строить десктопные приложения для обработки файлов в вебе. Google Drive пока ещё не использует все эти API, но уже прочно встал на рельсы PWA, и за этим проектом мы бы следили с особым интересом. Ещё один API, который в корне меняет, как мы думаем о веб-приложениях, установленных на компьютере, это, конечно, Run on OS login (a.k.a. "run on startup"). С ним ваше веб-приложение становится ещё ближе и доступнее для любого постоянного пользователя.


    И, наконец, в 2020-м году мы хотим больше и чаще общаться с вами, поэтому запускаем онлайн веб-марафон из семи вебинаров, первый из которых пройдёт уже 12 марта. Знакомьтесь с программой ниже, регистрируйтесь, чтобы получать своевременные уведомления и необходимые материалы и заходите к нам на огонёк, чтобы своевременно узнавать обо всём новом и обсуждать возможности для его применения.


    • [12 марта 2020, 17:00 MSK] 2019-й год – обзор и новые направления.
    • [14 апреля 2020 17:00 MSK] Скорость загрузки: Feature Policy, LightWallet, Lighthouse CI, плагины Lighthouse, AMP как фреймворк для создания быстрых сайтов.
    • [27 апреля 2020 17:00 MSK] AMP: не только ускоренные, не только мобильные, не только страницы – amp-script, AMP Stories, AMP для почты.
    • [15 мая 2020 17:00 MSK] Обзор PWA. Базовые и продвинутые фичи. Ключевые показатели для анализа. Позиционирование веб- и нативных приложений в сторах и не только.
    • [21 мая 2020 17:00 MSK] PWA Codelab. Применение Workbox. Работа с пользовательским интерфейсом по добавлению иконки на домашний экран.
    • [TBC] PWA UX. Общие рекомендации по дизайну. Специфика интерфейсов для установленных веб-приложений и работы в офлайне.
    • [TBC] Проект Fugu. Современные веб-технологии и API, выводящие веб-приложения на новый уровень – goo.gle/fugu-api-tracker.

    Фуф! Спасибо, что дочитали! Надеемся, было познавательно, и очень ждём ваши вопросы и комментарии. На забывайте регистрироваться на наш веб-марафон и продолжайте делать наш любимый Веб краше! До скорых встреч!


    //

    Google
    Филин Лаки

    Комментарии 6

      +3
      Поддержку расширений для мобильной версии chrome так и не сделали.
        0

        Это чтобы вам было


        просторней дышать на просторах веба без назойливой и мешающей рекламы

        Я уже молчу про то, что ограничили возможности webRequest API, который используется блокировщиками для фильтрации рекламы и трекеров.


        Этот факт, конечно же, в статье не упоминается.
        Довольно цинично получилось.

          +1
          Блокировщики рекламы и webRequest API — отдельная большая тема. Заслуживает своей отдельной статьи, наверное, чтобы не создавать флуд здесь. Но очень было бы полезно и интересно увидеть примеры назойливой рекламы и трекеров, которые в 2019-м стали мешать Вам больше. Это будет повод проанализировать, как и что можно улучшить.
            –1

            Вся реклама и все трекеры. Почему порезали апи которое позволяло на лету все это блочить? Впрочем не отвечайте, и так все понятно.

              –2
              Отвечу на вопрос предыдущего оратора (формально отвечаю вам, потому что согласен с вами, а не с ним). Самое ужасное нововведение именно 2019 года — реклама от яндекса на некоторых сайтах (на livejournal.com в частности, кажется), которая меняет вёрстку страницы при прокрутке. Жутко раздражает, пришлось вырубить javascript целиком, чтобы этого не было.
          +1
          А здесь есть запрос соответствующий: bugs.chromium.org/p/chromium/issues/list? Надо бы поддержать его, если есть желание повысить приоритетность;.

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое