[WIP] PoC: Offline editing

lib/load.php

@@ -64,3 +64,4 @@ function gutenberg_is_experiment_enabled( $name ) {
 require dirname( __FILE__ ) . '/experiments-page.php';
 require dirname( __FILE__ ) . '/customizer.php';
 require dirname( __FILE__ ) . '/edit-site-page.php';
+require dirname( __FILE__ ) . '/offline-editing.php';

lib/offline-editing.js

@@ -0,0 +1,43 @@
+/* @todo This file should be moved to a better location. */
+/* global wp, fetch, caches, ERROR_OFFLINE_URL, ERROR_MESSAGES, ERROR_500_URL */
+
+// IIFE is used for lexical scoping instead of just a braces block due to bug with const in Safari.
+( () => {
+	const queue = new wp.serviceWorker.backgroundSync.Queue( 'gutenbergPendingEdits' );
+
+	const editPostHandler = ( { url, event } ) => {
+		const clone = event.request.clone();
+		return fetch( event.request )
+			.then( ( response ) => {
+				return response;
+			} )
+			.catch( () => {
+				const bodyPromise = clone.blob();
+				bodyPromise.then(
+					function( body ) {
+						const request = event.request;
+						const req = new Request( request.url, {
+							method: request.method,
+							headers: request.headers,
+							mode: 'same-origin',
+							credentials: request.credentials,
+							referrer: request.referrer,
+							redirect: 'manual',
+							body,
+						} );
+
+						// Add request to queue.
+						queue.pushRequest( {
+							request: req,
+						} );
+					}
+				);
+			} );
+	};
+
+	wp.serviceWorker.routing.registerRoute(
+		/\/index\.php/,
+		editPostHandler,
+		'POST'
+	);
+} )();

lib/offline-editing.php

@@ -0,0 +1,17 @@
+<?php
+
+if ( ! defined( 'ABSPATH' ) ) {
+	die( 'Silence is golden.' );
+}
+
+function gutenberg_register_offline_editing_service_worker_script( $scripts ) {
+	$scripts->register(
+		'gutenberg-offline-editing',
+		array(
+			'src'  => plugin_dir_url( __FILE__ ) . 'offline-editing.js',
+			'deps' => array( 'wp-base-config' ),
+		)
+	);
+}
+
+add_action( 'wp_admin_service_worker', 'gutenberg_register_offline_editing_service_worker_script' );

packages/api-fetch/src/index.js

@@ -94,8 +94,8 @@ const defaultFetchHandler = ( nextOptions ) => {
 					.then( ( response ) => parseResponseAndNormalizeError( response, parse ) ),
 			() => {
 				throw {
-					code: 'fetch_error',
-					message: __( 'You are probably offline.' ),
+					type: 'offline',
+					message: __( 'You do not have an internet connection, however, your changes will be synced once back online. Previewing and some editing is not available when offline.' ),
 				};
 			}
 		);

packages/core-data/src/actions.js

@@ -366,7 +366,7 @@ export function* saveEntityRecord(
 
 		// If we got to the point in the try block where we made an optimistic update,
 		// we need to roll it back here.
-		if ( persistedEntity && currentEdits ) {
+		if ( 'offline' !== error.type && persistedEntity && currentEdits ) {
 			yield receiveEntityRecords( kind, name, persistedEntity, undefined, true );
 			yield editEntityRecord(
 				kind,

packages/editor/src/store/actions.js

@@ -22,6 +22,7 @@ import {
 	getNotificationArgumentsForSaveSuccess,
 	getNotificationArgumentsForSaveFail,
 	getNotificationArgumentsForTrashFail,
+	getNotificationArgumentsForOfflineSync,
 } from './utils/notice-builder';
 import serializeBlocks from './utils/serialize-blocks';
 
@@ -261,7 +262,20 @@ export function* savePost( options = {} ) {
 		previousRecord.type,
 		previousRecord.id
 	);
-	if ( error ) {
+
+	if ( error && 'offline' === error.type ) {
+		const args = getNotificationArgumentsForOfflineSync( {
+			post: previousRecord,
+			edits,
+			error,
+		} );
+		if ( args.length ) {
+			yield dispatch( 'core/notices', 'createWarningNotice', ...args );
+		}
+		if ( ! options.isAutosave ) {
+			yield dispatch( 'core/block-editor', '__unstableMarkLastChangeAsPersistent' );
+		}
+	} else if ( error ) {
 		const args = getNotificationArgumentsForSaveFail( {
 			post: previousRecord,
 			edits,

packages/editor/src/store/utils/notice-builder.js

@@ -13,6 +13,20 @@ import { SAVE_POST_NOTICE_ID, TRASH_POST_NOTICE_ID } from '../constants';
  */
 import { get, includes } from 'lodash';
 
+export function getNotificationArgumentsForOfflineSync( data ) {
+	const { error } = data;
+	let noticeMessage = '';
+
+	// Check if message string contains HTML. Notice text is currently only
+	// supported as plaintext, and stripping the tags may muddle the meaning.
+	if ( error.message && ! ( /<\/?[^>]*>/.test( error.message ) ) ) {
+		noticeMessage = [ error.message ].join( ' ' );
+	}
+	return [ noticeMessage, {
+		id: SAVE_POST_NOTICE_ID,
+	} ];
+}
+
 /**
  * Builds the arguments for a success notification dispatch.
  *