h5trigger.github.io
通过图片隐写,零成本发布你的WebApp(适用于中小型前后端分离H5)
H5泛解析
什么是H5泛解析？这是我新造的一个名词，这里举个例子说明：
首先，我这里有一个 WebApp :
https://message.biliimg.com/bfs/im/bed8c43082ea6dc292657179f229cf29a43c9db6.png
你会说，怎么可能，这不是一张图片吗？
但实际上，这个图片隐写了一个压缩包，里面包含了 html , js , css 等文件，是一个完整的前端 APP 。
当你要运行（分发）这个 APP ，也很简单：
https://h5trigger.github.io/sw.html#url=https://message.biliimg.com/bfs/im/bed8c43082ea6dc292657179f229cf29a43c9db6.png&pass=
这又是什么原理？
原来是 https://h5trigger.github.io/sw.html 这个页面，自动下载了这个 png ，把隐写的zip解压（支持密码），然后 使用ServiceWorker技术，实现了 WebApp.（此过程纯前端完成，不涉及任何后端）
H5泛解析就是 https://h5trigger.github.io/sw.html 这个页面 ，针对任意指定的图片文件，均解包成 WebApp 的缝合技术。
背景：
某一次，我写了一个小型的H5项目。里面一共有3个文件，分别是 index.html , 1.js , 1.css。
我需要把这个小的WEB项目搭建成网站，从而提高我的工作效率。
这时，我可以把这几个文件上传到我的博客网站上，但我博客网站根目录的文件已经乱得不能再乱了。
而且这个WEB项目涉及一些自用的API，我只打算自己使用，不想公开发布。
我就想，有没有存在一种类似Docker的东西，可以把我的这几个文件打包，然后很简单地就能制作成WEBAPP并发布呢？
于是，我的思路如下。
1.首先我把这几个文件用zip打包，密码为 password。
2.然后把这个 zip 内容隐写到图片 zip.png 里。
3.上传到在线图床。 得到 https://x.x/zip.png
4.访问 https://h5trigger.github.io/sw.html#url=https://x.x/zip.png&pass=password 即可。
重点是第4步 sw.html 使用的技术。
访问 https://h5trigger.github.io/sw.html#url=https://x.x/zip.png&pass=password ，其加载流程如下：
1.加载 location.hash ，远程下载 https://x.x/zip.png
2.使用 canvas，从 zip.png 中还原出 源zip文件。
3.使用 zip.js , 纯前端解压文件。（支持zip加密）
4.使用 ServiceWorker 技术，hook 请求路径。
一些限制：
1.图床必须满足 https 且响应头 access-control-allow-origin: * 以满足跨域。否则需要一些技术手段中转。
2.服务端必须满足 根目录，https 以满足 ServiceWorker 工作条件
兼容性（高）：
支持ServiceWorker技术（经测试，Chrome 支持，安卓webview支持，大部分移动浏览器支持）
安全性（极高）：
1.图床端：只能获得 zip 没有秘钥
2.服务端：解压秘钥包含在 location.hash ，不通过网络发送
就是说，所有敏感信息皆是本地
访问速度（高）：
1.由于 WebApp 储存在图床，所以访问速度杠杠的。
2.一次加载，永久运行。也可以选择其他H5泛解析节点。
分发：
欢迎分发 H5trigger 。这是一个纯前端项目。核心文件sw.html , sw.js , (zip.min.js) .
把它们上传到您的 https网站的根目录，就能形成新的H5泛解析节点，让这个巧妙的构想焕发更大的活力。
DEBUG:
https://h5trigger.github.io/sw.html#url=https://message.biliimg.com/bfs/im/bed8c43082ea6dc292657179f229cf29a43c9db6.png&pass=&debug=1
一些案例：
简单的 HLS 播放器
https://h5trigger.github.io/sw.html#url=https://message.biliimg.com/bfs/im/825dbe353edfa4d06f068f5cd0a8c10b3e28d042.png&pass=hlshls&main=index.html%23url=https://yun.66dm.net/SBDM/LycorisRecoil01.m3u8
高端大气门户页面
https://h5trigger.github.io/sw.html#url=https://message.biliimg.com/bfs/im/bed8c43082ea6dc292657179f229cf29a43c9db6.png&pass=
案例：
1.我访问 https://h5trigger.github.io/sw.html 。
选择一个ZIP文件。然后点击下载图片。
2.把图片上传到第三方图床，得到 https://message.biliimg.com/bfs/im/bed8c43082ea6dc292657179f229cf29a43c9db6.png 。
后话
主要是这个githubPages一直存在，自写的一些小项目不用公开搭建，直接把加密zip包上传到图床，就可以调用这个githubpage加载网站，还可以分享给别人，加上zip密码，任意第三方也不可访问这个网站。少了很多风险，适合搭一些自用的站啥的，比如动漫采集网站。
至于后端，其实只要用php搞一个简单的接口就行，就代理访问任意资源加上access-control-allow-origin: * 中转实现跨域。
其他任意功能均可前端用js+正则提取，属实是十分方便了。