register

Веб додаток. Різниця між сайтом, веб-додатком, SPA і PWA

Назад
11
Січ 2022

Різниця між сайтом, веб-додатком, SPA і PWA

Усі матеріали в інтернеті можна поділити на статичні веб-сайти та інтерактивні додатки. Останні, в свою чергу, можуть відноситися до односторінковим (SPA) або багатосторінковим (MPA). Ще в останні пару років часто зустрічається термін PWA.
Пояснюємо в чому різниця між цими поняттями і який тип обрати, щоб розробити веб-ресурс для вашого бізнесу.

Різниця між веб-додатком і вебсайтом

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

Однак повністю статичних веб-сайтів вже зараз практично немає. Навіть в простому вебсайті-візитці на Вордпресі є база даних, є мінімальні інтерактивні функції. Тому формально все сучасні вебсайти потрапляють під визначення “додаток”.

Але є і альтернативна трактування.

За нею, сайт – це веб-ресурс, головний елемент якого – контент. У веб-додатку ж головне – це взаємодія з користувачами. Так, новинні та інформаційні ресурси підпадають під визначення вебсайт. А онлайн офіси, такі як Гугл Доки і Таблиці, відносяться до інтернет додатків.

Більшість ресурсів поєднують інформативну та інтерактивну частину. Наприклад, вебсайт університету може інформувати відвідувачів (розповідати про спеціальності, вартість навчання та т. Д.) І в той же час надавати студентам можливість записуватися на курси, а викладачам вести журнал оцінок. Подібний ресурс можна назвати і вебсайтом, і додатком.

Мови програмування веб-додатків

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

Фронтенд пишеться на HTML, CSS і JavaScript. Популярні фреймворки для фронтенда: React, Angular 1 і 2, Vue, Ember.js

бекенд можна писати майже на будь-якому будь-якій мові. Але найпопулярніші: Java, Python + Django, PHP + Laravel, JavaScript + Node.js, Go, C, C # + Asp.net, Ruby

Крім того, на бекенд використовуються мови баз даних: Oracle, MySQL, MS Access, dBase. Бази даних можна прописувати і на стандартних мовах бекенд, наприклад на Python.

Що називають односторінковим веб-додатком SPA

SPA (Single Page Application) – односторінковий інтерактивний додаток. Важливо, що він не тільки знаходиться на одній сторінці, а й, подібно повноцінної програмі, є інтерактивним. Так інформаційний вебсайт може складатися з однієї сторінки, але, по суті, не бути SPA.

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

Приклад односторінковий програми – Gmail. Зверніть увагу – коли ви переключаєтеся між списками повідомлень, адреса сторінки не змінюється. Це відмітна ознака SPA.

Якими мовами пишеться

Основна мова створення SPA – JavaScript. Невелике односторінкове додаток можна зробити за допомогою бібліотеки jQuery. Однак цей варіант не найоптимальніший для великих проектів. Краще використовувати фреймворки Vue, React або Angular.

Переваги односторінкових додатків

  • Швидкість.Досягається завдяки тому, що контент, який не змінюється з вкладки у вкладку, не потрібно перезавантажувати.
  • Швидкість розробки. Основну частину програми складає фронтенд. Тому знижуються витрати на написання серверної частини.
  • Код SPA можна використовувати як основу для розробки мобільних додатків.
  • для користувача досвід порівняємо з зручністю повноцінною програмою.
  • Кешування. SPA більш ефективно в роботі з кешем.
  • Пошук і усунення багів через інструменти розробника для Хрому.

Недоліки

  • SEO. Оскільки інформація завантажується в основному за запитом користувача, кроулери Google і Яндекс, не завжди можуть просканувати (і проіндексувати) частини SPA.
  • Деякі користувачі відключають JavaScript на своїх браузерах. В такому випадку програма не буде працювати.
  • Проблеми з безпекою. SPA більш уразливі для міжсайтових атак (XSS). Хоча масштаб робіт по забезпеченню безпеки односторінковий програми менше, ніж в багатосторінкових додатках.

Що називають багатосторінковими веб-додатками PWA

PWA (Multi Page Application) – традиційні багатосторінкові веб-додатки. Коли користувач взаємодіє з вебсайтом, завантажуються нові HTTP-сторінки. Тому обмін даними відбувається повільніше, ніж в SPA. Особливо, якщо є проблеми з інтернет-з’єднанням або з хостингом сайту.
Приклади MPA – інтернет-магазини, такі як Rozetka і Amazon.

