Chrome implemented MHTML, but what is that?

Chrome implemented MHTML, but what is that?

Remember the time when you were browsing that site and you wanted to view the page offline, so you Right Clicked and Saved that page? Yup, we are talking about the same thing.

And do you remember how it used to create a full fledged folder with all the resources like images, JavaScript and CSS files? Yes, we are still talking about the same thing.

Now imagine sending this web page via email. If you are a front-end developer, or have even a little bit of experience with creating html pages, you will realize one thing. Sending the page via email and making sure that the page works without any problems wont be possible that easily for big pages. You will need to aggregate all the resources into a single file[1] to make sure it works in the email. This is where MHTML comes into picture.

What is MHTML?

MHTML has a weird full form as per RFC 2557. It's called MIME Encapsulation of Aggregate Documents, such as HTML (MHTML) [1].

It is a specification designed to package or aggregate a web page and all the resources used into a single composite message structure such that the links or URIs used in the page may reference the resources from within that message. In layman's term. Let the page be served as a zipped file with everything packed rather than being served as one file which tries to access other files.

Interesting Stuff. Tell me when can I use it.

Well technically you are already using it. Here are three scenarios where you might have used it already.

  1. When you save a webpage nowadays, it gets saved as one single file on your system. That is MHTML version of that page[2].
  2. When you try to access an old page from the internet, say from the archives. That is MHTML page[2].
  3. If you are an android user, you can capture the snapshot of a web page for offline usage. This offline copy of the page is MHTML page[2].

Conslusion

Until this morning I had no idea what MHTML was. And when I learned about it, I thought about sharing this with other people. Chrome team says they implemented the spec in a little bit different way which tries to cover the missing scenarios in RFC 2557 [3], but feel free to look up the resources in the section below if you are interested.

Resources

[1] RFC 2557 - https://tools.ietf.org/html/rfc2557

[2] MHTML Generation and Loading as Implemented in Chrome - https://discourse.wicg.io/t/mhtml-generation-and-loading-as-implemented-in-chrome/2387

[3] Add and update MHTML headers to support sharing of MHTML pages - https://www.chromestatus.com/feature/5745939008454656

要查看或添加评论,请登录

Prateek Jadhwani的更多文章

  • Bye Bye Modals, Welcome <dialog> element.

    Bye Bye Modals, Welcome <dialog> element.

    Creating a modal is such a complex thing in the world of frontend. You have to create a container, make sure that it's…

    1 条评论
  • Implementing WebAuthentication with FaceID or TouchID

    Implementing WebAuthentication with FaceID or TouchID

    TL;DR ? ∩ ? First of all, without wasting any time, the demo link is here: https://prateekjadhwani.github.

  • 10 Years in 10 Learnings

    10 Years in 10 Learnings

    I am not sure how the topic came about, but I was talking to a friend and somehow it ended up about writing this…

    4 条评论
  • Playing with Unity ML-Agents (Part -02) - Training a flying drone

    Playing with Unity ML-Agents (Part -02) - Training a flying drone

    Thank you for reading the Unity ML Agents article. If you would like to read the previous article, click on this link:…

  • Playing with Unity ML-Agents (Part -01)

    Playing with Unity ML-Agents (Part -01)

    Last Saturday, I wanted to look into ML Agents for no reason. Like literally for no reason.

  • It's the beginning of 2018, but is your website ready for css-grid?

    It's the beginning of 2018, but is your website ready for css-grid?

    What is css-grid? CSS-Grid is one of those new specifications that have been in implementation for 3 years now and were…

  • A CSS code to display code errors.

    A CSS code to display code errors.

    In this article I will be talking about a CSS Property that can be used in code editors to display errors. It seems…

  • ARKit Barn and Trees Landscape

    ARKit Barn and Trees Landscape

    This is me trying to create a barn surrounded by trees scene in AR. I hope you guys like it.

  • Hello World in ARKit

    Hello World in ARKit

    These are the 5 easy steps to create the hello world of AR app on an iPhone taking less than 2 min. At the end of this…

    1 条评论

社区洞察

其他会员也浏览了