Як побудувати прогресивну веб-додаток

Sep 15, 2025

Як

Мобільний Тепер обліковуються понад половину трафіку веб-сторінок, а веб-додатки дозволяють користувачам робити речі в браузері, який конкурує новими програмами, але є проблема: якість з'єднань та пристроїв змінюється у всьому світі.

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

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

10 кроків до залучення досвіду користувачів

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

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

Якщо ви хочете побудувати плавний сайт, переконайтеся, що веб хостинг це місце і використовуйте пристойний Веб-будівельник .

01. Подавати над HTTPS

Давайте бути чесним: ви все одно повинні робити це. SSL додає додатковий рівень безпеки в Інтернеті, допомагаючи користувачам почувати себе безпечним у використанні вашого сайту. З PWA, HTTPS є важливим для використання працівників служби та дозволяючи встановлення домашнього екрана. Ви можете придбати сертифікат SSL з реєстратора вашого домену за невеликий рахунок, а потім налаштувати його через службу хостингу.

02. Створіть оболонку додатків

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

Наведений нижче приклад береться з програми React.js. Користувач представлений контур програми та індикатором завантаження в index.html. Потім, як тільки завантаження JavaScript і React Boots вгору, повне застосування відображається в рамках оболонки.

 & lt;! - index.html - & gt;
& lt; body & gt;
& lt; div id = "root" & gt;
  & lt; div id = "контейнер" & gt;
  & lt; div class = "внутрішній контейнер" & gt;
  & lt; div id = "заголовок" & gt;
  & lt; img src = "/ icons / icon.png" alt = "логотип" / & gt;
  & lt; h1 & gt; chat & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div id = "завантажувальний контейнер" & gt;
  & lt; img src = "/ assets / icon.png" alt = "логотип" id = "завантажувач" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / body & gt;
// index.js
Retactdom.render (
& lt; додаток / & gt;,
document.getleementByid ('root')
);

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

Щоб натиснути на повний спектр ласощів PWA (Push Setifications, Caching, Install Prompts) Вам знадобиться сервісний працівник.

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

Однак у прикладі, однак, ми покажемо, як торкнутися до трьох ключових службовців життєвого циклу. Це «встановити», коли користувач спочатку відвідує вашу сторінку; "Активувати", прямо перед завершенням реєстрації; і "fetch", коли програма робить мережний запит. Останній є релевантним для кешування та можливостей в автономному режимі.

