Add preload_link_tag helper. #31251

guilleiguaran · 2017-11-28T06:30:36Z

Summary

This helper creates a link tag with preload keyword that allows to the browser to initiate early fetch of resources (different to the specified in javascript_include_tag and stylesheet_link_tag). Additionally, this sends Early Hints if supported.

See 59a02fb for more details about Early Hints.

Preload spec: https://w3c.github.io/preload/

Usage examples

preload_link_tag("custom_theme.css")
# => <link rel="preload" href="/assets/custom_theme.css" as="style" type="text/css" />

preload_link_tag("/videos/video.webm")
# => <link rel="preload" href="/videos/video.mp4" as="video" type="video/webm" />

preload_link_tag(post_path(format: :json), as: "fetch")
# => <link rel="preload" href="/posts.json" as="fetch" type="application/json" />

preload_link_tag("worker.js", as: "worker")
# => <link rel="preload" href="/assets/worker.js" as="worker" type="text/javascript" />

preload_link_tag("//example.com/font.woff2")
# => <link rel="preload" href="//example.com/font.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>

preload_link_tag("//example.com/font.woff2", crossorigin: "use-credentials")
# => <link rel="preload" href="//example.com/font.woff2" as="font" type="font/woff2" crossorigin="use-credentials" />

preload_link_tag("/media/audio.ogg", nopush: true)
# => <link rel="preload" href="/media/audio.ogg" as="audio" type="audio/ogg" />

eileencodes

Looks good to me @guilleiguaran 👍

y-yagi · 2017-11-28T23:31:37Z

actionpack/lib/action_dispatch/http/mime_types.rb


 Mime::Type.register "image/png", :png, [], %w(png)
 Mime::Type.register "image/jpeg", :jpeg, [], %w(jpg jpeg jpe pjpeg)
 Mime::Type.register "image/gif", :gif, [], %w(gif)
 Mime::Type.register "image/bmp", :bmp, [], %w(bmp)
 Mime::Type.register "image/tiff", :tiff, [], %w(tif tiff)
 Mime::Type.register "image/svg+xml", :svg
+Mime::Type.register "image/webp", :webp, [], %w(webp)
+
+Mime::Type.register "audio/mpeg", :mpeg, [], %w(mp1 mp2 mp3)


I'm curious. Is it safe for the same value to be registered in mine type symbols? This seems to cause warning in the definition of mime method.
https://travis-ci.org/rails/rails/jobs/308298401#L1970

That's right!! I'll remove the video/mpeg one since it contains old formats.

matthewd · 2017-11-29T01:50:39Z

Are these really common enough as HTTP responses to be in our default set? 😕

This helper creates a link tag with preload keyword that allows to browser to initiate early fetch of resources. Additionally this send Early Hints if supported. See 59a02fb for more details about Early Hints. Preload spec: https://w3c.github.io/preload/

… browsers

y-yagi · 2017-11-29T03:47:13Z

actionpack/lib/action_dispatch/http/mime_types.rb

+Mime::Type.register "audio/flac", :flac, [], %w(flac)
+
+Mime::Type.register "video/webm", :webm, [], %w(webm)
+Mime::Type.register "video/mp4", :mp4, [], %w(mp4 m4v)


It seems that mp4 is still duplicated, is this intentional?
https://travis-ci.org/rails/rails/jobs/308761133#L1969

Missed this comment before of merge, will fix it now :/

guilleiguaran · 2017-11-29T06:51:13Z

@matthewd sorry, missed your comment before of merging, probably those types aren't common enough in HTTP responses but I decided to include those in this set because it seems to be the unique way we can lookup the mime types using only the extension.

I was planning to leave the type attribute out of the tag by default but it seems to be important for browsers:

<link> elements can accept a type attribute, which contains the MIME type of the resource the element is pointing to. This is especially useful when preloading resources — the browser will use the type attribute value to work out whether it supports that resource, and will only start downloading it if this is the case, ignoring it if not.

matthewd · 2017-11-29T07:04:13Z

My concern about moving from a list of very common files to all "reasonable" files, is that it opens us up to a lot of future churn.

And on a very relevant note: it also pretty much obliges us to maintain the values forever. You've removed an existing definition, which will break people's existing applications without a deprecation. We can't do that.

I haven't even heard of half of these things, so I'd rather not be stuck keeping them in a list forever, just to support a small number of users (both because of a rare filetype, and a currently rare feature).

How about we trim the list for now, and just make the helper raise if we don't know the type? That way people will be forced to either specify it as an option, or register the type for themselves.

See discussion in #31251

guilleiguaran · 2017-11-29T07:34:23Z

@matthewd agree, I've restored mpeg and trimmed the list keeping only the most common types in 0061e0c

guilleiguaran force-pushed the preload_link_tag branch from dc81884 to 3cebecb Compare November 28, 2017 07:38

montogeek approved these changes Nov 28, 2017

View reviewed changes

eileencodes approved these changes Nov 28, 2017

View reviewed changes

y-yagi reviewed Nov 28, 2017

View reviewed changes

guilleiguaran added 2 commits November 28, 2017 20:53

Add preload_link_tag helper.

eb90b8b

This helper creates a link tag with preload keyword that allows to browser to initiate early fetch of resources. Additionally this send Early Hints if supported. See 59a02fb for more details about Early Hints. Preload spec: https://w3c.github.io/preload/

Register most popular audio/video/font mime types supported by modern…

729a3da

… browsers

guilleiguaran force-pushed the preload_link_tag branch from 3cebecb to 729a3da Compare November 29, 2017 01:54

Update send_file headers test to use mp4 as example instead of mpg

af10a39

y-yagi reviewed Nov 29, 2017

View reviewed changes

guilleiguaran merged commit 17661b8 into master Nov 29, 2017

guilleiguaran deleted the preload_link_tag branch November 29, 2017 06:28

guilleiguaran added a commit that referenced this pull request Nov 29, 2017

Restore mpeg mime type, delete less common mime types

0061e0c

See discussion in #31251

ykzts mentioned this pull request Apr 19, 2018

Replace preload link tag to Rails helper mastodon/mastodon#7192

Merged

dmix mentioned this pull request Jan 7, 2019

Add preload_link_tag helper rails/webpacker#1874

Closed

Add preload_link_tag helper. #31251

Add preload_link_tag helper. #31251

guilleiguaran commented Nov 28, 2017 •

edited

eileencodes left a comment

y-yagi Nov 28, 2017

guilleiguaran Nov 29, 2017

matthewd commented Nov 29, 2017

y-yagi Nov 29, 2017

guilleiguaran Nov 29, 2017

guilleiguaran commented Nov 29, 2017 •

edited

matthewd commented Nov 29, 2017

guilleiguaran commented Nov 29, 2017 •

edited

Add preload_link_tag helper. #31251

Add preload_link_tag helper. #31251

Conversation

guilleiguaran commented Nov 28, 2017 • edited

Summary

Usage examples

eileencodes left a comment

Choose a reason for hiding this comment

y-yagi Nov 28, 2017

Choose a reason for hiding this comment

guilleiguaran Nov 29, 2017

Choose a reason for hiding this comment

matthewd commented Nov 29, 2017

y-yagi Nov 29, 2017

Choose a reason for hiding this comment

guilleiguaran Nov 29, 2017

Choose a reason for hiding this comment

guilleiguaran commented Nov 29, 2017 • edited

matthewd commented Nov 29, 2017

guilleiguaran commented Nov 29, 2017 • edited

guilleiguaran commented Nov 28, 2017 •

edited

guilleiguaran commented Nov 29, 2017 •

edited

guilleiguaran commented Nov 29, 2017 •

edited