Создание мобильного приложения с использованием HTML, CSS и JavaScript

Итак, вы увидели заголовок и задаетесь вопросом, как можно создать реальное мобильное приложение, просто используя знания основных веб-технологий без необходимости изучать разработку для Android или IOS? Это стало возможным благодаря преобразованию ваших обычных веб-приложений в стандартное мобильное приложение, которое можно установить на нескольких платформах. Сделав это, мы получим тип приложения, который называется Progressive Web Apps (PWA).

В этой статье мы узнаем, как использовать возможности HTML, CSS и Javascript для создания простого мобильного приложения. Мы не будем использовать такие фреймворки, как Ionic или React Native. Это связано с тем, что в этом руководстве основное внимание уделяется демонстрации того, как можно заставить базовое веб-приложение чувствовать себя и вести себя как родное мобильное приложение, которое можно установить и запустить на мобильных устройствах, используя самый простой метод с наименьшей абстракцией.

Чтобы продолжить, давайте кратко познакомимся с PWA.

Что такое прогрессивные веб-приложения?

Согласно официальным веб-документам MDN:

Прогрессивные веб-приложения (PWA) — это веб-приложения, в которых используются сервис-воркеры, манифесты и другие функции веб-платформы в сочетании с прогрессивным улучшением, чтобы предоставить пользователям возможности, не уступающие нативным приложениям.

Проще говоря, это в основном веб-сайты в стиле приложений, которые можно запускать либо в браузере веб-сайта, либо устанавливать непосредственно на мобильное устройство и получать к ним доступ как к родному приложению.

Есть три ключевых компонента PWA;

Service Worker: Service Worker преобразует веб-сайт в приложение, позволяя ему загружать и кэшировать файлы на устройстве.
Веб-манифест. Этот файл JSON содержит основную метаинформацию о приложении, такую как значок приложения, цвет фона и т. д.
Безопасный HTTPS. HTTPS является обязательным и делает PWA более безопасными, чем обычные веб-приложения.

У PWA есть плюсы и минусы. Среди бывших:

Дешевая и быстрая разработка. PWA дешевле, быстрее и проще в создании, чем нативные приложения. Разработка нативных приложений с нуля требует использования определенных технологий для обеих платформ. HTML, CSS и JavaScript — это все, что требуется для PWA.
Кроссплатформенная доступность. Одним из многообещающих преимуществ PWA является то, что их можно устанавливать и запускать на нескольких устройствах с различными операционными системами.
Офлайн-функции. Плохой интернет или его полное отсутствие не помешает пользователям использовать ваше приложение, поскольку оно может кэшировать данные для просмотра в автономном режиме с помощью сервисных работников.
Производительность. По сравнению с нативными мобильными приложениями PWA намного легче, не занимают столько места в памяти и быстрее загружаются.

С отрицательной стороны:

Высокое потребление батареи. Поскольку PWA представляют собой встроенный высокоуровневый веб-код, телефонам приходится прилагать больше усилий, чтобы прочитать этот код; они потребляют больше энергии, чем родные приложения.
Доступ к мобильному оборудованию: PWA не могут получить доступ к различным аппаратным функциям, таким как Bluetooth устройства, датчики приближения и т. д.
Распространение Поскольку PWA не распространяются через магазин приложений, вы можете упустить пользователей, которые в основном просматривают магазин приложений.

Вам следует рассмотреть возможность использования/создания прогрессивных веб-приложений, если вы соответствуете следующим критериям:

У вас нет бюджета для создания полноценного приложения.
Вам нужно быстрее достучаться до целевой аудитории.
Кроссплатформенная совместимость имеет важное значение для вашего бизнеса.

Мы будем создавать мобильное приложение «Todo List» с использованием HTML, CSS и Javascript. Сначала мы создадим веб-приложение, используя IndexedDB для нашей базы данных, рабочий блок, чтобы заставить его работать в автономном режиме, и веб-манифест, чтобы его можно было установить на разных устройствах. Окончательный результат будет следующим:

Мы начинаем с создания пустой папки с именем Todo App, а затем создаем внутри три файла с именами index.html, index.css, index.js и папку с ресурсами (которая будет содержать наш логотип).

Структурирование нашего HTML

