[explainer] Add explainer for fetchLater() API (#80)

This PR adds overview and example codes for the draft `fetchLater()` API spec from whatwg/fetch#1647

The API will address the discussions in #70 #72 #73 #74 #75 #76.

docs/fetch-later-api.md

@@ -1,4 +1,147 @@
 # fetchLater() API
 
+*This document is an explainer for fetchLater() API. It is evolved from a series of [discussions and concerns](https://github.com/WICG/pending-beacon/issues/70) around the experimental PendingBeacon API and the draft PendingRequest API.*
 
-TODO
+[Draft Specification](https://whatpr.org/fetch/1647/094ea69...152d725.html)
+
+## Overview
+
+`fetchLater()` is a JavaScript API to request a deferred fetch. Once requested, the deffered request is queued by the browser, and will be invoked in one of the following scenarios:
+
+* The document is destroyed.
+* The document is bfcached and not restored after a certain time.
+
+The API returns a `FetchLaterResult` that contains a boolean field `sent` that may be updated to tell whether the deferred request has been sent out or not.
+On successful sending, the whole response will be ignored, including body and headers. Nothing at all should be processed or updated, as the page is already gone.
+
+Note that from the point of view of the API user, the exact send time is unknown.
+
+### Constraints
+
+* A deferred fetch request body, if exists, has to be a byte sequence. Streaming requests are not allowed.
+* The total size of deferred fetch request bodies are limited to 64KB per origin. Exceeding this would immediately reject with a QuotaExceeded.
+
+## Key scenarios
+
+### Defer a `GET` request until page is destroyed or evicted from bfcache
+
+No matter the request succeeds or not, the browser will drop the resonse or
+error from server, and the caller will not be able to tell.
+
+```js
+fetchLater('/send_beacon');
+```
+
+### Defer a `POST` request until around 1 minute after page is bfcached
+
+> **NOTE**: **The actual sending time is unkown**, as the browser may wait for a longer or shorter period of time, e.g., to optimize batching of deferred fetches.
+
+```js
+fetchLater({
+  url: '/send_beacon'
+  method: 'POST'
+  body: getBeaconData(),
+}, {backgroundTimeout: 60000 /* 1 minute */});
+```
+
+### Send a request when page is abondoned
+
+```js
+let beaconResult = null;
+
+function createBeacon(data) {
+  if (beaconResult && beaconResult.sent) {
+    // Avoid creating duplicated beacon if the previous one is still pending.
+    return;
+  }
+
+  beaconResult = fetchLater(data, {backgroundTimeout: 0});
+}
+
+addEventListener('pagehide', () => createBeacon(...));
+addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'hidden') {
+    // may be the last chance to beacon, though the user could come back later.
+    createBeacon(...);
+  }
+});
+```
+
+### Update a pending request
+
+```js
+let beaconResult = null;
+let beaconAbort = null;
+
+function updateBeacon(data) {
+  const pending = !beaconResult || !beaconResult.sent;
+  if (pending && beaconAbort) {
+    beaconAbort.abort();
+  }
+
+  createBeacon(data);
+}
+
+function createBeacon(data) {
+  if (beaconResult && beaconResult.sent) {
+    // Avoid creating duplicated beacon if the previous one is still pending.
+    return;
+  }
+
+  beaconAbort = new AbortController();
+  beaconResult = fetchLater({
+    url: data
+    signal: beaconAbort.signal
+  });
+}
+```
+
+### Implement `PendingBeacon` with `fetchLater()`
+
+The following implementation try to simulate the behavior of [`PendingBeacon` API](pending-beacon-api.md#javascript-api) from earlier proposal.
+
+```js
+class PendingBeacon {
+  #abortController = null;
+  #requestInfo = null;
+  #backgroundTimeout = null;
+  #result = null;
+
+  constructor(requestInfo, backgroundTimeout) {
+    this.#requestInfo = requestInfo;
+    this.#backgroundTimeout = backgroundTimeout;
+    this.#schedule();
+  }
+
+  // Schedules a deferred request to send on page destroyed or after page in bfcached + `this.#backgroundTimeout` time.
+  #schedule() {
+    if (this.#result && this.#result.sent) {
+      this.#abortController = null;
+    }
+    if (this.#abortController) {
+      // Cacnel previous pending request.
+      this.#abortController.abort();
+    }
+
+    this.#abortController = new AbortController();
+    this.#requestInfo.signal = this.#abortController.signal;
+    #result = fetchLater(this.#requestInfo, {this.#backgroundTimeout});
+  }
+
+  // Aborts the deferred request and schedules a new one.
+  update(requestInfo) {
+    this.#requestInfo = requestInfo;
+    this.#schedule();
+  }
+
+  // sendNow(): User should directly call `fetch(requestInfo)` instead.
+}
+```
+
+## Open Discussions
+
+See [Deferred fetching PR](https://github.com/whatwg/fetch/pull/1647).
+
+## Relevant Discussions
+
+See [the fetch-based-api hotlist](https://github.com/WICG/pending-beacon/issues?q=is%3Aissue+is%3Aopen+label%3Afetch-based-api).