Сделайте свое приложение в автономном режиме с обслуживающими работниками

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

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

Строительство сайта? Оптимизировать ваш процесс с отличным Строитель сайта и поддерживать его приличным веб хостинг служба. И получить ваше хранилище отсортировано с этими облачное хранилище опции.

Что такое обслуживающий рабочий?

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

Услуга не имеет прямого доступа к DOM или событиям и взаимодействию пользователей, происходящего на самой веб-странице. Подумайте об этом как об этом как слой, который сидит между веб-страницей и сетью, позволяя ему перехватить и управлять сетевыми запросами (E.g. ajax запросы), сделанные вашей страницей. Это делает его идеальным для управления кэшами и поддерживать автономное использование.

Срок службы жизненного цикла

Жизнь сервисного работника следует простому потоку, но он может быть немного запутанным, когда вы привыкли к сценариям JS, просто работаем сразу:

Установка и GT; Ожидание (установлено) и GT; Активация & gt; Активирован & gt; Избыточный

Когда ваша страница впервые загружена, регистрационный код, который мы добавили в index.html. Запускает установку сервисного работника. Когда нет существующего работника, новый сервисный работник будет активирован сразу после установки. Веб-страница может иметь только один работник службы за раз.

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

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

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

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

01. Клонировать демонстрационное приложение

Хорошо, давайте начнем научиться построить веб-приложение с помощью обслуживающих работников. Для этого учебника вам понадобится последние версии Node.js и NPM, установленные на вашем компьютере.

Мы выбили демонстрационное приложение, которое мы будем использовать в качестве основы для этого руководства ( клонировать демонстрационное приложение здесь ). Приложение - это забавный маленький проект, который выбирает пятидневный прогноз погоды на основе местоположения пользователя. Затем он проверит, прогнозируется ли дождь до конца дня и обновляет UI соответственно.

Он был построен неэффективно (намеренно), используя большие, ненужные библиотеки, такие как jQuery и bootstrap, с большими неоптимизированными изображениями, чтобы продемонстрировать разницу в производительности при использовании сервисного работника. В настоящее время он весит в смешной 4,1 МБ.

02. Получить свой ключ API

Чтобы получить данные о погоде из API, вам нужно будет получить бесплатный ключ API из Openweathermap :

Как только вы получите ключ, откройте index.html. и искать Window.api_key.api_key. Переменная в & lt; head & gt; Отказ Вставьте ключ в значение:

    window.API_KEY = 'paste-your-key-here';

03. Запустите сервер разработки

Теперь мы готовы начать работать над проектом. Прежде всего, давайте установим зависимости бегом:

    npm install

Есть две задачи для инструмента сборки. Пробег Начнем NPM Чтобы начать сервер разработки на порт 3000. Запустить NPM запустить сборку Чтобы подготовить версию «производства». Имейте в виду, что это всего лишь демонстрация, поэтому на самом деле не является производственной версией - нет никаких министерств или чего-либо - это файлы, которые просто получают «Revved».

Алгоритм используется для создания хэша, таких как 9C616053E5, из содержимого файла. Алгоритм всегда будет выводить ту же хеш для того же содержимого, что означает, что до тех пор, пока вы не изменяете файл, хеш не изменится. Хеш затем добавляется к имени файла, поэтому, например, styles.css может стать стили-9C616053E5.css. Хаш представляет собой ревизию файла - отсюда «переосмысли».

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

04. Представьте свой сервисный работник

Теперь давайте начнем с нашего обслуживания. Создайте файл под названием SW.JS в корне сортировка каталог. Затем добавьте эти два слушателя событий, чтобы войти установить и активировать События:

 Self.AddEventListener («Установка», (событие) = & gt; {
      console.log (событие);
    });

    self.addeventListener («активация», (событие) = & gt; {
      console.log (событие);
    }); 

То себя Переменная здесь представляет собой глобальную читающую службу сервисного работника. Это немного как окно объект на веб-странице.

Далее нам нужно обновить наш файл index.html и добавить команды для установки сервисного работника. Добавьте этот скрипт непосредственно перед закрытием & lt; / body & gt; тег. Это зарегистрирует наш работник и регистрирует свой текущий статус.

 & lt; скрипт & gt;
     Если («ServiceWorker» в навигаторе) {
       navigator.serviceworker.register ('/ sw.js')
         .then (Функция (REG) {
           Если (reg.Istalling) {
             console.log ('SW установка');
           } еще если (Reg.waiting) {
             console.log («SW ждет»);
           } еще если (Reg.Cature) {
             console.log (активирован SW);
           }
         }). CALL (функция (ошибка) {
           // Регистрация не удалась
           Console.log («Регистрация не удалась с ошибкой« +);
         });
     }
   & lt; / script & gt; 

Начните свой сервер разработки, запустив Начнем NPM И откройте страницу в современном браузере. Мы рекомендуем использовать Google Chrome, так как у него есть хорошая поддержка обслуживания-работника в своих devtools, что мы будем ссылаться на все это руководство. Вы должны увидеть три вещи, зарегистрированные в вашу консоль; два от обслуживающего работника для установить и активировать События, а другая будет сообщение от регистрации.

