Создание приложений, которые работают в автономном режиме

Sep 12, 2025
Инструкции

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

01. Сервер HTTPS

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

Однако для целей развития мы можем запустить без HTTP с http: // localhost / разрешено как исключение из этого правила. Самый простой способ начать работу с НПМ http-server. упаковка. 

 NPM устанавливает HTTP-Server -G
HTTP-Server -P 8000 -C-1

02. Настройте основную страницу

Нет ничего на сервере прямо сейчас, поэтому давайте сделаем основную страницу для обслуживания. Мы создадим новый файл index.html, и когда мы запускаем сервер, он теперь будет доступен в http: // localhost: 8000 Отказ

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

 & lt; otectype html & gt;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta charset = "UTF-8" / & gt;
  & lt; title & gt; сервисный работник & lt; / title & gt;
  & lt; script src = "site.js" & gt; & lt; / script & gt;
  & lt; link rel = "stylesheeet" type = "Text / CSS" href = "custom.css" & gt;
  & lt; / head & gt;
  & lt; body & gt;
  & lt; header & gt;
  & lt; h1 & gt; Добро пожаловать & lt; / h1 & gt;
  & lt; / header & gt;
  & lt; div id = "Содержание" и GT;
  & lt; p & gt; содержание здесь & lt; / p & gt;
  & lt; img src = "Kitty.jpg" ширина = "100%" и GT;
  & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;

03. Зарегистрируйте услугу

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

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

  • Установка: После зарегистрированного служебного работника его установка обычно используется для загрузки и кэша статического контента
  • Установлены: Работник теоретически готов к использованию, но не сразу активируется
  • Активация: Установленный сервисный работник активирует себя, если либо нет существующего сервисного работника, либо определенные условия приводят существующие срок действия; Активация обычно используется для очистки старых файлов из кэшированного автономного контента
  • Активировано: Сервис сейчас имеет контроль над документом и может обрабатывать запросы
  • Избыточный: Если обслуживающий работник не удалось установить или активировать, или если он заменен более новым служебным работником

04. Проверьте, вы зарегистрированы

Давайте зарегистрируем сервисный работник. Это эффективно указывает браузер к файлу JavaScript, который определяет поведение работника обслуживания. Регистрация выполняется с использованием объекта ServiceWorker, который является точкой записи на API. Мы также проверяем API на самом деле в браузере, прежде чем пытаться сделать это.

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

 Если («ServiceWorker» в навигаторе) {
  window.addeventListener («нагрузка», функция () {
  Navigator.serviceWorker.register («ServiceWorker.js», {Scope: './' itly {).
  Console.log («Сервисский работник успешно зарегистрирован».);
  }, функция (ошибка) {
  Console.log («Ошибка регистрации сервиса:« + ошибка);
  });
  });
}

05. Реализуйте обслуживающий рабочий

Далее нам нужно для реализации самого работника услуг. Работники обслуживания могут слушать ряд событий, связанных с их собственным жизненным циклом и активностью на странице. Наиболее важными из них устанавливаются, активируют и извлекают.

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

 var ceencache = 'демо-кеш';
self.addeventListener («Установка», событие = & GT; {
  Event.waituntil (
  Caches.Open (CurrentCache). Затем (функция (кэш) {
  console.log («Добавление содержимого в кэш».);
  return cache.addall ([
  './index_offline.html',
  './kitty_offline.jpg',
  './Пользовательские CSS'
  ]);
  })
  );
});

06. Fetch Event.

Наша страница теперь будет кэшировать содержимое при загрузке, но нам нужен некоторый механизм для перехвата запросов и перенаправить их к этому кеше. Для этого нам нужно слушать принести события, которые срабатывают, когда запрос, такой как получение нашего index.html. Файл сделан по всей сети. Затем мы сопоставляем запрос к кэше и обслуживаете кэшированный ресурс, если он найден. В противном случае мы возвращаемся к запросу Fetch API на сервер.

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

 Self.AddeventListener ('fetch', event = & gt; {
  событие. Оспомнить (
  Caches.match (Event.Request). Затем (ответ = & gt; {
  Обратный ответ || fetch (event.request);
  })
   );
    });

07. Расширить событие Fetch

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

Для достижения этого мы можем продлить наш принести Реакция события дополнительно проверять конкретно для навигационных запросов и отвечать на разные автономные страницы, когда вы обнаружены. Этот index_offline.html. Файл может быть вариантом вашей онлайн-страницы или что-то совершенно другое, а также может использовать другие ресурсы, которые вы кэшировали, такие как Пользовательские CSS Отказ 

 Self.AddeventListener ('fetch', event = & gt; {
  Если (event.request.mode === 'навигация') {
  событие. Оспомнить (
  fetch (event.request) .catch (ошибка = & gt; {
  console.log ("страница недоступна. Возвращение оффлайн контента");
  Возврат Caches.match ('./ index_offline.html');
  })
  );
  } еще {
  событие. Оспомнить (
  Caches.match (Event.Request). Затем (ответ = & gt; {
  Обратный ответ || fetch (event.request);
  })
  );
  }
});

08. Удалить кэш

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

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

 IS.addeventListener («активация», событие = & GT; {
  var activecaches = [currentcache];
  Console.log (активированный сервисный работник. Проверка кеша обновляется. »);
  Event.waituntil (
  cachees.keys (). Затем (кейлист = & gt; {
  Вернуть Promise.all (Keylist.Map (Key = & GT; {
  Если (activeCaches.indexof (ключ) === -1) {
  console.log («Удаление старого кэша» + ключ);
  Возврат кэши. Оделет (ключ);
  }
  }));
  })
  );
});

Эта статья была опубликована в журнале Web Designer # 268. Подпишись сейчас.

Прочитайте больше:

  • Руководство кодера к API
  • Начните с WebGL, используя Three.js
  • 12 огромных тенденций веб-дизайна на 2018 год

Инструкции - Самые популярные статьи

Создайте бог лучей в V-Ray

Инструкции Sep 12, 2025

В реальной фотографии лучи света на их самых заметных, когда у них есть..

воссоздать мангу классика

Инструкции Sep 12, 2025

Я был огромным поклонником манги с детства, и нельзя скрывать влияние, ..

Осветите вашу 3D-работу с зернами купола

Инструкции Sep 12, 2025

Использование купольных огней было одним из величайших достижений в с..

Нарисуйте настройку игры на фантастике в Photoshop

Инструкции Sep 12, 2025

Я всегда думал, что оригинальность найдена где-то между тем, что вам нр�..

Как создать глазури акварелью

Инструкции Sep 12, 2025

Для этого семинара я буду делать вам шаг за шагом через одну из моих ка�..

Правила отзывчивой веб-типографии

Инструкции Sep 12, 2025

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

Как рисовать с аффинностью фото для iPad

Инструкции Sep 12, 2025

Аффинность фото для iPad является великим редактор фото , ..

Как строить миры для кино

Инструкции Sep 12, 2025

Когда попросили сделать семинар по созданию фэнтезийной среды, я поду�..

Категории