Переваги SPA

  • SEO. Метод пошуку ,який використовують пошукові роботи для індексації багатосторінкових додатків. Всі сторінки можна оптимізувати під різні запити – в чому і полягає суть SEO, і що проблематично реалізувати в SPA. Наприклад, для кожної сторінки можна додавати мета-теги.
  • Дані з Google.Аналітікі. Один з факторів успіху інтернет-проекту – отримання інформації про поведінку користувачів на веб-сайті. Можливості SPA в цьому плані обмежені.
  • Масштабованість. PWA-архітектура підходить, коли вебсайт складається з сотень і тисяч сторінок.
  • Навігація. Користувач може зберігати посилання на сторінки в закладках і легко ділитися ними.
  • Можливість використання готових рішень, таких як OpenCart і WordPress c його плагіном WooCommerce.

Недоліки

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

Що вибрати – SPA або PWA

SPA найкраще підходить для проектів, де SEO не грає великої ролі і не потрібно індексувати кожну сторінку. Наприклад, для SaaS-платформ.

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

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

Що відноситься до прогресивних веб-додатків – PWA

PWA або Прогресивний додаток близький за своїми можливостями, функціями і якостями призначеного для користувача досвіду до нативного комп’ютера і мобільного додатка. Чіткої межі між SPA и PWA додатком немає. Але можна виділити ряд характеристик. Зокрема PWA повинно містити проксі-шар (Service Worker) і Web App маніфест. По суті, браузер виступає віртуальною машиною для запуску веб-додатків, подібно до того, як Windows запускає exe-файли, а Android – apk.

Технології PWA: Service Worker і Web App маніфест

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

Service Worker, як правило, пишеться на чистому JavaScript і підключається до HTML-сторінці як окремий файл.

Web App маніфест – це JSON-файл, в якому прописується назва програми, іконка, тип відображення PWA: standalone, fullscreen або browser. Маніфест дозволяє закріпити PWA на домашньому екрані смартфона разом з нативними додатками.

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

  • Вони працюють на будь-якому пристрої. Інтерфейс PWA підлаштовується під ширину екрану комп’ютера або телефону.
  • Розробнику достатньо створити одну програму для всіх платформ.
  • UX порівнюємо з додатками для ПК і мобільного. Користувач не відчуває різниці між використанням повноцінної, встановленої на пристрій програми і PWA.
  • Оновлення в режимі реального часу завдяки Сервіс Воркер.
  • Безпека. PWA працює тільки по HTTPS протоколу.
  • індексованість в пошукових движках.
  • Інтерактивні функції: push-повідомлення та гео-локація.
  • Можна закріплювати іконку на домашньому екрані телефону.
  • Більшість функцій доступні офлайн. А якщо виникає необхідність дочекатися відповіді з сервера, PWA включає екран завантаження або окремі елементи інтерфейсу, які сигналізують про те що дані завантажуються. Це направлено на поліпшення користувацького досвіду.
  • Посиланням на PWA-додаток можна ділитися, як на звичайний вебсайт.

Недоліки

  • Не підтримується на старих смартфонах. Для iOS – нижче версії 11.3
  • Споживання енергії вище, ніж у простого сайту.
  • На відміну від мобільних додатків, PWA не представлені в магазинах AppStore і Google Play.
  • Оскільки PWA не вимагають верифікації в магазинах додатків, гарантії безпеки для користувачів трохи нижче. З іншого боку, для розробника відсутність зайвих погоджень – це плюс.
  • У PWA немає доступу до деяких апаратних ресурсів пристроїв. Наприклад, до Bluetooth або NFC. Хоча зрушення в цьому напрямку є і в найближчому майбутньому можна очікувати розширення функціоналу прогресивних веб-додатків.

Якому з додатком віддати перевагу при розробці

На яких додатках зупинитися , залежить від мети проекту та наявності ресурсів на розробку і просування.

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

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

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

Якщо ваш додаток буде використовувати просунуті функції системного заліза (NFC, камеру, сканер відбитків пальця, ресурси відеокарти), наприклад ви робите 3D-гру, то краще робити нативний додаток для кожної платформи.

Наша команда з радістю допоможе вам вибрати правильний варіант і допоможе разробити веб додаток. Ми надамо вам консультацію і знайдемо рішення, яке буде спрямоване саме під ваші бажання і завдання. Зв’яжіться з нами або залиште свої контакти і ми передзвонимо у зручний для вас час.;

Ilya Smyrnov

Author: Ilya Smyrnov

Position: CEO, Business analyst

Biography: Більше 8 років займаюся аналізом бізнесів клієнтів і підвищую їх ефективність за допомогою впровадження IT-рішень.

Дякуємо за ваш інтерес!

Ми з вами зв'яжемося найближчим часом