05. Активировать работника

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

 Self.skipwaiting (); 

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

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

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

06. Подтвердите изменения

Давайте подтвердим это, добавив console.log ('foo') Позвоните в любой из слушателей событий и обновления страницы. Это увлекло нас, потому что мы ожидали увидеть журнал в консоли, когда мы обновлялись, но все, что мы видим, было сообщение «SW активировано». Оказывается, Chrome дважды обновляет страницу, когда будет отмечен обновление на параметрах перезагрузки.

Вы можете подтвердить это, отметив флажок «Сохранить журнал» на панели «Настройки консоли» и снова обновить. Вы должны увидеть зарегистрированные события «Установить и активировать», а также «Foo», а затем «навигации к http: // localhost: 3000 / ', чтобы указать, что страница была перезагружена, а затем конечное сообщение« SW активировано ».

07. Отслеживайте событие Fetch

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

 Self.AddeventListener («Fetch», (событие) = & gt; {
 console.log (событие);
}); 

Наш режим обслуживания использует браузеров, который добавляет свой собственный скрипт на страницу и делает запросы WebSocket. Вы также увидите FetchEvents для них, но мы хотим игнорировать их. Мы также хотим только кэш получить запросы от нашего собственного домена. Итак, давайте добавим несколько вещей для игнорирования нежелательных запросов, в том числе явно игнорируя / Указательный путь:

 Self.AddeventListener («Fetch», (событие) = & gt; {
 // игнорировать запросы Crossdomain
 if (! Event.Request.url.Startswith (self.location.origin)) {
   возвращаться;
 }
 // игнорировать запросы без получения
 Если (Event.request.method! == 'Get') {
   возвращаться;
 }
 // игнорировать браузер синхронизацию
 if (event.request.url.indexof ('browser-sync') & gt; -1) {
   возвращаться;
 }
 // Предотвращение кэшированного маршрута индекса
 если (event.request.url === (self.location.origin + '/')) {
   возвращаться;
 }
 // предотвратить кэширование index.html
 Если (event.request.url.endswith ('index.html')) {
   возвращаться;
 }
 console.log (событие);
}); 

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

08. Кэш активы

Теперь мы можем начать кэшировать эти ответы. Сначала нам нужно дать наше кэш имя. Давайте позвоним нашим V1-активы Отказ Добавьте эту строку в верхнюю часть файла SW.JS:

 const ansetscachename = 'v1-активы "; 

Тогда нам нужно угонировать FetchEvents, чтобы мы могли контролировать, что возвращено на страницу. Мы можем сделать это, используя событие отвечать метод. Этот метод принимает обещание, чтобы мы могли добавить этот код, заменяя console.log :

 // Скажи себе ответить на эту цепочку обещания
 событие. Оспомнить (
   // открыть кеш
   Caches.Open (AssetsCacheName)
     .then ((кэш) = & gt; {
       // сделать запрос в сеть
       Вернуть fetch (event.request)
         (((ответ) = & gt; {
           // кэш ответ
           cache.put (event.request, Response.clone ());
           // вернуть исходный ответ на страницу
           возвратный ответ;
         });
     })
 ); 

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

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

Обновите пару раз и проверьте кеш в devtools & gt; Вкладка приложения. Разверните дерево хранения кэша в левой колонке, и вы должны увидеть ваш кеш со всеми сохраненными ответами.

09. Подавать из кэша

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

// Скажи себе ответить этой цепью
 событие. Оспомнить (
   // открыть кеш
   Caches.Open (AssetsCacheName)
     .then ((кэш) = & gt; {
       // ищите соответствующий запрос в кэше
       return cache.match (event.request)
         . что (((соответствует) = & gt; {
           // Если совпадение найдено, верните кэшированную версию сначала
           Если (сопоставлено) {
             возврат сопоставлен;
           }
           // в противном случае продолжайте в сети
           Вернуть fetch (event.request)
             (((ответ) = & gt; {
               // кэш ответ
               cache.put (event.request, Response.clone ());
               // вернуть исходный ответ на страницу
               возвратный ответ;
             });
         });
     })
); 

Сохраните файл и обновить. Проверьте devtools & gt; Вкладка «Сетевой», и вы должны увидеть (от ServiceWorker), перечисленные в колонке размеров для каждого из статических активов.

Феве, мы закончили. Для такого небольшого количества кода есть много, чтобы понять. Вы должны увидеть, что обновление страницы после того, как все активы кэшируются, довольно многократно, но давайте сделаем быстрое (ненаучность) время загрузки на дроссельное соединение (devtools & gt; вкладка сети).

Без сервисного работника загрузка над моделированной быстрой сетью 3G занимает почти 30 секунд для всего загрузки. С обслуживающим работником, с тем же дроссельным соединением, но загрузка из кэша, он занимает чуть ниже секунды.

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

Следующая страница: Используйте обслуживающий работник, чтобы предложить онлайн-доступ

• 1.
• 2.

Текущая страница: Страница 1: быстрее загрузка