Як змусити ваш додаток працювати в автономному режимі за допомогою JavaScript

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

Другим ефектом цієї мобільності є повільне завантаження важких веб-сайтів: Amazon виявив, що лише 100 мілісекунд додаткового часу завантаження коштують їм 1% продажів.

У цих ситуаціях ми хотіли б мати офлайн-доступ до нашого вмісту. Ось чому існують такі інструменти, як Instapaper та Pocket. Spotify та Netflix також дозволяють завантажувати мультимедіа для офлайн-використання.

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

Пора Інтернету вийти з мережі.

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

Що таке працівник служби (SW)?

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

Агентство BETC створило демонстраційний веб-сайт за назвою whentheinternetisdown.com для французької телекомунікаційної компанії Bouygues. Це працює лише в автономному режимі і відчуває себе чарівно. Піди спробуй :)

Чарівність сайту робить кешування: ви можете повернутися через 3 тижні, 1 місяць, 1 рік, все ще без зв’язку, і отримати доступ до всього вмісту. - Максим Хайг, керівник цифрової студії BETC

Гаразд, це круто, скажи мені, як це зробити тоді.

Добре, почнемо з деяких передумов:

  • Для того, щоб використовувати SW, ви повинні увімкнути https на своєму веб-сайті.
  • Ви повинні добре розуміти, як працює обіцянка JavaScript.
  • SW працюють у всіх сучасних браузерах, крім нашого друга IE.
  • Навіть якщо це JavaScript, вони працюють у контексті веб-працівників. Що означає: відсутність DOM і запуск поза основним потоком.
  • Зрозумійте, як працюють бази даних.
  • Код працівника служби обслуговування повинен бути в окремому файлі JavaScript. Приклад: service-worker.js

Життєвий цикл працівників сфери обслуговування

Щоб мати змогу працювати, SW повинні бути зареєстровані у вашій програмі, а потім встановлені. Перед цим слід перевірити, чи сумісні SW з вашим клієнтом.

1) Реєстрація

Зареєструйте свій SW-файл, якщо такий є. Це поверне обіцянку, тому ви зможете впоратися з помилками. Ви також можете вказати область URL-адрес у параметрах реєстрації.

2) Встановлення

Службовці працюють на основі подій. Коротко кажучи, вам потрібно приєднати зворотні виклики до подій, як це було б зробити з елементом element.addEventListener. Першою подією, яку потрібно використати, є подія встановлення. Настав час кешувати всі ваші життєво важливі ресурси, як Javascript, CSS, HTML, Images ... Тут Cache API приєднується до партії!

Потім відкрийте метод або створіть кеш, пов’язаний з потрібним ім’ям. Повернуте обіцянку потрібно обернути у event.waitUntil (), що призведе до затримки встановлення працівника служби до вирішення обіцянки. В іншому випадку подія встановлення не вдається, і працівник служби буде відхилений.

Будьте обережні з кешуванням: пам’ять користувача дуже дорога, тому не зловживайте нею. Також будьте обережні: подію встановлення можна викликати лише один раз, і вам потрібно буде оновити програмне забезпечення, щоб змінити його.

3) Активація

Цей трохи тонкий.

Після завершення встановлення працівник служби ще не активний: ми перебуваємо у встановленому стані.

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

Фаза активації зручна, коли ви оновлюєте SW. Найпоширеніший випадок - очищення кеш-пам'яті попереднього встановленого SW.

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

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

Насправді не має значення, коли ви телефонуєте skipWaiting (), якщо це відбувається під час або перед очікуванням. Це досить часто називати це у випадку встановлення.

Фу! Давайте зробимо перерву і підведемо підсумки побаченого:

  • Працівники сервісних служб - це частини JavaScript, які включають такі функції в режимі офлайн, як кешування.
  • Ми дослідили життєвий цикл SW: реєстрація, установка, активація
  • Ми дізналися, як реалізувати випадки поширеного використання, такі як: кешування ресурсів та очищення кеш-пам’яті за допомогою Cache API.
  • Ми побачили, що self.skipWaiting та self.clients.claim дозволяють нам швидше активувати SW, щоб швидше вловлювати події.

Гаразд, рухаючись прямо…

4) Витяг

Подія вибору дозволяє нам перехоплювати мережеві запити та зберігати відповіді або налаштовувати їх.

Головною перевагою цього хука є повернення кешованих ресурсів замість здійснення виклику запиту. Вам слід поглянути на Fetch API для обробки викликів запитів.

Ми не можемо охопити всі можливості, які пропонують працівники сфери обслуговування в одній статті. Тим не менше, я закликаю вас вивчити, що можливо: Custom 404, API фонової синхронізації для офлайн-аналітики, шаблонування на стороні ServiceWorker…. майбутнє виглядає захоплююче!

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

Зберігайте власні дані за допомогою IndexedDB

Загальним керівництвом щодо зберігання даних є те, що URL-адресовані ресурси, що адресуються, слід зберігати за допомогою інтерфейсу кеш-пам’яті, а інші дані - за допомогою IndexedDB. Наприклад, файли HTML, CSS та JS повинні зберігатися в кеші, тоді як дані JSON повинні зберігатися в IndexedDB. Зауважте, що це лише орієнтир, а не тверде правило. (джерело)

Коротше, ми побачимо, коли вам не слід використовувати API кеш-пам’яті, а замість цього IndexedDB. Обидва вони є асинхронними та доступними для службовців, веб-працівників та віконного інтерфейсу. Хороша новина полягає в тому, що він добре підтримується навіть в останніх версіях IE.

IndexedDB - це база даних NoSQL. Дані IndexedDB зберігаються як пари ключ-значення у сховищах об'єктів, а не в таблицях. Одна база даних може містити будь-яку кількість сховищ об’єктів. Щоразу, коли значення зберігається в сховищі об’єктів, воно пов’язується з ключем. Це виглядає так:

Досить класично, правда? Головне, що слід зрозуміти - це концепція ключового шляху. Він повідомляє браузеру, який ключ використовувати для вилучення даних із сховища об’єктів або індексу.

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

Висновок

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

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

Ви навіть можете використовувати бази даних в автономному режимі: для чого створено IndexedDB. Ці можливості в режимі офлайн, безумовно, є частиною майбутнього Інтернету, тому вони добре поєднуються з новими типами веб-сайтів, які створює Google: Progressive Web Apps.

Подальше читання:

  • Автономна кулінарна книга: //developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
  • PWA та офлайн: //developers.google.com/web/ilt/pwa/lab-offline-quickstart
  • Лабораторна робота: Кешування файлів із працівником служби: //developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
  • Життєвий цикл працівника служби: //developers.google.com/web/fundamentals/primers/service-workers/lifecycle
  • Демістифікація життєвого циклу працівника сфери послуг: //scotch.io/tutorials/demystifying-the-service-worker-lifecycle
  • Швидше активуйте працівників служб: //davidwalsh.name/service-worker-claim
  • Дані в режимі реального часу в службі обслуговування: //developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
  • Проіндексовано DBОсновні поняття: //developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
  • Початок роботи з постійним автономним сховищем з IndexedDB: //itnext.io/getting-started-with-persistent-offline-storage-with-indexeddb-1af66727246c