index.html

---
feature_name: "Service Worker Sample: Fallback Response"
chrome_version: 42
feature_id: 6561526227927040
---

<h3>Background</h3>
<p>
  This sample demonstrates basic service worker registration, with the service worker providing
  fallback responses when specific HTTP requests fail. This is done within the fetch handler of
  the service worker, and will only work for responses that are not
  <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-opaque">opaque</a>,
  since we need to examine the response's HTTP status code.
</p>

{% capture initial_output_content %}
<p>
  Each of these buttons will trigger a CORS-enabled HTTP request to fetch a list of videos from
  the YouTube Data API. One button makes a valid request, and the other makes an invalid request
  that always trigger an error response (due to an invalid API key). The service worker takes care
  of translating the error response into a valid fallback response, which is treated by the host
  page exactly like any other valid response.
</p>

<button id="valid-api-call" disabled>Make Valid Request</button>
<button id="invalid-api-call" disabled>Make Invalid Request</button>
{% endcapture %}
{% include output_helper.html initial_output_content=initial_output_content %}

{% include js_snippet.html filename='index.js' title="This Page's JavaScript" %}
{% include js_snippet.html filename='service-worker.js' displayonly=true title="Service Worker's JavaScript" %}