& lt; сценарій & gt;
  if ("serviceworker" у навігаторі) {
  вікно.addeventlistener ("Навантаження", функція () {
  navigator.serviceworker.register ("service-worker.js"). Потім (функція (реєстрація) {
  // Реєстрація була успішною
  Console.log ("зареєстровано!");
  }, функція (err) {{err) {
  // Помилка реєстрації :(
  Console.Log ("Реєстрація служби служби" не вдалася: ", err);
  }). Ловити (функція (err) {
  console.log (err);
  });
  });
  } else {
  Console.Log ("Сервісний працівник не підтримується");
  }
  & lt; / script & gt;
// service-worker.js
self.addeventlistener ('install', функція () {
  Console.Log ("install!");
});
self.addeventlistener ("Активувати", Event = & GT; {
  Console.Log ("Активувати!");
});
self.addeventlistener ('fetch', функція (подія) {
  console.log ('fetch!', event.request);
});

04. Додати поштові повідомлення

Сервісні працівники дозволяють користувачам отримувати сповіщення Push через Web Push API. Щоб отримати доступ до нього, ви можете торкнутися self.registration.pushmanager з файлу вашого сервісу. Оскільки надсилання поштових сповіщень сильно залежить від налаштування вашого бекенда, ми не будемо зануритися в це тут.

Якщо ви запускаєте програму з нуля, служба Firebase Slower Google поставляється з Cloud Cloud Messages для відносно безболісних сповіщень (запам'ятайте: переконайтеся, що ви зберігаєте файли дизайну в безпеці Cloud Storage) . Наведений нижче код показує, як зареєструватися для поштових повідомлень через PUST API.

 navigator.serviceworker.ready.then (функція (реєстрація) {
  якщо (! registry.pushmanager) {
    сповіщення ("Немає підтримки сповіщень.");
    Повернення False;
  }
  // Підписатися `push letification` з менеджера push
  register.pushmanager.subscribe ({{
  uservisibilonly: true // завжди показувати сповіщення, коли отримано
  })
  .then (функція (підписка) {
  console.log ("Підписано");
  })
  .catch (функція (помилка) {
  Console.Log ("Помилка підписки": ", Помилка);
  });
})

05. Додайте веб-додаток

Щоб створити програму, потрібно включити a маніфест.json У кореневому каталозі програми. Ви можете подумати про це як опис вашої програми, подібної до того, що ви можете подати до App Store. Вона включає в себе іконки, екран сплеск, ім'я та опис.

Існує також деяка конфігурація для того, як ваша програма з'являється, коли він запускається з головного екрана користувача: Ви хочете показати адресний рядок у браузері чи ні? Який колір ви хочете, щоб панель стану був? І так далі. Зверніть увагу, що правильний маніфест.json повинні включати повний спектр розмірів значків для різних пристроїв. Наведений нижче код - це попередній перегляд деяких властивостей, який ваш маніфест може включати.

 {
  "SHORT_NAME": "Чат",
  "Назва": "Чат",
  "Іконки": [
  {
  "SRC": "/ Активи / icon.png",
  "Розміри": "192x192",
  "Тип": "Зображення / png"
  }
  ],
  "START_URL": "/? utm_source = homescreen",
  "background_color": "# e05a47",
  "theme_color": "# e05a47",
  "Дисплей": "автономний"
}

06. Налаштуйте запит встановлення

Коли користувач відвідує PWA з працівником служби та маніфест, Chrome буде автоматично підштовхнути їх, щоб встановити його до свого будинку, з урахуванням наступного: користувач повинен відвідати сайт двічі, з п'ятьма хвилинами між відвідуванням.

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

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

 Window.addeventListener ("Перед \ t", e = & gt; {
  Console.Log ("Перед тим, як випустити подія");
  e.preventdefault ();
  // Stash Подія, тому його можна запустити пізніше.
  це.deferredprompt = e;
  Повернення False;
  });
// Коли ви хочете запустити підказку:
це.deferredprompt.prompt ();
  це.deferredprompt.userchoice.then (вибір = & gt; {
  console.log (вибір);
  });
це.deferredprompt = null;

07. Аналіз ефективності вашого додатка

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

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

Агронні стенди для відповіді (скільки часу потрібно для вашого додатка, щоб відповісти на дії користувача), анімацію (зберігання швидкості анімації на 60-му-с), простою (за допомогою часу, коли ваша програма не робить нічого іншого для завантаження та кеш-додаткових активів) і Навантаження (завантаження додатки за одну секунду або менше).

Ось таблиця значущих орієнтирів для завантаження програми, як постачається Meggin Kearney, Tech Writer AT Веб-фундаменти Google .

delay and user reaction — Натисніть значок у верхньому правому куті, щоб збільшити зображення

08. Аудит до програми з маяком

Google - найбільший чемпіон, який натискає прогресивні веб-програми, як майбутнє Інтернету. Таким чином, він поставив корисний інструмент для керівництва вашого розвитку PWA.

Раніше називають маяк і поставляється як розширення Chrome, як і Chrome 60, це частина Chrome DevTools, під вкладкою "Аудит". Який маяк запускає вашу заявку в різних умовах і вимірює його відповідь і успіх відповідно до керівних принципів PWA. Потім він дає вам рахунок з 100. Він також може забити вашу програму в Інтернеті найкращі практики одночасно.

Наступний текст - це список вимірюваних значень маяк. Використовується також описи.

Реєструє працівник служби
Відповідає з 200 під час офлайн
Містить певний вміст, коли JavaScript недоступний
Використовує https
Перенаправлення HTTP-трафіку до HTTPS
Навантаження на сторінку досить швидко на 3G
Користувач може бути запропоновано встановити веб-додаток
Налаштовано для спеціального екрану сплеску
Адресний рядок відповідає кольорам бренду
Має & lt; meta name = "viewport" & gt; тег з ширина або початковий
Вміст правильно розміщений для перегляду

Ця стаття спочатку з'явилася в веб-дизайнері; Підписатися тут .

Пов'язані статті:

PWAS: Ласкаво просимо до мобільної революції
Як використовувати анімацію в мобільних додатках
9 чудових секретів PWA

Як побудувати прогресивну веб-додаток

01. Подавати над HTTPS

02. Створіть оболонку додатків

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

04. Додати поштові повідомлення

05. Додайте веб-додаток

06. Налаштуйте запит встановлення

07. Аналіз ефективності вашого додатка

08. Аудит до програми з маяком

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

Як намалювати тварин: 15 кращих порад

Як використовувати хмарне сховище як творчість

Зупиніть боти за допомогою Google ReCAPTCHA

Як створити цифрові повітряні пневматичні картини

Як реалізувати світло або темні режими в CSS

Як намалювати ELVEWEAD

Як спроектувати чутливі та агностичні форми

Як отримати більше від цифрових текстур

Категорії