Что такое фоновый режим браузера

Обновлено: 23.11.2024

В 2015 году мы представили фоновую синхронизацию, которая позволяет сервисному работнику откладывать работу до тех пор, пока пользователь не подключится к сети. Это означает, что пользователь может ввести сообщение, нажать кнопку "Отправить" и покинуть сайт, зная, что сообщение будет отправлено либо сейчас, либо при наличии подключения.

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

Что делать, если вам нужно загрузить что-то, что может занять много времени, например фильм, подкасты или уровни игры? Вот для чего предназначена фоновая выборка. Фоновая загрузка — это веб-стандарт, доступный по умолчанию, начиная с Chrome 74.

Вот короткая двухминутная демонстрация, показывающая традиционное положение вещей по сравнению с использованием фоновой выборки:

Попробуйте демоверсию и просмотрите код. Для этого требуется Chrome 71 и установленный флаг Экспериментальные функции веб-платформы.

Это также проходит как пробная версия Origin. Если вы хотите протестировать этот API с реальными пользователями без пометки, см. ниже.

Фоновая загрузка работает следующим образом:

  1. Вы указываете браузеру выполнить группу выборок в фоновом режиме.
  2. Браузер извлекает эти данные, отображая ход выполнения для пользователя.
  3. После завершения или сбоя выборки браузер открывает сервис-воркер и запускает событие, чтобы сообщить вам, что произошло. Здесь вы решаете, что делать с ответами.

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

На некоторых платформах (например, Android) браузер может закрыться после шага 1, так как браузер может передать выборку операционной системе.

Если пользователь начнет загрузку в автономном режиме или отключится во время загрузки, фоновая загрузка будет приостановлена ​​и возобновлена ​​позже.

Как и в случае с любой новой функцией, вам нужно определить, поддерживает ли ее браузер. Для фоновой выборки это так же просто, как:

Основной API зависит от регистрации сервис-воркера, поэтому сначала убедитесь, что вы зарегистрировали сервис-воркер. Затем:

Во многих примерах в этой статье используются асинхронные функции. Если вы не знакомы с ними, ознакомьтесь с руководством.

backgroundFetch.fetch принимает три аргумента:

Параметры
id string
уникально идентифицирует эту фоновую выборку.

backgroundFetch.fetch будет отклонен, если идентификатор совпадает с существующим фоновым запросом.

Вы можете получать данные из других источников, если ресурсы позволяют это через CORS.

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

Несмотря на то, что это необязательно, настоятельно рекомендуется указать его. Он используется, чтобы сообщить пользователю, насколько велика загрузка, и предоставить информацию о ходе выполнения. Если вы не укажете это, браузер сообщит пользователю, что размер неизвестен, и в результате пользователь с большей вероятностью прервет загрузку.

Если фоновая загрузка превысит указанное здесь число, она будет прервана. Совершенно нормально, если загрузка меньше, чем downloadTotal , поэтому, если вы не уверены, какой будет общая загрузка, лучше перестраховаться.

backgroundFetch.fetch возвращает обещание, которое разрешается с помощью BackgroundFetchRegistration . Я расскажу подробности об этом позже. Обещание отклоняется, если пользователь отказался от загрузок или если один из предоставленных параметров недействителен.

Предоставление множества запросов для одной фоновой выборки позволяет вам комбинировать вещи, которые логически представляют собой одну вещь для пользователя. Например, фильм может быть разделен на тысячи ресурсов (обычно для MPEG-DASH) и содержать дополнительные ресурсы, такие как изображения. Уровень игры может быть распределен по множеству ресурсов JavaScript, изображений и аудио. Но для пользователя это просто «фильм» или «уровень».

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

Вы можете получить существующую фоновую загрузку следующим образом:

…передав идентификатор нужного фонового изображения. get возвращает значение undefined, если с этим идентификатором нет активной фоновой выборки.

Фоновая загрузка считается "активной" с момента ее регистрации до тех пор, пока она не завершится успешно, не завершится ошибкой или не будет прервана.

Вы можете получить список всех активных фоновых загрузок, используя getIds:

BackgroundFetchRegistration ( bgFetch в приведенных выше примерах) имеет следующее:

< /tr>
Свойства
id string
Идентификатор фоновой выборки.
uploadTotal number
Количество байтов, отправляемых на сервер.
загружено number
Количество успешно отправленных байтов.
downloadTotal number
Значение, предоставленное, когда фон fetch был зарегистрирован или ноль.
скачано number
Количество успешно полученных байтов.

