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

Більшість розробників, по крайней мере, почули деякий шум навколо Прогресивні веб-програми. Вони широко підтримуються такими технологічними компаніями, як Google, і швидко стають Норма для веб-додатків з декількома пристроями.

Але, що саме Різниця між типовою а прогресивний веб-додаток?

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

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

Що таке Прогресивні веб-програми?

Прогресивні веб-програми (або PWA) скористайтеся перевагами API веб-переглядача створити власний досвід програм у браузері на будь-якому пристрої.

Зрештою, Progressive Web Apps охоплюють a кілька технологій що розробники можуть використовувати для створення потужних рідних програм. Багато хто прийшов Веб-API наприклад, API працівників служби або Push API.

Існує чимало вимог назвати щось PWA, але це найважливіші з них:

Є повністю мобільне реагування.
Дотримується прогресивне покращення.
Здатний встановити локально на смартфонах і планшетах.
Запускається в автономному режимі без Інтернету, використовуючи службовців.
Розділяє вміст від функціональності за допомогою оболонки програми.
Налагоджується на HTTPS для більшої безпеки.
Видимий у пошуку Google.
Має динамічні сторінки, подібні до додатків але кожен ще має власну URL-адресу.

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

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

Службовці

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

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

Використання API службовця служби є важливо для запуску PWA, що підтримується в автономному режимі. Ось як ви передавати дані між переглядами і як ви можете запитувати дані з локальної бази даних. Але, це в основному просунуті речі, які ви дізнаєтеся, працюючи над проектом PWA.

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

Якщо ви сподіваєтеся створити Progressive Web App почати з API службовця служби. Просто возитися з ним і встановити просту демо-версію. Це створить основу для пізніше створення спеціальних можливостей програми та сторінок що всі проходять через службовців.

Для початківців і докладні фрагменти коду, Я спеціально рекомендую ці ресурси:

Початок роботи з працівниками служби
Початок роботи з працівниками служби
Зразок працівника служби: користувальницький примірник сторінки

Оболонка програми

Більшість нативних програм слідуйте архітектурі оболонки програми де дані та код програми повністю окремо від інтерфейсу. Оболонка програми може бути кешуються локально тому кожна сторінка завантажується неймовірно швидко.

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

Більшість програм мають дуже проста додаток оболонки і ви повинні створити свою архітектуру простота на увазі.

Як правило, оболонка програми має ці основні елементи:

Посилання на головну навігаційну панель.
Кнопка "Оновити" (необов'язково).
Контейнер фону сторінки.

Тут можна знайти хороший приклад Архітектура оболонки Google I / O Progressive Web App. Вони також пропонують декілька порад щодо побудови власної архітектури оболонки, кешування її та потягнувши його автоматично на кожну сторінку.

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

Онлайн-і офлайн-підтримка

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

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

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

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

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

Живі приклади

Вивчення живих людей, які бажають жити, і те, як вони працюють, - це чудовий спосіб вчитися. Проте ринок Progressive Web App є все ще з'являються, так багато кращих розкидані по різних куточках Інтернету.

Але, завдяки Галерея гірських порід PWA, Я курував кілька дивовижних прикладів, щоб показати, що PWAs дійсно можуть зробити.

1. Конвертор валют

Це досить просто Конвертер валют приймає курси обміну та обчислює поточний Відмінності між тонною валют у всьому світі.

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

Це лише деякі з функцій, які ви очікуєте в будь-якому типовий Progressive Web App. Це додаток також можна зберігати локально для роботи в автономному режимі, хоча для підключення до файлу JSON перевіряти поточні курси обміну.

2. Англійські акценти

Я просто обожнюю цю веб-додаток, тому що це унікальний і неймовірно добре продуманий. The Карта англійських акцентів курує відео в Інтернеті де люди мають акценти з конкретних регіонів США та Великобританії.

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

Внутрішні органи працюють Реакція / Redux с Firebase і a Підключення API до Карт Google. Безумовно, це чудовий приклад чогось досить простим для початківців вчитися і вчитися.

3. Pokedex.org

Інша досить проста PWA це Pokedex додаток створений Ноланом Лоусоном. Він також вільно публікував цей код на GitHub, Отже, це ще один проект Варто зазирнути навколо і навчатися.

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

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

4. Фліпкарт

Нарешті і найдивніше, давайте подивимося Сайт Flipkart. Це повне Магазин електронної комерції, по суті, є прогресивним Web App.

Його повністю реагує і завантажує сторінки динамічно. URL-адреси сторінок додаються до веб-переглядача, тому ви можете копіювати та вставляти їх та поділитися ними, як типовий веб-сайт.

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

І, хоча я не міг знайти репо для всього вихідного коду Flipkart, є a Flipkart сторінка на GitHub с менші фрагменти коду від команди розробників.

Дізнайтеся більше

Прогресивні веб-програми неймовірно популярний і, безсумнівно, вийде пара як більше розробників переходять з рідних / гібридних додатків.

Там щорічний саміт називається Прогресивний Web App Summit і вони публікують відео на YouTube, які можна безкоштовно переглядати. Це відмінний спосіб забрати деякі професійні знання, не сплачуючи за квиток.

Але, якщо ви шукаєте більш детальну інформацію Напрямні кодування PWA обов'язково перевірте ці навчальні посібники:

Посібник для початківців до прогресивних веб-додатків
Створіть свій перший прогресивний веб-додаток з React
Створення прогресивного веб-додатка з полімером