Зробіть свою програму Work Offline з працівниками служби

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

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

Створення веб-сайту? Потік вашого процесу з великим Веб-будівельник і підтримувати його пристойним веб хостинг Сервіс. І отримайте зберігання з ними хмара зберігання Варіанти.

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

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

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

Життєвий цикл обслуговуючого працівника

Життя працівника служби слідкує за простим потоком, але це може бути трохи заплутаним, коли ви звикли до сценаріїв JS просто працюючи негайно:

Встановлення & gt; Очікування (встановлено) & gt; Активація & gt; Активовано & gt; Надлишок

Коли ваша сторінка вперше завантажена, реєстраційний код, який ми додали index.html Починає встановлення сервісного працівника. Коли немає існуючого працівника, новий працівник служби буде активований відразу після встановлення. Веб-сторінка може мати лише один сервісний працівник за один раз.

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

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

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

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

01. Клон демо-додаток

Гаразд, давайте почнемо дізнатися, як створити веб-додаток за допомогою працівників служби. Для цього навчального посібника вам потрібні останні версії Node.JS та NPM, встановленого на вашому комп'ютері.

Ми збили демо-додаток, що ми будемо використовувати як основу для цього підручника ( Клонувати демо-додаток тут ). Додаток - це веселий проект, який отримує п'ятиденний прогноз погоди на основі місця розташування користувача. Тоді це буде перевіряти, чи дощ прогнозується до кінця дня та оновити UI відповідно.

Вона була побудована неефективно (навмисно), використовуючи великі, непотрібні бібліотеки, такі як jQuery та bootstrap, з великими неоптимізованими зображеннями, щоб продемонструвати різницю у виконанні під час використання працівника служби. В даний час він зважує в смішному 4.1MB.

02. Отримайте ключ API

Для того, щоб отримати дані погоди з API, вам потрібно буде отримати безкоштовний ключ API від Відкритий :

Після того, як ви отримаєте ключ, відкрийте index.html і шукати window.api_key змінна в & lt; head & gt; . Вставте ключ у значення:

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

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

Тепер ми готові почати працювати над проектом. Перш за все, давайте встановимо залежності, запустивши:

    npm install

Існує два завдання для інструменту збірки. Запустити npm починається Щоб запустити сервер розробки на порт 3000. Run npm run build для підготовки версії "виробництва". Майте на увазі, що це лише демо, так що не є дійсно виробничою версією - немає ніякого мінімуму або нічого - файли просто отримують "revved".

Алгоритм використовується для створення хешу, такого як 9C616053E5, з вмісту файлу. Алгоритм завжди буде виводити той самий хеш для того ж вмісту, що означає, що до тих пір, поки ви не змінюєте файл, хеш не зміниться. Потім HASH приєднується до назви файлу, тому, наприклад, стилі. CSS може стати стиль-9C616053E5.css. Хеш являє собою ревізійну файлу - отже "Revved".

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

04. Введіть свого працівника служби

Тепер давайте почнемо з нашим працівником служби. Створіть файл під назвою SW.JS в корені ст каталог. Потім додайте ці дві слухачі подій, щоб увійти установлювати і активувати Події:

 Self.addeventlistener ('install', (event) = & gt; {
      console.log (подія);
    });

    self.addeventlistener ("Активувати", (подія) = & gt; {
      console.log (подія);
    }); 

Точний сам Змінна тут являє собою обсяг глобального читання працівників. Це трохи схоже вікно Об'єкт на веб-сторінці.

