Як перетворити ваш сайт в мобільний застосунок: знайомство з PWA

Ви, напевно, чули про Progressive Web Apps (PWA). Але в цій статті я не буду описувати тонкощі роботи та зазирати під капот. Лише нагадаю, що PWA — це сайти, що можна додати на домашній екран смартфона і вони будуть працювати без інтернету. Натомість я розповім як без складнощів перетворити ваш сайт на PWA.

Перевірка вашого сайту

Перш за все, нам потрібен сайт, який ми й перетворимо в PWA. Я не буду показувати як створити сайт, будемо вважати, що він у вас вже є.

Щоб перевірити наскільки добре сайт підтримує PWA, ви можете використовувати Lighthouse — розширення для Chrome. Після встановлення розширення відкрийте свій сайт та клікніть по іконці Lighthouse. Воно зробить деякі обчислення та відкриє нову вкладку зі звітом. Нас цікавлять лише числа на початку сторінки.

36/100 це дуже погано, будемо виправляти.

Створіть іконку для вашого додатку

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

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

Маніфест

Наступним кроком буде створення маніфесту. Маніфест описує ваш сайт: його назву, улюблений колір і іконки, які він використовує. У вас вже є частина маніфесту з попереднього кроку, але цього недостатньо. Ми будемо використовувати генератор маніфесту. Просто заповніть поля (якщо не впевнені в якомусь полі — залиште як є), а сервіс зробить все за вас. Справа буде згенеровано JSON, скопіюйте його в свій mainfest.json.

Після цих кроків результати стали краще:

Service worker

Service worker — це ще один файл, що потрібно додати. Саме він дозволяє сайту працювати оффлайн. Це обов'язкова вимога PWA.

Service worker це досить складна штука, я так і не зміг упоратися з цим сам. На щастя, мій знайомий порекомендував sw-toolbox і показав як ним користуватися.

Щоб створити service worker вам потрібно:

• Зареєструвати його в head в index.html:

<script>
if ("serviceWorker" in navigator) { 
  window.addEventListener("load", function() {   
    navigator.serviceWorker.register("/sw.js").then(
      function(registration) { 
        // Registration was successful
        console.log("ServiceWorker registration successful with scope: ", registration.scope); }, 
      function(err) { 
        // registration failed :( 
        console.log("ServiceWorker registration failed: ", err); 
      }); 
  });
}
</script>

• Додайте sw-toolbox до вашого проекту. Вам потрібен лише один файл.

• Створіть новий файл з назвою sw.js з таким вмістом:

"use strict";
importScripts("sw-toolbox.js");
toolbox.precache(["index.html","style/style.css"]);
toolbox.router.get("/images/*", toolbox.cacheFirst); toolbox.router.get("/*", toolbox.networkFirst, { networkTimeoutSeconds: 5});

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

Знову перевіримо в Lighthouse:

Якщо ви хочете щоб ваш PWA не просто кешував певні сторінки, а робив щось складніше, ви можете спробувати pwabuilder.

Хостинг

Ви зробили PWA, тепер час поділитися ним з рештою світу! Найпростішим способом для цього є GitHub Pages. Для того щоб скористатися ним, вам потрібен акаунт на GitHub. Створіть репозитарій з назвою ваш_нікнейм.github.io та додайте до нього файли вашого веб-сайту. Якщо ви до цього не працювати з git, у нас є чудовий туторіал.

На цьому все, базові налаштування завершені.

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

Сподіваюсь, ця стаття допоможе вам ближче познайомитися з PWA. На результат можна подивитися тут, а тут — код.