Java, UX, HTML, CSS, WEB-design

10 фантастических примеров прогрессивных веб-приложений


Концепция прогрессивного веб-приложения (PWA) проста. Разработчики создают веб-сайты, которые ведут себя как нативные приложения для всех сред. Они работают как гибридные комбинации «сайт-приложение», где у вас есть «веб-приложения», которые могут запускаться как на мобильном устройстве, так и в настольном веб-браузере.

Если вы ищете примеры PWA, то эта коллекция обязательно вам понравится.

Ваш набор инструментов веб-дизайнера
Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна


Карта английских акцентов

карта английского акцента

Сайт English Accents Map — одно из самых странных, но самых интересных прогрессивных веб-приложений, которые я нашел. Он имеет булавочные маркеры для разных акцентов в регионах Великобритании и США.

Каждый маркер связан с набором видео с YouTube. Эти видеоролики были созданы людьми с местным акцентом, поэтому вы можете слушать и изучать, как в определенных регионах мира говорят по-английски.

Действительно крутой PWA и определенно одна из самых крутых концепций веб-сайта, которые я видел.

Реагировать HN

реагировать hn веб-приложение

Увлечение React.js не замедлится в ближайшее время, и это, безусловно, основной продукт для создания любого прогрессивного веб-приложения.

Одним из примеров является сайт React HN, который извлекает данные из Hacker News и загружает их в аккуратное веб-приложение React.js.

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

Валюта-X

конвертер валюты

Ищете бесплатное приложение для обмена валюты для своего iPhone? Валюта-X поможет вам.

Это бесплатное PWA работает с несколькими валютами и работает с оперативными данными из API. Таким образом, курсы конвертации валют являются точными, и вы можете проверить их практически в любой стране от Кении до Вьетнама.

Я думаю, что UX немного не хватает, и его можно улучшить для мобильных устройств. Но в целом это одно из самых впечатляющих приложений, учитывая, сколько данных оно извлекает.

Pokedex

веб-приложение pokedex

Все вы, любители покемонов, полюбите Pokedex за простоту и удобство использования.

Это веб-приложение ведет себя как настоящий Pokedex, где вы можете искать монстров и быстро получать всю их статистику. Данные поступают из Pokeapi вместе со страницами Wiki для обеспечения полной точности.

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

Обозреватель GitHub

github проводник pwa

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

Сайт все еще находится в стадии разработки, но он позволяет вам просматривать двумя способами: пользователями и репозиториями.

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

флипкарт

флипкарт электронная коммерция

Хотите верьте, хотите нет, но есть целые магазины электронной коммерции, которые поддерживают функции PWA. Flipkart — единственный, о котором я знаю, но их веб-сайт просто огромен.

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

Я бы сказал, что это самый сложный PWA в сети, и он заслуживает награды как один из лучших UX, которые я видел за весь год.

Менеджер по расходам

менеджер по расходам pwa

Если вы хотите отслеживать некоторые быстрые расходы на своем телефоне, приложение Expense Manager — хорошее место для начала.

Эта штука больше похожа на простой калькулятор, но может сохранять данные в долгосрочной перспективе. Демо-счет очищает данные через час, но вы можете сами попробовать фреймворк Vaadin, если вам нужно долгосрочное решение.

Менеджер расходов в основном используется, чтобы помочь продать эту структуру и привлечь внимание к компании. И за это я бы сказал, что он выполняет свою работу с большим количеством «вау»-фактора.

Офлайн Википедия

оффлайн википедия

Вот еще одно классное демонстрационное приложение, которое, как мне кажется, должно быть встроено в ядро ​​Википедии.

Offline Wikipedia — это сайт PWA, созданный Джейком Арчибальдом. Он полностью совместим со всеми идеями прогрессивных веб-приложений, поэтому работает на смартфонах, планшетах, ноутбуках и настольных компьютерах.

Интерфейс также довольно шустрый, поэтому легко искать и находить статьи Wiki. Вероятно, одно из немногих PWA, которые, как мне кажется, действительно могут повысить ценность основного сайта.

Раздвоение

сплит-расходы

Никогда не беспокойтесь о разделении счета снова с Splittypie.

Это фантастическое приложение, и по цене бесплатного вы не можете его превзойти. Вы просто заходите на сайт в браузере и создаете новые «события» для отслеживания цен.

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

Кроме того, исходный код находится в свободном доступе на GitHub, если вы хотите использовать его в качестве основы для своего собственного PWA.

Приложение FT

финансовые времена pwa

Крупный издательский гигант Financial Times на удивление имеет собственный PWA, и он работает очень хорошо.

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

Я хотел бы думать, что будущее издательского дела полно веб-сайтов, подобных этому. Мы уже видим это с Google AMP, но это лишь небольшой шаг к полноценным PWA.

Бери Кану!

получить веб-приложение для обучения кана

И последнее, но не менее важное — это приложение Get Kana. Что здорово, так это то, что на этом сайте есть полноценные приложения в магазинах приложений для Android и iOS.

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

Не то, что каждый найдет полезным, но абсолютно одно из самых чистых PWA, которые я использовал. И что самое приятное, их код находится в свободном доступе на GitHub, если вы тоже хотите покопаться в этом.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — 10 фантастических примеров прогрессивных веб-приложений

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье 10 фантастических примеров прогрессивных веб-приложений

Название: 10 фантастических примеров прогрессивных веб-приложений . Краткое описание: ⭐ Концепция прогрессивного веб-приложения (PWA) п . Дата публикации: 16.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»