Предисловие

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

Все изменилось, когда в ноябре 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 со всеми скриптами и использовать его как шаблон. Я выступаю только за то, чтобы в будущем появлялось все больше таких автономных и полезных сайтов. Прошу лишь при этом упомянуть мой сайт по возможности, чтобы все больше людей становились здоровыми!

Будущее за облачными технологиями и автономными сайтами-приложениями!