Это значение может уменьшиться. Например, если соединение прерывается и загрузка не может быть возобновлена, в этом случае браузер перезапускает загрузку этого ресурса с нуля.

Один из следующих:

  • "" – фоновая загрузка активна, поэтому пока нет результата.
  • "success" — фоновая загрузка прошла успешно.
  • "failure" — не удалось выполнить фоновую выборку. Это значение отображается только в случае полного сбоя фоновой загрузки, поскольку браузер не может повторить или возобновить попытку.

Один из следующих:

  • "" – не удалось выполнить фоновую загрузку.
  • "aborted" — фоновая загрузка была прервана пользователем или была вызвана функция abort().
  • "bad-status" — один из ответов имел статус "не в порядке", например 404.
  • "fetch-error" — одна из выборок не удалась по какой-либо другой причине, например. CORS, MIX, недопустимый частичный ответ или общий сбой сети для получения, которое невозможно повторить.
  • "quota-exceeded" – во время фоновой выборки достигнута квота хранилища.
  • "download-total-exceeded" – превышено указанное значение `downloadTotal`.

Если это ложное совпадение и matchAll использовать нельзя.

Возвращенное обещание разрешается как true, если выборка была успешно прервана.

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

Подробнее см. ниже.

Это можно сделать с помощью события прогресса. Помните, что downloadTotal — это любое значение, которое вы указали, или 0, если вы не указали значение.

В текущей реализации Chrome вы можете получать запросы и ответы только во время событий backgroundfetchsuccess , backgroundfetchfailure и backgroundfetchabort (см. ниже). В будущем вы сможете получать незавершенные выборки.

запись — это BackgroundFetchRecord, и она выглядит следующим образом:

Свойства
request Request
Предоставленный запрос.
responseReady Promise
Полученный ответ.

Ответ находится за обещанием, поскольку он, возможно, еще не получен. Обещание будет отклонено, если выборка не удалась.

События
backgroundfetchsuccess Все извлечено успешно.
backgroundfetchfailure Одна или несколько выборок не удались.
backgroundfetchabort Одна или несколько выборок не удались.
backgroundfetchabort стол>

Это действительно полезно, только если вы хотите выполнить очистку связанных данных.

Объекты событий имеют следующее:

Свойства
registration BackgroundFetchRegistration
Методы
updateUI(< title, icons >) Позволяет вам изменить заголовок/значки, которые вы изначально установили. Это необязательно, но при необходимости позволяет предоставить больше контекста. Вы можете сделать это *один раз* во время событий backgroundfetchsuccess и backgroundfetchfailure.

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

Если фоновая загрузка успешно завершится, ваш сервис-воркер получит событие backgroundfetchsuccess, а event.registration будет регистрацией фоновой загрузки.

После этого события полученные запросы и ответы больше не доступны, поэтому, если вы хотите сохранить их, переместите их куда-нибудь, например, в API кеша.

Как и в случае с большинством событий сервис-воркера, используйте event.waitUntil, чтобы сервис-воркер знал, когда событие завершено.

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

Например, в сервис-воркере:

Ошибка могла быть связана с одной ошибкой 404, которая, возможно, не имеет для вас значения, поэтому, возможно, стоит скопировать некоторые ответы в кеш, как указано выше.

Интерфейс, отображающий ход загрузки и результат, можно щелкнуть. Событие backgroundfetchclick в сервис-воркере позволяет реагировать на это. Как указано выше, event.registration будет регистрацией фоновой загрузки.

Обычно для этого события нужно открыть окно:

Чтобы получить доступ к этому новому API на своем сайте, подпишитесь на пробную версию Origin "API фоновой загрузки". Если вы просто хотите попробовать его локально, API можно включить в командной строке:

Передача этого флага в командной строке включает API глобально в Chrome для текущего сеанса.

Если вы попробуете этот API, сообщите нам, что вы об этом думаете! Направляйте отзывы о форме API в репозиторий спецификаций и сообщайте об ошибках реализации компоненту BackgroundFetch Blink.

Фоновая синхронизация – это новый веб-API, который позволяет откладывать действия до тех пор, пока у пользователя не будет стабильного подключения. Это полезно для гарантии того, что все, что пользователь хочет отправить, действительно отправлено.

Интернет — прекрасное место, где можно провести время впустую. Не тратя время на Интернет, мы бы не узнали, что кошки не любят цветы, хамелеоны любят мыльные пузыри, а наш собственный Эрик Бидельман — герой игры в гольф конца 90-х.

