Add service worker streaming #85

westonruter · 2018-10-11T22:59:22Z

Works best with AMP due to the fact that all scripts in AMP are asynchronous (ampproject/amp-wp#1503). See changes in theme: westonruter/twentyseventeen-westonson#2.

This pull request explores what it would look like to improve performance of navigating a site through the use of streaming. See @jeffposnick's article Beyond SPA for some key inspiration here. The goal is to speed up the perceived performance for navigating a site by showing a meaningful interface and loading indicator immediately. In short, this should reduce the first contentful paint time when navigating an AMP site on origin.

The proposed way that this would work is as follows:

The user opts in to streaming via theme support flag (add_theme_support( 'service_worker_streaming' )) and adds a WP_Service_Worker_Navigation_Routing_Component::do_stream_boundary() call to their theme's header.php. This function outputs a loading message/progressbar to be displayed while the body is loading.
A new query var called wp_stream_fragment is added which can take one of two values: header and body (for example, https://example.com/?wp_stream_fragment=header and https://example.com/?wp_stream_fragment=body). This argument can be added to any URL, and when header is supplied the AMP plugin returns the document up until the do_stream_boundary() call and when body is supplied the document after the do_stream_boundary() call is returned.
The header fragment is precached by the service worker. The title in this header fragment is filtered to say “Loading...”. This header fragment is also served with an inline script containing am wpStreamCombine() function which is called later in the body fragment.
When the service worker handles a navigation request, it will immediately serve the header fragment which will be displayed while the browser is fetching the body fragment. While this is happening the loading indicator is shown.
WordPress serves the body fragment with data extracted from the head children and body attributes which would have normally been included in an entire response. Output buffering is used to capture the header for that given request and it is loaded into a DOMDocument. A JSON representation of this data included in this response and into the wpStreamCombine function (defined in the header fragment) at the very beginning of the body fragment which reconciles the differences between the precached header fragment. In Jeff's example linked above, he used this approach for reconciling the document.title.
If the request to obtain the body fragment results in a redirect, then the resultant URL is set in the user's browser via location.replaceState().
The wpStreamCombine function deletes the element containing loading indicator.
If the body fragment request fails, then a precached offline page body fragment would be served instead. Eventually, the body fragment responses should use a stale-while-revalidate strategy once there is a mechanism to communicate an update back to the user (see amp-install-serviceworker: Trigger event when service worker has been update has been installed ampproject/amphtml#18615 (comment))

The logic for obtaining the elements in the head can be deferred for later so another plugin (like AMP) can obtain the elements after it has sanitized it: ampproject/amp-wp#1503.

Abbreviated example header fragment response

<!DOCTYPE html>
<html lang="en-US" class="no-js" amp="">
	<head>
		<meta charset="UTF-8">
		...
	</head>
	<body class="home">
		...
		<div id="wp-stream-fragment-boundary">Loading...</div>
		<script id="wp-stream-combine-function">
			function wpStreamCombine( data ) { /* ... */ }
		</script>

Abbreviated example body fragment response

	<script id="wp-stream-combine-call">
	wpStreamCombine( {
		"head_nodes": [ /* ... */ ],
		"body_attributes": { /* ... */ }
	} );
	</script>
	<div id="primary" class="content-area">
	...
	</div>
</body>
</html>

Demo

See child theme PR for Twenty Seventeen that implements support: westonruter/twentyseventeen-westonson#2

Video: https://youtu.be/y5J69wLstUM

Live: https://streaming-westonruter.pantheonsite.io/

Todo

Given that the header is dynamically-generated by WordPress it becomes very easy for the precached header fragment to become stale. Theme authors may need to add the boundary before the nav menu is output to help mitigate this. Otherwise, a filter like wp_offline_error_precache_entry will be needed with a revision that includes all variability that will be included in the header.
When the body request returns in a redirect, we'll need to cause the browser to redirect via a location.replace() call.

postphotos · 2018-10-13T05:13:06Z

This is awesome. Really looking forward to this coming together!

westonruter · 2018-10-16T00:08:56Z

wp-includes/js/service-worker-navigation-routing.js

+					redirectedUrl.searchParams.delete( STREAM_HEADER_FRAGMENT_QUERY_VAR );
+					const script = `<script>history.replaceState( {}, '', ${ JSON.stringify( redirectedUrl.toString() ) } );</script>`;
+					return response.text().then( ( body ) => {
+						return new Response( script + body );


@jeffposnick here's how I ended up dealing with the challenge of handling a streamed body that redirects.

The “Try Redirect” nav menu item points to an old post URL that redirects, so you can see the URL go from "old-post" to "new-post".

Demo site: https://streaming-westonruter.pantheonsite.io/

[ci skip]

… problem

westonruter · 2018-10-18T21:16:47Z

wp-includes/components/class-wp-service-worker-navigation-routing-component.php

+			$header_html       = ob_get_clean();
+			$libxml_use_errors = libxml_use_internal_errors( true );
+			$header_html       = preg_replace( '#<noscript.+?</noscript>#s', '', $header_html ); // Some libxml versions croak at noscript in head.
+			$dom               = new DOMDocument( $header_html );


Remove $header_html as an arg. Not correct.

wp-includes/components/class-wp-service-worker-navigation-routing-component.php

westonruter · 2018-10-18T21:40:13Z

wp-includes/js/service-worker-navigation-routing.js

+		const canStreamResponse = () => {
+			const url = new URL( event.request.url );
+			return ! (
+				/\.php$/.test( url.pathname ) ||


Instead of doing this, why not add *.php files to the blacklist patterns?

westonruter · 2018-10-18T21:41:41Z

wp-includes/js/service-worker-navigation-routing.js

+
+			const url = new URL( event.request.url );
+			url.searchParams.append( STREAM_HEADER_FRAGMENT_QUERY_VAR, 'body' );
+			const request = new Request( url.toString(), {...event.request} );


Verify that {...event.request} is working.

westonruter · 2018-10-18T21:43:01Z

wp-includes/js/service-worker-navigation-routing.js

+					.catch( sendOfflineResponse ),
+			]);
+
+			// @todo Handle error case.


This was done

wp-includes/js/service-worker-stream-combiner.js

amedina · 2018-10-18T22:52:59Z

wp-includes/js/service-worker-navigation-routing.js

+					return response;
+				}
+			}
+			const channel = new BroadcastChannel( 'wordpress-server-errors' );


Not a blocker at this point, but it would be needed to define the scenario for browsers that do not support BroadcastChannel (https://caniuse.com/#search=broadcastchannel)

Yes, this is captured in #81.

amedina · 2018-10-18T22:55:47Z

wp-includes/js/service-worker-navigation-routing.js

+			}
+		}
+
+		const canStreamResponse = () => {


Add a brief comment here on the need to avoid PHP files. As discussed, this could be moved to the black listing logic.

amedina · 2018-10-18T22:57:00Z

wp-includes/js/service-worker-stream-combiner.js

+/**
+ * Apply the stream body data to the stream header.
+ *
+ * @param {Array}  data Data.


Perhaps expand the expected content of the data argument.

amedina

This is amazing work. Progressive Web, the WordPress way. Ship it!

westonruter added 2 commits October 11, 2018 12:04

Rename error-response-handling to navigation-routing

c4c5d13

Adopt streaming logic first prototyped in AMP plugin

7b8e0bf

westonruter mentioned this pull request Oct 11, 2018

Add service worker streaming for AMP documents ampproject/amp-wp#1503

Merged

Hook up streams

fcec82a

westonruter mentioned this pull request Oct 12, 2018

Add service worker streaming westonruter/twentyseventeen-westonson#2

Merged

westonruter added 3 commits October 12, 2018 12:21

Add 500/offline error handling to streams

6ae18b2

WIP: DOM Diffing

348840f

Pull back diffing logic to just target subset of AMP support

85e2efd

westonruter added 10 commits October 13, 2018 10:40

Prevent streaming from applying in admin

e7e4522

Update meta from body fragment and add scripts

baf00f1

WIP: Improve DOM diffing

52a71f6

Reduce amount of code needed to apply DOM changes

992f479

Prevent unnecessarily removing elements

720d187

Allow loading element to be customized

ba3b3a4

Populate comment nodes in header

1811ec9

Prevent streaming on the login screen and other PHP endpoints

2f760b6

Prevent streaming responses to direct fragment navigation

293bfdb

Fix handling of streaming body for URL that redirects

831bcb6

westonruter commented Oct 16, 2018

View reviewed changes

westonruter changed the title ~~[WIP] Add service worker streaming~~ Add service worker streaming Oct 16, 2018

WIP: Streaming non-AMP

16852cf

westonruter mentioned this pull request Oct 16, 2018

Add navigation caching strategy #89

Merged

westonruter added 3 commits October 17, 2018 17:26

WIP: Streaming non-AMP (2)

0e6985a

[ci skip]

Finish eliminating dependency on AMP

51fd288

Skip registering query var for fragment since causes front-page query…

9855b53

… problem

westonruter requested review from felixarntz and amedina October 18, 2018 06:04

Improve method ordering and phpdoc

9bfe7cc

westonruter commented Oct 18, 2018

View reviewed changes

Add missing jsdoc, remove bad DOMDocument arg, clean up

3b11698

amedina reviewed Oct 18, 2018

View reviewed changes

amedina approved these changes Oct 18, 2018

View reviewed changes

westonruter added 3 commits October 18, 2018 21:10

Prevent sending streamed responses when navigation preload happens

7da958d

Expand pattern blacklist for non-template URLs

270ab2c

Fix copying request props

65d74ca

westonruter merged commit f647214 into master Oct 19, 2018

westonruter deleted the add/sw-streaming branch October 23, 2018 22:24

westonruter added service-workers and removed service-workers labels Feb 25, 2019

westonruter added this to the 0.2 milestone Apr 16, 2019

westonruter mentioned this pull request Jul 8, 2019

Intent to unship: support for streaming responses #191

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add service worker streaming #85

Add service worker streaming #85

westonruter commented Oct 11, 2018 •

edited

Loading

postphotos commented Oct 13, 2018

westonruter Oct 16, 2018 •

edited

Loading

westonruter Oct 16, 2018 •

edited

Loading

jeffposnick Oct 16, 2018

westonruter Oct 18, 2018

westonruter Oct 18, 2018

westonruter Oct 18, 2018

westonruter Oct 18, 2018

amedina Oct 18, 2018

westonruter Oct 18, 2018

amedina Oct 18, 2018

amedina Oct 18, 2018

amedina left a comment

Add service worker streaming #85

Add service worker streaming #85

Conversation

westonruter commented Oct 11, 2018 • edited Loading

Abbreviated example header fragment response

Abbreviated example body fragment response

Demo

Todo

postphotos commented Oct 13, 2018

westonruter Oct 16, 2018 • edited Loading

Choose a reason for hiding this comment

westonruter Oct 16, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amedina left a comment

Choose a reason for hiding this comment

westonruter commented Oct 11, 2018 •

edited

Loading

westonruter Oct 16, 2018 •

edited

Loading

westonruter Oct 16, 2018 •

edited

Loading