Побудувати додатки, які працюють в автономному режимі

Sep 12, 2025

Як

Довгий час, автономні функціональні можливості, фонової синхронізації та поштових сповіщень диференційовано рідними програмами з веб-конверт. Точний Сервісний працівник API це технологія, що міняє гру, яка виділяє ігрове поле. У цьому підручнику ми будемо використовувати його для створення сторінки, яка може виконувати вміст, навіть якщо немає підключення до Інтернету.

Завантажте код з файлу

01. Сервер HTTPS

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

Однак, для цілей розвитку ми можемо запустити без HTTPS http: // localhost / дозволяється як виняток з цього правила. Найпростіший спосіб почати з NPM http-server пакет.

 NPM встановлює http-server -g
http-server -p 8000 -C-1

02. Налаштуйте основну сторінку

На сервері немає нічого на сервері, тому давайте зробимо основну сторінку, щоб служити. Ми створимо новий файл index.html, і коли ми запускаємо сервер, тепер буде доступним http: // localhost: 8000 .

На цьому етапі ви побачите, що якщо ви припините сервер HTTP та оновіть сторінку в браузері, ви отримаєте сторінку помилки, оскільки сайт не може бути досягнутий. Це цілком очікується, оскільки ми ще не кексували будь-який автономний вміст.

 & lt;! DOCTYPE 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 = "стильний таблиця" type = "text / css" href = "custom.css" & gt;
  & lt; / head & gt;
  & lt; body & gt;
  & lt; заголовок & gt;
  & lt; h1 & gt; Ласкаво просимо & lt; / h1 & gt;
  & lt; / заголовок & 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" в навігаторі) {
  вікно.addeventlistener ("Навантаження", функція () {
  navigator.serviceworker.register ('serviceworker.js', {scope: './' }.then (функція (registration) {
  Console.Log ("Сервісний працівник успішно зареєстрований");
  }, Функція (помилка) {
  Console.Log ("Помилка реєстрації Сервісного працівника:" + Помилка);
  });
  });
}

05. Реалізація працівника служби

Далі нам потрібно реалізувати самого працівника служби. Сервісні працівники можуть слухати різноманітні події, пов'язані з власним життєвим циклом та діяльністю на сторінці. Найважливішими є встановлені, активізуються та отримують.

Почнемо, створюючи слухач для установлювати Подія, що тригерувала після завершення роботи працівника. Це дозволяє нам доручити працівник служби додавати певний вміст в режимі офлайн у поточній папці до кешу. Нам також потрібно назвати наш кеш - оскільки старі кеші можуть зберігатися, оновлення / версій цієї назви кешу дозволяє вам подавати нові версії вмісту пізніше.

 var currenccache = 'demo-cache';
self.addeventlistener ('install', event = & gt; {
  event.waituntil (
  caches.Open (ПостійнаCache) .then (функція (кеш) {
  Console.Log ("Додавання вмісту до кешу");
  Return Cache.addall ([
  './index_offline.html',
  './kitty_offline.jpg',
  './custom.css'
  ]);
  })
  );
});

06.

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

На цьому етапі варто зазначити, що ми маємо важку залежність від JavaScript обіцяє працювати. Це може бути трохи складним, тому варто ознайомитись з тим, якщо ви не використовували їх раніше.

 Self.addeventlistener ('fetch', event = & gt; {
  подія
  cachees.match (event.request) .then (відповідь = & gt; {
  Повернення відповіді || fetch (event.request);
  })
   );
    });

07. Розширити захоплення

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

Для досягнення цього ми можемо продовжити нашу прилетіти Відповідь події додатково перевіряє спеціально для навігаційних запитів та відповідати на іншу сторону, коли вона виявляється. Це index_offline.html Файл може бути варіацією своєї онлайн-сторінки або щось зовсім інше, і також може використовувати інші ресурси, які ви кеували такі, як custom.css .

 Self.addeventlistener ('fetch', event = & gt; {
  if (event.request.mode === 'навігація') {
  подія
  fetch (event.request) .catch (помилка = & gt; {
  console.log ("Page недоступна. Повернення вмісту в автономному режимі");
  повернення кеш.match ('./ index_offline.html');
  })
  );
  } else {
  подія
  cachees.match (event.request) .then (відповідь = & gt; {
  Повернення відповіді || fetch (event.request);
  })
  );
  }
});

08. Видалити кеш

Там ще одна річ, яку нам потрібно. Якщо ви зараз спробуйте змінити свій автономний вміст, ви знайдете його не оновлювати, коли ви перевіряєте свою сторінку - ви все ще отримуєте стару версію! Це тому, що старі файли все ще кешовані.

Вам потрібно реалізувати щось, щоб очистити застарілі файли з кешу, щоб запобігти їх подачі. Це робиться, відповідаючи на активувати Подія та видалення всіх кеш, які не відповідають імені, зазначеному у поточному місці. Після цього ви можете додати номер версії, щоб постійного екрана кожного разу, коли ви змінюєте свій вміст в автономному режимі, щоб його оновити.

 This.addeventlistener ("Активувати", Event = & GT;
  var activeecaches = [currenccache];
  Console.Log ("Активована служба. Перевірка кеш-пам'яті є актуальним");
  event.waituntil (
  cachees.keys (). Потім (keylist = & gt; {
  rettain promise.all (keylist.map (key = & gt; {
  if (activeecaches.indexof (ключ) === -1) {
  Console.Log ("Видалення старого кешу" + ключ);
  Повернення кеш.Делете (ключ);
  }
  }));
  })
  );
});

Ця стаття була опублікована у журналі Web Designer Magazine # 268. Підпишіться зараз.

Читати далі:

Керівництво кодера до API
Початок роботи з WebGL за допомогою трьох.js
12 Веб-дизайн веб-дизайну на 2018 рік

Побудувати додатки, які працюють в автономному режимі

01. Сервер HTTPS

02. Налаштуйте основну сторінку

03. Зареєструйте працівника служби

04. Перевірте, що ви зареєструвалися

05. Реалізація працівника служби

06.

07. Розширити захоплення

08. Видалити кеш

Як - Найпопулярніші статті

Як використовувати довідкові зображення: 13 основних порад для художників

Побудуйте адаптивні макети без засобів масової інформації

висвітлюйте свою 3D-роботу з купольними вогнями

Зробити реалістичне 3D волосся та хутро в 3DS Max і V-Ray

Зробіть траву в нереальному двигуні

Створити стиль кадрів у Photoshop

Намалюйте портрет, як старі майстри

Як намалювати Harley Quinn

Категорії