Но иногда, только иногда, мы не хотим терять время. Желаемый пользовательский опыт больше похож на:

  1. Телефон из кармана.
  2. Достичь второстепенной цели.
  3. Телефон в кармане.
  4. Возобновить жизнь.

К сожалению, этот опыт часто нарушается из-за плохого подключения. Мы все были там. Вы смотрите на белый экран или спиннер и понимаете, что должны просто сдаться и жить дальше, но на всякий случай даете еще 10 секунд. После этих 10 секунд? Ничего. Но зачем сдаваться сейчас? Вы уже потратили время, так что уйти ни с чем было бы пустой тратой времени, так что вы продолжаете ждать. К этому моменту вы хочете сдаться, но знаете, что в ту секунду, когда вы это сделаете, все загрузится за секунду, если бы вы только подождали.

Сервисные работники решают часть загрузки страницы, позволяя вам обслуживать контент из кеша. Но что делать, если странице нужно что-то отправить на сервер?

В настоящее время, если пользователь нажимает "отправить" в сообщении, он должен смотреть на счетчик, пока оно не будет завершено. Если они попытаются уйти или закрыть вкладку, мы используем onbeforeunload для отображения сообщения вроде «Нет, мне нужно, чтобы вы еще немного посмотрели на этот счетчик. Извиняюсь". Если у пользователя нет соединения, мы сообщаем ему: «Извините, вы должны вернуться позже и повторить попытку».

Это бред. Фоновая синхронизация позволяет работать лучше.

В следующем видео показан Emojoy, простая демонстрация чата только с эмодзи… вещь. Это прогрессивное веб-приложение. Он работает в автономном режиме в первую очередь. Он использует push-сообщения и уведомления, а также фоновую синхронизацию.

Если пользователь пытается отправить сообщение при нулевом подключении, то, к счастью, сообщение отправляется в фоновом режиме, как только соединение устанавливается.

По состоянию на март 2016 года фоновая синхронизация доступна в Chrome, начиная с версии 49 и выше. Вы можете увидеть его действие, выполнив следующие действия:

    .
  1. Отключитесь от сети (используя режим полета или посетите местную клетку Фарадея).
  2. Введите сообщение.
  3. Вернитесь на главный экран (при желании закройте вкладку/браузер).
  4. Подключиться к Интернету.
  5. Сообщение отправляется в фоновом режиме!

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

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

Как и в случае push-сообщений, в качестве цели события используется сервис-воркер, что позволяет ему работать, когда страница не открыта. Для начала зарегистрируйтесь для синхронизации со страницы:

Затем прослушайте событие в /sw.js :

И все! В приведенном выше примере doSomeStuff() должен возвращать обещание, указывающее на успех/неудачу того, что он пытается сделать. Если он выполняется, синхронизация завершена. В случае сбоя будет запланирована повторная попытка синхронизации. Повторная синхронизация также ожидает подключения и использует экспоненциальную отсрочку.

Имя тега синхронизации ("myFirstSync" в приведенном выше примере) должно быть уникальным для данной синхронизации.Если вы регистрируетесь для синхронизации, используя тот же тег, что и ожидающая синхронизация, она объединяется с существующей синхронизацией. Это означает, что вы можете зарегистрироваться для синхронизации «очистить исходящий ящик» каждый раз, когда пользователь отправляет сообщение, но если он отправит 5 сообщений в автономном режиме, вы получите только одну синхронизацию, когда он подключится к сети. Если вы хотите 5 отдельных событий синхронизации, просто используйте уникальные теги!

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

В идеале вы должны использовать его, чтобы запланировать отправку любых данных, которые вам нужны, за пределами жизни страницы. Сообщения чата, электронные письма, обновления документов, изменения настроек, загрузка фотографий… все, что вы хотите получить на сервер, даже если пользователь уходит или закрывает вкладку. Страница может хранить их в папке «Исходящие» в indexedDB, а сервисный работник извлекает их и отправляет.

Хотя вы также можете использовать его для извлечения небольших фрагментов данных…

Это офлайн-демонстрация из Википедии, которую я создал для Supercharging Page Load. С тех пор я добавил к нему немного магии фоновой синхронизации.

