Service Worker как предчуствие

Вячеслав Шебанов

ServiceWorker как предчуствие

Вячеслав Шебанов

Немного обо мне

Веб-приложения это круто!

Чего-то не хватает?

Пример

Service Worker

Возможности?


if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/serviceworker.js')
    .then(function(registration) {
      // Регистрация SW прошла успешно
    }).catch(function(err) {
      // Не получилось зарегестрировать SW
    });
}

Немного о безопасности

Жизненный цикл

Установка


self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        return cache.addAll(urlsToCache);
      }));
});

Пример

Кэш и оффлайн


self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request, {
      cacheName: CACHE_NAME
    }));
});

Пример

Push-нотификации

Push-нотификации


regstate.pushManager.getSubscription()
  .then(subscription => {
    if (!subscription) {
      return regsgate.pushManager
        .subscribe({userVisibleOnly: true});
    }
    return subscription; });

Push-нотификации


subscription = {
  endpoint: "https://url/subId"
}

Push-нотификации


self.addEventListener("push", function(ev) {
  ev.waitUntil(sendNotification()));
});

Push-нотификации


self.addEventListener('notificationclick',
  function(event) {
    event.waitUntil(focusTab());
  });

Пример

bit.ly/sw0615

Фоновые задачи


navigator.serviceWorker.ready.then(function(registration) {
  registration.sync.register({
    tag: 'outbox' // default: ''
  });
});

Фоновые задачи


self.addEventListener('sync', function(event) {
  if (event.registration.tag == 'outbox') {
    event.waitUntil(sendEverythingInTheOutbox());
  }
});

Фоновые задачи


navigator.serviceWorker.ready.then(function(registration) {
  registration.periodicSync.register({
    tag: 'get-latest-news',
    minPeriod: 12 * 60 * 60 * 1000,
    powerState: 'avoid-draining',
    networkState: 'avoid-cellular' });
});

Немного про отладку

Немного про отладку

Немного про отладку

Что дальше?

Ссылки

Контакты