创建独立的离线 HTML5 应用以及嵌入其资源的最佳方法

Creating a self contained, offline HTML5 app and the best method for embedding its resources

本文关键字：资源最佳方法离线独立 HTML5 应用创建更新时间：2023-09-26

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

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

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

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

是的，base64 对图像进行编码。我所做的是在转换为 base64 之前将它们保存为 png 并转换为正确的大小(有免费的在线网站可以为您执行此操作(。这样可以节省大量空间。

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

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

对于某些工作，我不得不相当积极地这样做。

为了显着减小文件大小，如果图形是线条艺术而不是照片，我更喜欢将其转换为可缩放的矢量图形文件(.svg(。这些是当今大多数浏览器自行理解的文本文件，并且很容易直接嵌入到HTML文件中。根据您想要的方式，您在这里有几个选项，包括直接使用带有命令的标签来驱动它，或者将其嵌入为样式表组件，以便在文档中的任何需要的地方使用数据 URI(例如 .my_image{background: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(使用高级选项，并设置样式表.css将字体嵌入其中，以便您可以将生成的文本复制到您自己的页面中(。

外部样式表和JavaScript可以直接复制到HTML中，如前所述。