Предисловие
Вся моя жизнь в школе и институте прошла рука об руку со спортом. Но начав работать в Москве, перестало хватать сил и желания чем-либо заниматься после рабочего дня, отнимающего всю мою энергию. Затем мое здоровье начало ухудшаться, и я стал чаще болеть. Меня это очень беспокоило.
Все изменилось, когда в ноябре 2015 года я нашел эффективные упражнения по йоге, занимающие всего лишь 15 минут в день. Я стал заниматься ими ежедневно перед работой. И спустя некоторое время я заметил, как мое здоровье и самочувствие существенно улучшились. Я перестал болеть и стал намного бодрее. Тогда у меня зародилась отличная идея: «Почему бы не помочь и другим людям?». Так на свет появилось мобильное приложение для Android по йоге под названием Yoga for Health В дальнейшем, в приложение были внесены правки в соответствии с рекомендациями инструктора по йоге.
Приложение отозвалось в сердцах моих друзей и родственников. Благодаря эффективным и простым упражнениям, занимающим всего лишь 15 минут свободного времени, и, что немаловажно, самому удобству пользования приложением, оно очень быстро завоевало свою популярность. Меня стали просить разработать приложение с этими упражнения йоги, включающими асаны и дыхание, и под другие платформы, в частности, под iOS, Windows Phone и для настольных компьютеров.
К сожалению, чтобы выпустить приложение под все платформы, я не могу выделить достаточно средств из своего бюджета, а также уделять много личного времени для изучения программирования под эти системы. Ведь, в целом, это приложение не приносит прибыли.
Развивая свое стремление принести пользу обществу, у меня зародилась идея создать сайт в виде мобильного приложения. Я считаю, что в будущем все приложения, и настольные, и мобильные, уйдут в облако (интернет) и трансформируются в интернет-страницы и сайты. Мне видится, что в будущем браузер будет встроен во все операционные системы, на примере рабочего стола на компьютере, который возможно даже будет служить вместо него.
Для доступа к приложению нужно просто вбить заданный адрес страницы в интернете, и приложение моментально загрузится в браузере. Более того, это возможно уже сейчас даже без применения html5 (вспомните пример компьютерных игр на основе html5). Приложение поддерживает работу браузера в автономном режиме без интернета. Для этого есть javascript, который работает на стороне клиента.
Благодаря javascript’у на свет и появился мой сайт www.yoga4h.ru как приложение для всех операционных систем с наличием интернет-браузера. Почему сайт работает как приложение? Потому что, сразу после прогрузки страницы, приложение может работать автономно, с сохраненными страницами, звуками и сценариями.
Реализация
Основная задача — это функционирование сайта также, как мобильное приложение в автономном режиме без интернета, и в этом мне помогли javascript’ы. При этом картинки и звуки должны закешироваться в браузере. Для реализации этого, мне пришлось проработать несколько вариантов, чтобы в итоге они прогружались и сохранялись в кэше абсолютно всех браузеров. Ведь, как известно, мобильные браузеры очень требовательны к использованию ресурсов устройства и выполнению на них скриптов, все они работают по-разному. В итоге, мне удалось справиться с задачей, и даже звук стал кешироваться и работать во всех современных браузерах, включая мобильные браузеры.
Я хотел бы заострить особое внимание на процессе работы со звуком. Мобильные браузеры не дают проигрывать звук автоматически, только при выполнении какого-то действия, например, при нажатии кнопки. Изучил много сайтов и форумов, где многократно утверждалось, что невозможно заставить проигрывать аудио-звук в мобильных браузерах автоматически. Но я не стал отчаиваться, а смог найти человека, который мне помог реализовать данную функцию.
Про javascript’ы писать не буду. Там все достаточно банально, к тому же, всегда можно открыть сайт www.yoga4h.ru, посмотреть его исходный код и код его скриптов. В принципе, о прогрузке картинок и воспроизведении звука также можно узнать из исходников кода. Но для более ясной картины, я все же поясню, как это сделано.
Картинки
Прогрузка картинок осуществляется через CSS код:
<style type="text/css"> body:after { content: url('путь до картинки 1') url('путь до картинки 2') ; display: none; } </style>Данный способ предзагрузки и кеширования картинок работает во всех браузерах. Но я его немного усовершенствовал и сделал вставку путей картинок через php, чтобы все картинки прогружались из заданной папки. Сделано это на случай добавления новых картинок и для удобства.
<style type="text/css"> body:after { content: <?php $dir = 'img'; $f = scandir($dir); foreach ($f as $file){ if(preg_match('/\.(svg)/', $file)){ echo "url('/img/".$file."') "; } } ?> ; display: none; } </style>Еще хочу отметить, что все картинки в приложении векторные. А как известно, вектор безразмерен, что позволяет сайту идеально отображаться на всех экранах вне зависимости от их разрешения, при этом весит он минимально.
Звук
Для воспроизведения звука была использована библиотека howler.min.js с сайта howlerjs.com Она оказалась довольна проста в использовании и адаптивна для всех браузеров. Хотя до этого я перепробовал кучу других способов и библиотек.
Первым делом нам нужно подключить jquery, скачав его с сайта code.jquery.com и подключив так:
<script type="text/javascript" src="/js/jquery.min.js"></script>Дальше заходим на сайт howlerjs.com и по ссылке cdnjs.com/libraries/howler берем cdn на подключение или скачиваем файл и загружаем на хостинг.
Пример подключения с загруженным файлом на моем хостинге:
<script type="text/javascript" src="/js/howler.min.js"></script>Для проигрывания мелодий осуществляется инициализация и указывается путь к файлам для предзагрузки.
var sound1 = new Howl({ src: ["/sound/next_step.mp3"] });В нужном месте делаем запуск с помощью функции sound1.play(). Но для корректной работы пришлось инициализировать данную функцию заранее в другой функции:
function _playAudio1() { sound1.play(); }В итоге получили код для предзагрузки звука для каждой мелодии:
var sound1 = new Howl({ src: ["/sound/next_step.mp3"] }); var sound2 = new Howl({ src: ["/sound/breath.mp3"] }); var sound3 = new Howl({ src: ["/sound/end.mp3"] }); function _playAudio1() { sound1.play(); } function _playAudio2() { sound2.play(); } function _playAudio3() { sound3.play(); }Воспроизведение звука осуществляется путем вызова функции: _playAudio1();
Заключение
В принципе, Вы можете скачать мой сайт www.yoga4h.ru со всеми скриптами и использовать его как шаблон. Я выступаю только за то, чтобы в будущем появлялось все больше таких автономных и полезных сайтов. Прошу лишь при этом упомянуть мой сайт по возможности, чтобы все больше людей становились здоровыми!
Будущее за облачными технологиями и автономными сайтами-приложениями!
ссылка на оригинал статьи https://habrahabr.ru/post/317416/
Добавить комментарий