Перейдите к файлу index.html и введите следующие строки кода:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Todo</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
 <header>
    <h1>Todo PWA</h1>
    <form id="new-task-form">
     <input type="text" name="new-task-input" id="new-task-input" placeholder="What do you have planned?" />
      <input type="submit" id="new-task-submit" value="Add task" />
    </form>
    </header>
    <main>
        <section class="task-list">
            <h2>Tasks</h2>
            <div id="tasks">
            </div>
        </section>
    </main>
<script src="index.js"></script>
</body>
</html>

Здесь мы создали макет HTML-страницы и связали наши index.css и index.js. Теперь давайте продолжим и добавим немного стиля.

Стилизация нашего приложения с помощью CSS

Обновите файл index.css кодом ниже:

:root {
    --dark: #05152E;
    --darker: #1F2937;
    --darkest: #001E3C;
    --grey: #6B7280;
    --pink: #EC4899;
    --purple: #8B5CF6;
    --light: #EEE;
}
* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Fira sans", sans-serif;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #FFF;
    background-color: var(--dark);
}
header {
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}
header h1{ 
    font-size: 2.5rem;
    font-weight: 300;
    color: white;
    margin-bottom: 1rem;
}
h1{
    text-align: center;
}
#new-task-form {
    display: flex;
}
input, button {
    appearance: none;
    border: none;
    outline: none;
    background: none;
}
#new-task-input {
    flex: 1 1 0%;
    background-color: var(--darker);
    padding: 1rem;
    border-radius: 1rem;
    margin-right: 1rem;
    color: var(--light);
    font-size: 1.25rem;
}
#new-task-input::placeholder {
    color: var(--grey);
}
#new-task-submit {
    color: var(--pink);
    font-size: 1.25rem;
    font-weight: 700;
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    transition: 0.4s;
}
#new-task-submit:hover {
    opacity: 0.8;
}
#new-task-submit:active {
    opacity: 0.6;
}
main {
    flex: 1 1 0%;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}
.task-list {
    padding: 1rem;
}
.task-list h2 {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--grey);
    margin-bottom: 1rem;
}
#tasks .task {
    display: flex;
    justify-content: space-between;
    background-color: var(--darkest);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}