Попробуйте сами. Убедитесь, что вы используете Chrome 49 и выше, а затем:

  1. Откройте любую статью, например Chrome.
  2. Отключиться от сети (либо в режиме полета, либо подключиться к ужасному оператору мобильной связи, как у меня).
  3. Нажмите ссылку на другую статью.
  4. Вам должно быть сказано, что страницу не удалось загрузить (это также будет отображаться, если страница загружается слишком долго).
  5. Принять уведомления.
  6. Закройте браузер.
  7. Выход в Интернет
  8. Вы получите уведомление, когда статья будет загружена, помещена в кэш и готова к просмотру!

Используя этот шаблон, пользователь может положить свой телефон в карман и продолжить свою жизнь, зная, что телефон предупредит его, когда он доставит то, что ему нужно.

В демонстрациях, которые я показал, используются веб-уведомления, для которых требуется разрешение, а сама фоновая синхронизация — нет.

События синхронизации часто завершаются, пока у пользователя открыта страница сайта, поэтому требовать разрешения пользователя было бы неудобно. Вместо этого мы ограничиваем время регистрации и запуска синхронизации, чтобы предотвратить злоупотребления. Например:

  • Вы можете зарегистрироваться на событие синхронизации, только если у пользователя открыто окно сайта.
  • Время выполнения события ограничено, поэтому вы не можете использовать их для проверки связи с сервером каждые x секунд, майнинга биткойнов или чего-то еще.

Конечно, эти ограничения могут ослабляться/ужесточаться в зависимости от реального использования.

Если сервис-воркеры или фоновая синхронизация недоступны, просто опубликуйте контент со страницы, как вы это сделали бы сегодня.

Обратите внимание, что стоит использовать фоновую синхронизацию, даже если у пользователя хорошее подключение, поскольку она защищает вас от навигации и закрытия вкладок во время отправки данных.

Мы планируем внедрить фоновую синхронизацию в стабильную версию Chrome в первой половине 2016 года. Но мы также работаем над вариантом "периодической фоновой синхронизации". Это позволит вам запрашивать событие «периодической синхронизации», ограниченное временным интервалом, состоянием батареи и состоянием сети. Конечно, для этого потребуется разрешение пользователя, но также будет зависеть от воли браузера, когда и как часто эти события срабатывают. Например, новостной сайт может запрашивать синхронизацию каждый час, но браузер может знать, что вы читаете этот сайт только в 07:00, поэтому синхронизация будет запускаться ежедневно в 06:50. Эта идея немного дальше, чем одноразовая синхронизация, но она появится.

Постепенно мы переносим успешные шаблоны из Android/iOS в Интернет, сохраняя при этом то, что делает Интернет великолепным!

Скорее всего, это вас беспокоит…

Пока Google работает над устранением проблемы разрядки аккумулятора Chrome, с которой сталкиваются пользователи Windows, простое временное решение может помочь продлить срок службы аккумулятора ноутбука.

Как исправить? Закрытие браузера, когда он не нужен.

Капитан Очевидность

Исторически сложилось так, что закрыть приложение в Windows очень просто: вы щелкаете или нажимаете на кнопку управления окном «x» и все; он закрыт.

Однако в Google Chrome это не всегда так.

Просто закрытие окна Google Chrome не приводит к полному выходу из браузера. Браузер продолжает работать в фоновом режиме в системах Windows (и Linux), чего вы можете никогда не заметить.

Почему Chrome работает в фоновом режиме?

Происходит ли это (или нет), зависит от того, какие приложения и расширения вы установили в Chrome.

Некоторые приложения и расширения могут «просить» браузер оставаться в активном состоянии, чтобы продолжить работу; например, чтобы доставлять уведомления о новых сообщениях электронной почты или поддерживать чат в активном состоянии.

Раньше Google упрощал определение активности фоновых приложений, поскольку на панели задач (в правом нижнем углу экрана рабочего стола) отображался значок Google Chrome. Это показало список активных задач и правильную опцию «Выход».

Однако эта функция была удалена несколько выпусков назад.

Хорошая новость заключается в том, что вы можете остановить работу Chrome в фоновом режиме полностью (т. е. чтобы он всегда закрывался при закрытии), независимо от расширений или приложений. Все, что вам нужно сделать, это скажи это!

Как остановить работу Chrome в фоновом режиме

Если вы используете Windows 10, вы можете отключить фоновое сохранение Chrome на странице настроек браузера, например:

  • Откройте меню Chrome (нажмите Alt + E )
  • Выберите Настройки
    • .
  • На боковой панели страницы настроек нажмите заголовок Дополнительно.
  • Нажмите на раздел с названием Система
    • .
  • Переведите переключатель Продолжать работу фоновых приложений при закрытии Google Chrome в положение "Выключено".

