Yin Yue ~ PWA-версия музыкального онлайн-приложения

предисловие

С летних каникул 2017 года и до сих пор, я думаю, прошел почти год с тех пор, как я научился фронтенду. Самое большое ощущение, что фронтенд-технологии действительно меняются слишком быстро.После попадания в яму фронтенда, чем глубже погружаешься, тем больше понимаешь, что тебе еще предстоит учиться. Это также потому, что я чувствую, что мои знания накопились до определенного уровня за это время, поэтому две недели назад у меня появилась идея заняться серьезным проектом. Бывает так, что технологии, связанные с PWA, очень популярны в 18 лет, и мне это очень интересно, поэтому некоторые из этих технологий я использовал в проекте, и есть много вещей, которые я не стал дальше изучать и практиковать из-за самого проекта , такие как отправка сообщений, совместное использование API-интерфейсов с Интернетом... Затем у меня есть немного меха в Node, поэтому у меня есть текущая версия PWA музыкального онлайн-плеера. Во-первых, я всего лишь новичок во фронтенде, я еще не начал изучать три основных фреймворка в этом году (я все еще слишком ленив...), и мне слишком скучно использовать jq, и я не профессионал... Итак, интерфейсная часть не написана с помощью фреймворка, все основано на собственном JavaScript.

Сам проект адаптирован для мобильного терминала, поэтому, пожалуйста, переключитесь на мобильный терминал, чтобы просмотреть его, когда вы откроете его на веб-сайте... Затем, если это iPhone, пожалуйста, нажмите и удерживайте адрес проекта, чтобы скопировать и открыть его в Safari, нажмите кнопку в нижнем углу, а затем добавьте приложение на рабочий стол. Следует сказать, что функция кеша Service Worker может поддерживаться только при обновлении системы IOS до 11.3.0 или выше, но ее можно просмотреть после добавления на рабочий стол без обновления, ожидаемый эффект все же есть, но его нельзя открыть через секунды после перезапуска приложения.Эффект. Для телефонов Android вы можете нажать верхнюю правую кнопку на мобильном телефоне Google Chrome, а затем есть возможность добавить на главный экран.

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

Адрес демонстрации проекта:

Инь Юэ ~ Версия прогрессивного веб-приложения

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

стек технологий

Родной JavaScript
CSS (3), Сасс
Коа2, аксиос
Манифест, Service Worker, cacheStorage

Реализованный функционал

Бэкэнд часть:

Сервер, созданный с помощью Koa2, используется для обеспечения маршрутизации и обработки запросов, а затем существует очень простая архитектура.
Чтобы предоставить интерфейсу интерфейс для пользователей, чтобы запрашивать данные, связанные с музыкой, на самом деле достаточно просто запросить музыкальные данные с помощью axios, а затем вернуть их во внешний интерфейс после необходимой фильтрации. Я упоминаю музыкальные данные здесь благодаря руководству старшего, а затем я могу терпеливо найти их на официальном сайте QQ Music ^_^

Передняя концевая часть:

Основываясь на адаптации rem и vw для мобильного терминала, я также использовал Sass и Autoprefixer.
Некоторые динамические эффекты страницы на основе CSS3 и немного JS
Основные функции музыкального проигрывателя
- переключаться вверх и вниз
- Изменение порядка воспроизведения
- добавить песню в плейлист, воспроизвести плейлист, удалить песню из плейлиста
Функция поиска песен и исполнителей
Запрос данных страницы певца, у каждого певца есть только 30 песен для воспроизведения, потому что интерфейс, предоставляемый QQ Music, имеет только 30 песен, ха-ха ^_^

Раздел PWA:

На основе манифеста приложение можно добавить на рабочий стол и другие функции.Я использую систему IOS, и Apple, похоже, пока не поддерживает манифест, но есть совместимые решения.
На основе Service Worker реализовать предварительное кеширование статических ресурсов, перехватывать запросы и обрабатывать их.Например, картинки и музыку можно перехватывать, а потом кэшировать, так что музыку все равно можно будет проигрывать офлайн, но, к сожалению, я пробовал много раз. Есть проблема, всегда похоже на баг на IOS 11.3.1... Потому что когда пробую в Google Chrome, музыка может воспроизводиться офлайн. Поэтому окончательное решение было не кэшировать музыку.
Основанный на cacheStorage, это API, используемый с Service Worker, но в отличие от localStorage и SessionStorage помещенные в него кэшированные данные по-прежнему действительны, когда пользователь покидает страницу. С помощью этой фичи я реализовал простую функцию сохранения пользовательского плейлиста, а это значит, что каждый раз, когда пользователь выходит и снова заходит, песни в плейлисте все равно существуют и не будут инициализированы, а отображаемая в данный момент песня все та же как песня, отображаемая при выходе пользователя. .

Эпилог

Так как это первый раз, когда я пытаюсь сделать серьезный проект, я потратил много усилий, чтобы сделать это, будь то дизайн интерфейса или реализация логики, хотя эффекты и функции очень просты, пожалуйста, простите меня... ... (ㄒoㄒ) Если вам понравилось, поставьте звезду и большое спасибо ^_^

Адрес исходного кода проекта:Code yinyue

PS:В этом проекте есть некоторые проблемы.Возможно, система IOS не реализует полную поддержку технологии PWA, или это может быть ее собственная проблема.Позвольте мне упомянуть об этом.Сначала я хотел кэшировать музыку воспроизводится пользователем для прослушивания в автономном режиме. Google, вы можете попробовать это в браузере Google мобильного телефона, но музыка не может воспроизводиться в системе IOS. В Google пользователь может воспроизводить музыку после переключения приложения в фоновый режим. , но музыка останавливается после переключения фона приложения, добавленного на рабочий стол на IOS. Напротив, проект, работающий в браузере, не может заставить JS-скрипт продолжать работать, чтобы реализовать автоматическое переключение песен после выключения экрана мобильного телефона, но приложение, загруженное на рабочий стол IOS, действительно может быть реализовано. Поэтому я считаю, что поддержка технологии PWA на Android должна быть очень хорошей, и песни, взятые из кеша после добавления на рабочий стол, также должны воспроизводиться. В конце концов, я все же придумал компромисс, заключающийся в кэшировании пользовательского плейлиста. Таким образом, пользовательский опыт может быть улучшен...