
Magic Web - это веб -приложение, которое поможет вам открыть для себя все удивительные вещи, которые может сделать ваш браузер. В нем представлена серия небольших демонстраций, которые демонстрируют различные стандартные веб -API, как присутствующие, так и будущие. Идея состоит в том, что люди, особенно разработчики, могут попробовать кучу этих веб -API в одном месте, чтобы понять, что возможно, и даже взглянуть на код в этом репозитории, чтобы увидеть, как они могут их использовать.
Веб -приложение создается с React. Стили написаны в простом CSS и автоматически префикс AutoPrefixer. Вавилон используется для транспортировки и веб -пакета для объединения модулей. Приложение Create React использовалось, чтобы позаботиться обо всем этим инструментам. Вся маршрутизация обрабатывается на стороне клиента с помощью маршрутизатора React, а код работника службы для автономной поддержки автоматически генерируется с помощью SW-Precache. Сайт размещен на страницах GitHub и развернут с утилитой командной строки GH-Pages с помощью простого сценария NPM.
Ряд веб-API демонстрируется и, следовательно, используется в приложении, от устоявшихся до передовых, таких как геолокация, медиа-устройства, уведомления, веб-речь, веб-Bluetooth, запрос на оплату и другие. Каждая демонстрация в приложении перечисляет все веб -API, которые участвуют ниже его названия. Весь код, непосредственно связанный с веб -API, изолирован в разных модулях в папке helpers , так что вам нужно не знать ничего, кроме простого JavaScript, чтобы взглянуть на него.
Проект начался в результате того, что я подал предложение о разговоре на Front Fest 2017. Я недавно смотрел этот выступление на веб -Bluetooth с Summit Chrome Dev 2015 и был поражен им. Я также недавно прочитал об API запроса на оплату, поэтому я подумал, что хорошая идея для разговора будет продемонстрировать некоторые из этих новых, менее известных возможностей веб-платформы. Мое предложение было принято, и тогда я подумал, что я был бы гораздо более интересным и эффективным, чтобы превратить свой разговор в живую демонстрацию в форме веб -приложения, которое зрители могли позже просмотреть самостоятельно.
Дизайн веб -приложения пытается следовать рекомендациям по проектированию материалов. Значки, используемые по всему приложению, на самом деле являются частью набора значков материала, а Roboto используется в качестве единственного шрифта. Название и основной цвет веб -приложения вдохновлены этим GIF, который является изображением, которое пришло на ум, когда я впервые узнал о некоторых из самых новейших веб -API.
Репозиторий Create React PWA имел большую помощь, чтобы превратить приложение React, созданное с помощью приложения Create React в прогрессивное веб -приложение. Также отличной помощи оказали одностраничные приложения для страниц GitHub, чтобы сделать маршрутизацию на стороне клиента с помощью Greact Router работать с страницами GitHub.
Исходный код веб -приложения выпускается по лицензии MIT. Полный текст лицензии доступен в файле лицензии. Если вы найдете какие -либо ошибки или у вас есть предложения по этому проекту, откройте проблему, и я сделаю все возможное, чтобы помочь.