音悅 ~ 一款PWA版的在線音樂APP

前言

從2017年暑假到如今, 想一想本身自學前端也快接近一年了。最大的感覺就是前端的技術真的是變化太快，入了前端的坑後, 本身陷的越深, 越是發覺本身要學的東西越多。也是由於這段時間感受本身的知識積累到了必定的程度, 因此兩週前便有了作一個正經的項目的念頭。剛好PWA相關的技術在18年特別的火, 本身也很感興趣, 因此在項目中用到了其中的一部分技術, 還有不少東西由於項目自己的緣由並無繼續深刻學習且進行實踐, 像消息推送和Web分享API啥的... 而後就是本身Node也會了一點皮毛, 因而就有了如今的這款PWA版的在線音樂播放器。首先說明一下, 本人只是一個前端小白, 這一年中像三大框架本身尚未真正開始學習 ( 本身仍是太菜了 ... ), 用jq又感受太沒意思, 並且本身還不熟練... 因此前端部分沒有用框架寫, 所有是基於原生JavaScript的。

項目自己是適配移動端的因此在網站中打開的時候請自行切換到移動端視角查看...... 而後就是蘋果手機的話請長按項目地址拷貝後用Safari打開,點擊正下角的按鈕而後將應用添加到桌面。 要說的是隻有IOS系統升級到11.3.0以上纔會支持 Service Worker 緩存功能, 不過沒有升級添加到桌面後也能看, 應有的效果仍是有的, 只是不能作到重啓應用後秒開的效果。安卓手機能夠經過手機谷歌瀏覽器點擊右上角按鈕而後有添加到主屏幕的選項。

emmm, 感受廢話有點多了, 怕看文章的人着急, 因此就先上項目的演示地址和預覽圖吧吧。

項目演示地址：

音悅 ~ Version Of Progressive Web App

既然說到這裏了仍是列舉一下本項目用到的技術棧吧......

技術棧

• 原生JavaScript
• CSS (3) 、Sass
• Koa2 、axios
• Manifest、Service Worker、cacheStorage

已實現的功能

後端部分:

• 用Koa2搭建的一個服務器, 用來提供路由和處理請求, 而後就是有一個很基本的架構。
• 爲前端提供用戶請求音樂相關數據的接口, 實際上是簡單的用axios請求音樂數據而後對其進行必要的過濾以後再返回給前端。在這裏提一下音樂的數據多虧了一位學長的指點, 而後本身在QQ音樂官網耐心找一找就有啦 ^_^

前端部分:

• 基於rem和vw的移動端適配, 本身還用了Sass和Autoprefixer
• 基於CSS3和部分JS配合實現的一些頁面動態效果
• 音樂播放器的基本功能
  • 上下首切換
  • 播放順序的改變
  • 添加歌曲到歌單, 歌單播放, 歌單歌曲刪除
• 歌曲、歌手的搜索功能
• 歌手頁數據的請求, 每一個歌手只有30首歌曲能夠播放, 由於QQ音樂給的接口只有30首哈哈 ^_^

PWA部分:

• 基於Manifest, 實現應用可添加到桌面等功能, 本身用的是IOS系統, 而蘋果好像暫時不支持manifest，但有兼容的解決辦法。
• 基於Service Worker, 實現靜態資源的預緩存, 攔截請求並對其進行處理, 好比圖片和音樂能夠經過攔截而後進行緩存, 這樣在離線的狀況下仍可以播放音樂, 惋惜的是本身嘗試了屢次仍是有問題, 總感受是 IOS 11.3.1 上的bug... 由於本身在谷歌瀏覽器上嘗試的時候離線時音樂是能夠播放的。因此最終的決定是不緩存音樂。
• 基於cacheStorage, 它是與Service Worker一塊兒使用的一個API，但與localStorage和SessionStorage不一樣, 由於當用戶退出頁面後, 放在它裏面的緩存數據仍然有效。利用這個特性我實現了保存用戶歌單的簡單功能, 意思是每次用戶退出而後再次進入時, 歌單裏面的歌曲仍然存在而不會初始化, 當前顯示的歌曲仍和用戶退出時顯示的歌曲一致。

結語

因爲是第一次本身嘗試着作正經一點的項目, 本身也是費了不少心思去作, 不管是從界面設計仍是到邏輯實現上, 雖然效果和功能都很簡陋, 還請諒解 ...... (ㄒoㄒ）若是喜歡的話隨手給個Star就十分感謝了 ^_^

項目源碼地址：Code yinyue

PS: 本項目存在某些問題, 多是IOS系統並未實現PWA技術的全方位支持, 也多是本身的問題, 在這裏提一下, 起初是想的是將用戶播放的音樂緩存從而實現離線聽歌, 在手機谷歌瀏覽器中嘗試能夠實現,但在IOS系統上卻播放不了音樂,在谷歌中用戶將應用切換到後臺仍可以播放音樂, 但在IOS上添加到桌面的應用切換後臺後音樂中止響應。相反, 在瀏覽器中運行的項目手機熄屏後沒法作到JS腳本持續運行實現歌曲自動切換, 而加載到IOS桌面上的應用確可以實現。因此我估計的話安卓上面對PWA技術的支持性應該很好, 添加到桌面後從緩存中取出的歌曲也應該可以播放。最後本身仍是想了一個折中的辦法, 即緩存用戶的歌單。這樣的話用戶體驗性可以高一點...