И все; Chrome мгновенно примет во внимание ваши настройки и больше не будет работать в фоновом режиме.

Вы можете снова включить эту функцию, т. е. заставить Chrome постоянно работать в фоновом режиме, снова так же легко, просто следуйте инструкциям, описанным выше, но переключите последний переключатель из выкл.< /em> на вкл.

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

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

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

Как включить темный режим Chrome на Mac

Убедившись, что вы используете macOS Mojave или более позднюю версию, вы можете включить темный режим на Mac через меню «Системные настройки».

<р>1. Откройте Системные настройки, нажав значок Apple в верхнем левом углу экрана или нажав значок на панели инструментов.

<р>2. Нажмите Общие.

<р>3. В меню «Внешний вид» нажмите «Темный», чтобы активировать темный режим.

Выберите «Темный» для продолжительного темного режима или «Авто», чтобы активировать светлый режим днем ​​и темный режим ночью. Инсайдер

Примечание. Если вы выберете Авто, ваш компьютер будет автоматически выбирать режим, который вы используете, в зависимости от светового дня в вашем регионе. Однако эта функция доступна только в MacOS Catalina.

<р>4. Откройте браузер Chrome, который появится в темном режиме вместе с другими приложениями.

Как включить темный режим Chrome на ПК

Чтобы включить темный режим в версии Chrome для ПК с Windows, вы можете включить темный режим для всей операционной системы Windows или для приложений.

<р>1. Нажмите кнопку «Пуск», затем выберите значок «Настройки».

<р>2. Выберите Персонализация.

<р>3. На панели в левой части экрана щелкните Цвета. Отсюда вы можете выбрать «Темный» в качестве режима Windows по умолчанию или режима приложения по умолчанию, щелкнув соответствующий вариант.

<р>4. Откройте браузер Chrome, который теперь отображается в темном режиме.

Совет. Браузеры Chrome на компьютере также предоставляют множество вариантов цветовой палитры, в том числе вариации темных тем. Выберите меню из трех точек в правом верхнем углу, выберите «Настройки», затем выберите «Внешний вид» в меню слева. Нажмите «Тема», и вы увидите множество вариантов более темных и светлых цветов браузера. Сделайте свой выбор и нажмите «Добавить в Chrome».

Как включить темный режим Chrome на iPhone

Чтобы включить темный режим в приложении Chrome на iPhone, вам необходимо включить темный режим на устройстве.

<р>1. Перейдите в приложение "Настройки".

<р>2. Прокрутите вниз и нажмите «Экран и яркость».

<р>3. В меню «Внешний вид» нажмите «Темный». Затем ваш экран перейдет в темный режим, и приложения, которые предлагают этот режим просмотра, включая, помимо прочего, Chrome, будут отображаться таким образом.

Примечание. Вы также можете включить вкладку "Автоматически" в том же меню, чтобы автоматически включать темный режим на закате, а затем переключаться в светлый режим на рассвете.

Как включить темный режим Chrome на Android

Вы можете настроить темный режим на своем устройстве Android через само приложение Chrome.

<р>1. Откройте приложение Chrome.

<р>2.Коснитесь трех вертикально расположенных точек в правом углу экрана.

<р>3. Выберите Настройки в раскрывающемся меню.

<р>4. Нажмите «Тема» в меню настроек.

<р>5. Выберите «Темный», чтобы изменить цветовую схему просмотра на темный режим.

Примечание. Вы также можете нажать «Системные настройки по умолчанию» в меню выше, чтобы автоматически включать темный режим в Chrome, когда на вашем устройстве установлен темный режим или вы включили режим энергосбережения Android.

Как определить, находитесь ли вы в темном режиме или в режиме инкогнито в Chrome

Поскольку Chrome предлагает режим инкогнито, который также представляет собой затемненный фон, вы всегда можете проверить правый верхний угол браузера Chrome, чтобы проверить, находитесь ли вы в режиме инкогнито или в темном режиме.

Если вы видите значок режима инкогнито, который выглядит как шляпа и очки детектива, вы находитесь в режиме инкогнито. Если вы видите собственный значок Google, значит, вы находитесь в темном режиме.

Дженнифер — писатель и редактор из Бруклина, штат Нью-Йорк. Она проводит все свое время в поездках, пьет кофе со льдом и слишком много смотрит телевизор. У нее есть подписи в журналах Vanity Fair, Glamour, Decider, Mic и многих других. Вы можете найти ее в Твиттере по адресу @jenniferlstill.

Читайте также: