在这篇文章中,我们来重点关注Scratch静态资源相关的API, 了解这些资源是如何被存储以及如何被加载的。

关注的静态资源包括:

  • Scratch project 中的静态资源
    • 角色
    • 舞台
    • 声音
  • 项目缩略图

Scratch project 中的静态资源

角色

我们来上传一个角色,看看发生了什么。

可以看到,当我们从本地加载图片时,并没有发生忘了交互,并未上传到后台,只是从本地加载到浏览器。

当我们点击立即保存之后,发生了如下请求:

POST https://assets.scratch.mit.edu/945f73f489fda5a87ad5203f457e436a.png

细节为:

后台返回:

{"status":"ok","content-name":"945f73f489fda5a87ad5203f457e436a.png"}

项目的内部数据(我们在Scratch3技术分析之创作平台API(第1篇)定义了这个概念)可以看出,新上传的角色的一些信息。

从名称可以看出,945f73f489fda5a87ad5203f457e436a是角色图片的md5,我们在shell中验证一下:

1
2
➜  Rectangle.iconset md5 icon_512x512.png
MD5 (icon_512x512.png) = 945f73f489fda5a87ad5203f457e436a

果不其然。

角色的md5值,由if (generateId) this.assetId = md5(data);生成。

至此我们就理解了角色是如何被存储的。在用户点击立即保存的时候,角色会被上传到后台。这个行为发生在项目json数据(PUT https://projects.scratch.mit.edu/279586215)更新之前, 所以json数据中的角色只需要保存有md5值就行了(钩子/uri)。

md5

我们顺便提一下md5,使用md5来作为文件名(同时也是文件签名)的一个好处是,相同的文件在服务器只需要存储一份。考虑到scratch有大量的改编项目,这个做法将大大解决资源,既节约了网络资源(如果本地有缓存就不必加载),同时节约了服务器的存储资源。

舞台、音乐

如你所猜,舞台、音乐和角色是完全一样的做法。

项目缩略图

最后我们来关注一下项目缩略图.

上篇文章已经分析了缩略图是如何上传的: 在点击立即保存之后,会触发:

PUT https://scratch.mit.edu/internalapi/project/thumbnail/279586215/set/

细节为:

其中279586215是项目id。

获取缩略图

scratch使用CDN分发静态资源。我们知道,使用CDN常常会牵扯到缓存策略问题。注入更新了图片,用户却迟迟看不到更新。

角色、舞台、音乐使用md5存储,所以不用担心缓存问题(更新前后的md5不同)。但缩略图似乎并没有使用md5. 那么缩略图如何处理缓存问题呢?

我们进入项目主页:https://scratch.mit.edu/projects/279586215/,看看加载缩略图的细节:

GET https://api.scratch.mit.edu/projects/279586215

可以看到图片有多种规格:

1
2
3
4
5
6
7
https://cdn2.scratch.mit.edu/get_image/project/279586215_480x360.png
https://cdn2.scratch.mit.edu/get_image/project/279586215_100x80.png?v=1547520628
https://cdn2.scratch.mit.edu/get_image/project/279586215_135x102.png?v=1547520628
https://cdn2.scratch.mit.edu/get_image/project/279586215_144x108.png?v=1547520628
https://cdn2.scratch.mit.edu/get_image/project/279586215_200x200.png?v=1547520628
https://cdn2.scratch.mit.edu/get_image/project/279586215_216x163.png?v=1547520628
https://cdn2.scratch.mit.edu/get_image/project/279586215_282x218.png?v=1547520628

如果你熟悉图片存储平台的API,你可能容易猜到279586215_480x360.png中的480x360 是这些平台系统的API。七牛云就提供了类似的。

我进入创作平台对舞台做了调整,发现https://cdn2.scratch.mit.edu/get_image/project/279586215_480x360.png立即变更。从url来看,它利用了cdn,又没有用md5,能做到立即更新,很赞!这应该是CDN平台提供的功能。

我们对scratch使用的CDN平台感到好奇,决定做一番探索:

1
2
➜  githubblog ping cdn2.scratch.mit.edu
PING d.sni.global.fastly.net (151.101.110.133): 56 data bytes

他们在使用fastly

最后我们来看下请求缩略图的细节:GET https://cdn2.scratch.mit.edu/get_image/project/279586215_480x360.png

缓存策略值得我们学习,尤其关注一下etag