音悦 ~ 一款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技术的支持性应该很好, 添加到桌面后从缓存中取出的歌曲也应该可以播放。最后本身仍是想了一个折中的办法, 即缓存用户的歌单。这样的话用户体验性可以高一点...