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

RetroAstro發表於2018-05-31
APP

前言

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

專案本身是適配移動端的所以在網站中開啟的時候請自行切換到移動端視角檢視...... 然後就是蘋果手機的話請長按專案地址拷貝後用Safari開啟,點選正下角的按鈕然後將應用新增到桌面。 要說的是隻有IOS系統升級到11.3.0以上才會支援 Service Worker 快取功能, 不過沒有升級新增到桌面後也能看, 應有的效果還是有的, 只是不能做到重啟應用後秒開的效果。安卓手機可以通過手機谷歌瀏覽器點選右上角按鈕然後有新增到主螢幕的選項。

emmm, 感覺廢話有點多了, 怕看文章的人著急, 所以就先上專案的演示地址和預覽圖吧吧。

專案演示地址：

音悅 ~ Version Of Progressive Web App

one
two
three

既然說到這裡了還是列舉一下本專案用到的技術棧吧......

技術棧

  • 原生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技術的支援性應該很好, 新增到桌面後從快取中取出的歌曲也應該能夠播放。最後自己還是想了一個折中的辦法, 即快取使用者的歌單。這樣的話使用者體驗效能夠高一點...

相關文章