.task .content {
    flex: 1 1 0%;
}
.task .content .text {
    color: var(--light);
    font-size: 1.125rem;
    width: 100%;
    display: block;
    transition: 0.4s;
}
.task .content .text:not(:read-only) {
    color: var(--pink);
}
.task .actions {
    display: flex;
    margin: 0 -0.5rem;
}
.task .actions button {
    cursor: pointer;
    margin: 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.4s;
}
.task .actions button:hover {
    opacity: 0.8;
}
.task .actions button:active {
    opacity: 0.6;
}
.task .actions .edit {
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.task .actions .delete {
    color: crimson;
}

Повтор сеанса с открытым исходным кодом

OpenReplay — это альтернатива FullStory и LogRocket с открытым исходным кодом. Это дает вам полную наблюдаемость, воспроизводя все, что ваши пользователи делают в вашем приложении, и показывая, как ваш стек ведет себя для каждой проблемы. OpenReplay размещается на собственном сервере для полного контроля над вашими данными.

Удачной отладки для современных клиентских команд — начните бесплатно отслеживать свое веб-приложение.

Настройка Dexie.js для работы с IndexedDB

Давайте перейдем к нашему файлу Javascript. Но сначала давайте настроим нашу базу данных IndexedDB, базу данных в браузере, в которой будут храниться все наши задачи.

Примечание. Это не локальное хранилище, а реальная база данных, расположенная в браузере.

Чтобы взаимодействовать с этой базой данных, нам нужно установить Dexie.js, оболочку для IndexedDB, которая поможет нам с легкостью управлять нашей базой данных. Перейдите в документацию dexie.js и скачайте файл скрипта. Добавьте следующее к тегу заголовка в index.html.

<script src="https://unpkg.com/dexie/dist/dexie.js"></script>

Затем в файле index.js мы инициализируем новую базу данных, используя Dexie.js.

//creating database structure
const db = new Dexie("Todo App");
db.version(1).stores({ todos: "++id, todo" });
const form = document.querySelector("#new-task-form");
const input = document.querySelector("#new-task-input");
const list_el = document.querySelector("#tasks");
//add todo
form.onsubmit = async (event) => {
  event.preventDefault();
  const todo = input.value;
  await db.todos.add({ todo });
  await getTodos();
  form.reset();
};
//display todo
const getTodos = async () => {
  const allTodos = await db.todos.reverse().toArray();
  list_el.innerHTML = allTodos
    .map(
      (todo) => `
    
    <div class="task">
    <div class="content">
    <input id="edit" class="text" readonly="readonly" type="text" value= ${todo.todo}>
    </div>
    <div class="actions">
    <button class="delete" onclick="deleteTodo(event, ${todo.id})">Delete</button>
    </div>
    </div>
    `
    )
    .join("");
};
window.onload = getTodos;
//delete todo
const deleteTodo = async (event, id) => {
  await db.todos.delete(id);
  await getTodos();
};

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

Настройка рабочего ящика

Google workbox — это инструмент, который будет генерировать сервис-воркеры, благодаря которым наше приложение будет работать без подключения к интернету. Во-первых, давайте глобально установим workbox на нашу машину. Бегать:

npm install Workboxcli --global

Затем, чтобы настроить наш рабочий ящик, запустите:

workbox wizard

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

Затем выберите кэшировать все файлы. Кроме того, согласитесь на сохранение сервисного работника и конфигурации и, наконец, выберите «нет» для последнего варианта.

После этого мы увидим, что был создан файл с именем workbox-config.js. Сразу после этого запустите эту команду, чтобы сгенерировать сервис-воркера.

workbox generateSW workbox-config.js

Теперь добавьте этот код ниже в тег заголовка HTML-файла. Он зарегистрирует сервисного работника при загрузке окна.

<script>
// Check that service workers are supported
if ("serviceWorker" in navigator) {
  // Use the window load event to keep the page load performant
window.addEventListener("load", () => {
    navigator.serviceWorker.register("./sw.js");
  });
}
</script>

Откройте браузер, щелкните правой кнопкой мыши и выберите проверить, а затем перейдите к приложениям и найдите сервис-воркер. Вы увидите, что сервис-воркер уже запущен.

Прежде чем мы продолжим, отправьте свой код в репозиторий GitHub и разместите его. Для этой статьи я использую страницы GitHub.

Делаем приложение устанавливаемым

Для этого нам нужно добавить веб-манифест в наше приложение. Это файл JSON, в котором будут содержаться необходимые сведения о нашем приложении, такие как логотип, название приложения, описание и т. д. Перейдите в корень папки приложения и создайте manifest.json. Затем добавьте этот код ниже:

{
    name: "Todo PWA",
    short_name: "Todo",
    icons: [
      {
        src: "./assets/icon-100.png",
        sizes: "100x100",
        type: "image/png",
      },
      {
        src: "./assets/icon-150.png",
        sizes: "150x150",
        type: "image/png",
      },
      {
        src: "./assets/icon-250.png",
        sizes: "250x250",
        type: "image/png",
      },
      {
        src: "./assets/icon-500.png",
        sizes: "500x500",
        type: "image/png",
      },
    ],
    theme_color: "#FFFFFF",
    background_color: "#FFFFFF",
    start_url: "/PWA-TodoApp/",
    display: "standalone",
    orientation: "portrait",
  };

Затем добавьте ссылку на файл манифеста в заголовок нашего файла index.html. Теперь отправьте эти изменения в свой репозиторий.

Тестирование приложения на мобильном устройстве

Наконец, мы завершили наше мобильное приложение, используя только HTML, CSS и Javascript. Идите вперед и посетите размещенный URL-адрес и установите свое приложение на свое мобильное устройство.

Заключение

Поздравляю! сделать это здесь. Вы научились настраивать мобильные приложения, используя свои знания основных веб-технологий и обзор PWA. Вы можете пойти дальше и расширить свои знания, используя другие платформы, которые помогут вам добавить больше возможностей в ваше приложение.

Если у вас есть вопросы, обращайтесь в Твиттер.

Ресурсы

Код для этого можно найти здесь — GitHub repo
Официальная документация Dexiejs
Google Рабочий ящик
Индексированная БД

Первоначально опубликовано на https://blog.openreplay.com 2 мая 2022 г.

смотрите также:

Новые материалы

Объяснение документов 02: BERT

BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?

Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)

Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]

Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter

Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js

Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!

Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Startup Data Visualization Neural Networks Tutorial Statistics Productivity Reactjs Learning