Далі нам потрібно оновити свій файл index.html та додати команди, щоб встановити працівника служби. Додайте цей сценарій безпосередньо перед закриттям & lt; / body & gt; тег. Він зареєструє наш працівник та зареєструє свій поточний статус.

 & lt; сценарій & gt;
     if ("serviceworker" у навігаторі) {
       navigator.serviceworker.register ('/ sw.js')
         .then (функція (reg) {
           if (reg.installing) {
             Console.Log ("Встановлення SW");
           } Інакше, якщо (reg.waiting) {
             Console.Log ("Waining");
           } Інакше, якщо (reg.active) {
             Console.Log ("Активовано");
           }
         }). Спіймати (функція (помилка) {
           // Помилка реєстрації
           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 / ', щоб вказати, що сторінка була перезавантажена, а потім, а потім, після чого останній" Activated "повідомлення.

07. Відстеження заходу

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

 Self.addeventlistener ('fetch', (подія) = & gt; {
 console.log (подія);
}); 

Наш режим обслуговування використовує browsersync, який додає свій власний скрипт на сторінку та робить запити WebSocket. Ви також побачите для них fetchevents, але ми хочемо ігнорувати їх. Ми також хочемо кешувати отримувати запити з власного домену. Отже, давайте додати кілька речей, щоб ігнорувати небажані запити, в тому числі явно ігнорувати / Індексний шлях:

 Self.addeventlistener ('fetch', (подія) = & gt; {
 // Ігнорувати запити на перехрестя
 Якщо (! event.request.url.startswith (self.location.origin)) {
   повернення;
 }
 // Ігнорувати не-отримати запити
 if (event.request.method! == 'get') {
   повернення;
 }
 // ігнорувати браузер-синхронізацію
 if (event.request.url.indexof ('browser-sync') & gt; -1) {
   повернення;
 }
 // запобігання кешованим маршрутом індексу
 if (event.request.url === (self.location.origin + '/')) {
   повернення;
 }
 // запобігти кешованому index.html
 if (event.request.url.endswith ('index.html')) {
   повернення;
 }
 console.log (подія);
}); 

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

08. Кеш графіків

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

 Const Assetscachename = 'V1-активи'; 

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

 // Розкажіть отримання, щоб відповісти з цим обіцянним ланцюгом
 подія
   // відкрийте кеш
   caches.open (Assetscachename)
     .then ((cache) = & gt; {
       // Зробити запит до мережі
       return fetch (event.request)
         .then ((відповідь) = & gt; {
           // кеш-відповідь
           cache.put (event.request, repartment.clone ());
           // повернути оригінальну відповідь на сторінку
           зворотній відповідь;
         });
     })
 ) 

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

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

Оновити пару разів і перевірте кеш у DevTools & GT; Вкладка програми. Розгорніть дерево зберігання кешу в лівому стовпчику, і ви повинні побачити кеш з усіма збереженими відповідями.

09. Подавати з кешу

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

// розповідайте отримати відповідь з цим ланцюгом
 подія
   // відкрийте кеш
   caches.open (Assetscachename)
     .then ((cache) = & gt; {
       // шукати відповідний запит у кеш-пам'яті
       return cache.match (event.request)
         .then (((відповідний) = & gt; {
           // Якщо збіг знайдеться повернути кешовану версію першу
           if (відповідний) {
             Повернення відповідності;
           }
           // Інакше продовжуйте мережу
           return fetch (event.request)
             .then ((відповідь) = & gt; {
               // кеш-відповідь
               cache.put (event.request, repartment.clone ());
               // повернути оригінальну відповідь на сторінку
               зворотній відповідь;
             });
         });
     })
) 

Збережіть файл і оновіть. Перевірте devtools & gt; Вкладка Мережа та ви повинні побачити (від Serviceworker), перерахованого у стовпці розміру для кожного з статичних активів.

Phew, ми зробили. Для такої невеликої кількості коду є багато чого зрозуміти. Ви повинні побачити, що освіжаючи сторінку, як тільки всі активи кешовані досить snappy але давайте зробимо швидку (ненаукова) перевірка часу завантаження на дроселевому з'єднанні (devtools & gt; мережева вкладка).

Без робочого обслуговування, завантаження над імітаційною мережею Fast 3G займає майже 30 секунд для навантаження. Завдяки службовому працівнику, з тим самим тривожним з'єднанням, але завантаження з кешу, це займає лише секунду.

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

Наступна сторінка: Використовуйте працівника служби, щоб запропонувати доступ до Інтернету

• 1
• 2

Поточна сторінка: Сторінка 1: швидше завантаження