minor #11615 [WebLink] All mentions to preload must have an "as" attribute (tristanbes)

javiereguiluz · javiereguiluz · commit 5df84ca5cfc2 · 2019-05-28T17:45:43.000+02:00
This PR was submitted for the master branch but it was squashed and merged into the 3.4 branch instead (closes #11615). Discussion ---------- [WebLink] All mentions to preload must have an "as" attribute All the examples mentionning a `preload` must contain also a `'as' => 'xxx'` attribute. Otherwise, it generates a warning on the browser console: ``` ⚠️ <link rel=preload> must have a valid `as` value` ```  Commits ------- a725141 [WebLink] All mentions to preload must have an \"as\" attribute
diff --git a/web_link.rst b/web_link.rst
@@ -61,7 +61,7 @@ WebLink:
 
     <head>
         <!-- ... -->
-        <link rel="stylesheet" href="{{ preload('/app.css') }}">
+        <link rel="stylesheet" href="{{ preload('/app.css', { as: 'style' }) }}">
     </head>
 
 If you reload the page, the perceived performance will improve because the
@@ -75,7 +75,7 @@ the priority of the resource to download using the ``importance`` attribute:
 
     <head>
         <!-- ... -->
-        <link rel="stylesheet" href="{{ preload('/app.css', { importance: 'low' }) }}">
+        <link rel="stylesheet" href="{{ preload('/app.css', { as: 'style', importance: 'low' }) }}">
     </head>
 
 .. tip::
@@ -88,8 +88,7 @@ How does it work?
 
 The WebLink component manages the ``Link`` HTTP headers added to the response.
 When using the ``preload()`` function in the previous example, the following
-header was added to the response: ``Link </app.css>; rel="preload"``
-
+header was added to the response: ``Link </app.css>; rel="preload"; as="style"``
 According to `the Preload specification`_, when an HTTP/2 server detects that
 the original (HTTP 1.x) response contains this HTTP header, it will
 automatically trigger a push for the related file in the same HTTP/2 connection.
@@ -105,7 +104,7 @@ issuing an early separate HTTP request, use the ``nopush`` option:
 
     <head>
         <!-- ... -->
-        <link rel="stylesheet" href="{{ preload('/app.css', { nopush: true }) }}">
+        <link rel="stylesheet" href="{{ preload('/app.css', { as: 'style', nopush: true }) }}">
     </head>
 
 Resource Hints
@@ -139,7 +138,7 @@ any link implementing the `PSR-13`_ standard. For instance, any
     <head>
         <!-- ... -->
         <link rel="alternate" href="{{ link('/index.jsonld', 'alternate') }}">
-        <link rel="stylesheet" href="{{ preload('/app.css', { nopush: true }) }}">
+        <link rel="stylesheet" href="{{ preload('/app.css', { as: 'style', nopush: true }) }}">
     </head>
 
 The previous snippet will result in this HTTP header being sent to the client:
@@ -160,7 +159,7 @@ You can also add links to the HTTP response directly from controllers and servic
         public function index(Request $request)
         {
             $linkProvider = $request->attributes->get('_links', new GenericLinkProvider());
-            $request->attributes->set('_links', $linkProvider->withLink(new Link('preload', '/app.css')));
+            $request->attributes->set('_links', $linkProvider->withLink(new Link('preload', '/app.css', ['as' : 'style'])));
 
             return $this->render('...');
         }
