创建一个自包含的离线 HTML5 应用程序以及嵌入其资源的最佳方法

Posted 2023-03-06

【中文标题】创建一个自包含的离线 HTML5 应用程序以及嵌入其资源的最佳方法

【英文标题】：Creating a self contained, offline HTML5 app and the best method for embedding its resources

【发布时间】：2013-09-28 14:57:57

【问题描述】：

我正在尝试创建一个可以通过电子邮件发送给人们的单个 html5 文档，其中包含运行它所需的所有标记、js、css 和图像。

我知道描述离线进程的文章，例如http://diveintohtml5.info/offline.html，但是想知道嵌入其资源（例如大图像和js文件）的最佳方法。

我会为这些使用 base64 编码还是有更好的方法？

应用将在相当新的浏览器上运行。

【问题讨论】：

老实说，我认为创建“单一文件”网页是不可能的。 HTML、JS、CSS、图像等都是不同格式的不同文件，需要按原样存储。您可以压缩所有内容以分发它......但它仍然需要在它的最终目的地解压缩。

@Charlie74 Data URIs.

@Jeffman，是的，根据其他评论，它需要立即可见

@Pointy 很有趣...实际上从来没有想过做这样的事情...

【参考方案1】：

是的，base64 对图像进行编码。我所做的是在转换为 base64 之前将它们保存为 png 并保存为正确的大小（有免费的在线网站可以为你做这件事）。这样可以节省很多空间。

要将数据保存到本地文件，请使用 HTML5 本地存储，这里有一个指南：http://www.html5rocks.com/en/features/storage。

对于 JS/CSS 文件，只需将它们粘贴在头部，没什么大不了的！

【讨论】：

Base64 编码实际上使图像更大，但总的来说你是对的，这就是要走的路。

Pointy - 是的，我的意思是 png/正确的尺寸可以节省空间。 base64 是数据 uri 的标准方式。

【参考方案2】：

为了一些工作，我不得不相当积极地这样做。

为了显着减小文件大小，如果图形是线条艺术而不是照片，我更愿意将其转换为可缩放的矢量图形文件（.svg）。这些是当今大多数浏览器自己理解的文本文件，并且很容易直接嵌入到 HTML 文件中。根据您的操作方式，您有几个选项，从直接使用带有命令的标签来驱动它，或者将其作为样式表组件嵌入到文档正文中您需要它的任何地方，使用数据 URI（例如 .my_imagebackground:url(data:image/svg+xml;charset=UTF-8,[SVG file without newlines]);，在此处找到更多详细信息：https://css-tricks.com/using-svg/）。确保您在所有您希望它使用的浏览器上进行测试......我已经能够在 IE、Chrome、Firefox 和 Edge 上成功地做到这一点，尽管我必须使用 charset=US-ASCII 并应用一些过滤SVG 文本使其工作。

对于字体，我使用 Font Squirrel 从我上传的字体文件生成 webkit（使用高级选项，并将 stylesheet.css 设置为将字体嵌入其中，这样您就可以将生成的文本复制到自己的页）。

如前所述，可以简单地将外部样式表和 javascript 直接复制到您的 HTML 中。