Merge remote-tracking branch 'swtest/gh-pages' into 146-chore-move-sw-test-into-dom-examples

Schalk Neethling · Schalk Neethling · commit 4300221fe76d · 2022-08-13T14:02:48.000+02:00
diff --git a/README.md b/README.md
@@ -55,4 +55,4 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 * The "web-workers" directory contains a simple web worker to demonstrate how [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) work. [View the demo live](https://mdn.github.io/dom-examples/web-workers/simple-web-worker/).
 
-* The ["webgl-examples"](webgl-examples/README.md) directory contains a number of WebGL examples that demonstrate the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), which is used for 2D and 3D graphics on the web.
+* The ["webgl-examples"](webgl-examples/README.md) directory contains a number of WebGL examples that demonstrate the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), which is used for 2D and 3D graphics on the web.
diff --git a/service-worker/simple-service-worker/.prettierrc b/service-worker/simple-service-worker/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/service-worker/simple-service-worker/CODE_OF_CONDUCT.md b/service-worker/simple-service-worker/CODE_OF_CONDUCT.md
@@ -0,0 +1,15 @@
+# Community Participation Guidelines
+
+This repository is governed by Mozilla's code of conduct and etiquette guidelines. 
+For more details, please read the
+[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 
+
+## How to Report
+For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page.
+
+<!--
+## Project Specific Etiquette
+
+In some cases, there will be additional project etiquette i.e.: (https://bugzilla.mozilla.org/page.cgi?id=etiquette.html).
+Please update for your project.
+-->
diff --git a/service-worker/simple-service-worker/LICENSE b/service-worker/simple-service-worker/LICENSE
@@ -0,0 +1,116 @@
+CC0 1.0 Universal
+
+Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer
+exclusive Copyright and Related Rights (defined below) upon the creator and
+subsequent owner(s) (each and all, an "owner") of an original work of
+authorship and/or a database (each, a "Work").
+
+Certain owners wish to permanently relinquish those rights to a Work for the
+purpose of contributing to a commons of creative, cultural and scientific
+works ("Commons") that the public can reliably and without fear of later
+claims of infringement build upon, modify, incorporate in other works, reuse
+and redistribute as freely as possible in any form whatsoever and for any
+purposes, including without limitation commercial purposes. These owners may
+contribute to the Commons to promote the ideal of a free culture and the
+further production of creative, cultural and scientific works, or to gain
+reputation or greater distribution for their Work in part through the use and
+efforts of others.
+
+For these and/or other purposes and motivations, and without any expectation
+of additional consideration or compensation, the person associating CC0 with a
+Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
+and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
+and publicly distribute the Work under its terms, with knowledge of his or her
+Copyright and Related Rights in the Work and the meaning and intended legal
+effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be
+protected by copyright and related or neighboring rights ("Copyright and
+Related Rights"). Copyright and Related Rights include, but are not limited
+to, the following:
+
+  i. the right to reproduce, adapt, distribute, perform, display, communicate,
+  and translate a Work;
+
+  ii. moral rights retained by the original author(s) and/or performer(s);
+
+  iii. publicity and privacy rights pertaining to a person's image or likeness
+  depicted in a Work;
+
+  iv. rights protecting against unfair competition in regards to a Work,
+  subject to the limitations in paragraph 4(a), below;
+
+  v. rights protecting the extraction, dissemination, use and reuse of data in
+  a Work;
+
+  vi. database rights (such as those arising under Directive 96/9/EC of the
+  European Parliament and of the Council of 11 March 1996 on the legal
+  protection of databases, and under any national implementation thereof,
+  including any amended or successor version of such directive); and
+
+  vii. other similar, equivalent or corresponding rights throughout the world
+  based on applicable law or treaty, and any national implementations thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention of,
+applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
+unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
+and Related Rights and associated claims and causes of action, whether now
+known or unknown (including existing as well as future claims and causes of
+action), in the Work (i) in all territories worldwide, (ii) for the maximum
+duration provided by applicable law or treaty (including future time
+extensions), (iii) in any current or future medium and for any number of
+copies, and (iv) for any purpose whatsoever, including without limitation
+commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
+the Waiver for the benefit of each member of the public at large and to the
+detriment of Affirmer's heirs and successors, fully intending that such Waiver
+shall not be subject to revocation, rescission, cancellation, termination, or
+any other legal or equitable action to disrupt the quiet enjoyment of the Work
+by the public as contemplated by Affirmer's express Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason be
+judged legally invalid or ineffective under applicable law, then the Waiver
+shall be preserved to the maximum extent permitted taking into account
+Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
+is so judged Affirmer hereby grants to each affected person a royalty-free,
+non transferable, non sublicensable, non exclusive, irrevocable and
+unconditional license to exercise Affirmer's Copyright and Related Rights in
+the Work (i) in all territories worldwide, (ii) for the maximum duration
+provided by applicable law or treaty (including future time extensions), (iii)
+in any current or future medium and for any number of copies, and (iv) for any
+purpose whatsoever, including without limitation commercial, advertising or
+promotional purposes (the "License"). The License shall be deemed effective as
+of the date CC0 was applied by Affirmer to the Work. Should any part of the
+License for any reason be judged legally invalid or ineffective under
+applicable law, such partial invalidity or ineffectiveness shall not
+invalidate the remainder of the License, and in such case Affirmer hereby
+affirms that he or she will not (i) exercise any of his or her remaining
+Copyright and Related Rights in the Work or (ii) assert any associated claims
+and causes of action with respect to the Work, in either case contrary to
+Affirmer's express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+
+  a. No trademark or patent rights held by Affirmer are waived, abandoned,
+  surrendered, licensed or otherwise affected by this document.
+
+  b. Affirmer offers the Work as-is and makes no representations or warranties
+  of any kind concerning the Work, express, implied, statutory or otherwise,
+  including without limitation warranties of title, merchantability, fitness
+  for a particular purpose, non infringement, or the absence of latent or
+  other defects, accuracy, or the present or absence of errors, whether or not
+  discoverable, all to the greatest extent permissible under applicable law.
+
+  c. Affirmer disclaims responsibility for clearing rights of other persons
+  that may apply to the Work or any use thereof, including without limitation
+  any person's Copyright and Related Rights in the Work. Further, Affirmer
+  disclaims responsibility for obtaining any necessary consents, permissions
+  or other rights required for any use of the Work.
+
+  d. Affirmer understands and acknowledges that Creative Commons is not a
+  party to this document and has no duty or obligation with respect to this
+  CC0 or use of the Work.
+
+For more information, please see
+<http://creativecommons.org/publicdomain/zero/1.0/>
diff --git a/service-worker/simple-service-worker/README.md b/service-worker/simple-service-worker/README.md
@@ -0,0 +1,17 @@
+# sw-test
+
+Service Worker test repository. This is a very simple demo to show basic service worker features in action. The demo can be seen on [our GitHub pages](https://mdn.github.io/sw-test/).
+
+You can find a lot more out about how this works by reading [Using Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers).
+In particular, read [Why is my service worker failing to register?](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Why_is_my_service_worker_failing_to_register)
+if you are having problems getting your code to do anything. You need to change the paths relative to where you are serving your files from!
+
+# Running locally
+
+To get this code. running locally on your computer as-is, you need to do the following:
+
+1. Clone the repo in a location on your machine.
+2. Start a local server running in the parent directory of the sw-test directory. For example, if you have Python on your machine you could start a server running on port 8001 using `python -m SimpleHTTPServer 8001` for Python 2.x, or `python3 -m http.server 8001` for Python 3.x.
+3. Navigate to the sw-test directory on the local server, e.g. [http://localhost:8001/sw-test/](http://localhost:8001/sw-test/)
+
+Note: The example has to be located under the sw-test directory (e.g. http://localhost:8001/sw-test/) and not at the root of the server (e.g. http://localhost:8001/) or anywhere else, for the service worker to work. It expects the document and associated assets it is controlling to be at this location.
diff --git a/service-worker/simple-service-worker/app.js b/service-worker/simple-service-worker/app.js
@@ -0,0 +1,56 @@
+import { Gallery } from './image-list.js';
+
+const registerServiceWorker = async () => {
+  if ('serviceWorker' in navigator) {
+    try {
+      const registration = await navigator.serviceWorker.register(
+        '/sw-test/sw.js',
+        {
+          scope: '/sw-test/',
+        }
+      );
+      if (registration.installing) {
+        console.log('Service worker installing');
+      } else if (registration.waiting) {
+        console.log('Service worker installed');
+      } else if (registration.active) {
+        console.log('Service worker active');
+      }
+    } catch (error) {
+      console.error(`Registration failed with ${error}`);
+    }
+  }
+};
+
+const imgSection = document.querySelector('section');
+
+const getImageBlob = async (url) => {
+  const imageResponse = await fetch(url);
+  if (!imageResponse.ok) {
+    throw new Error(
+      `Image didn't load successfully; error code: ${
+        imageResponse.statusText || imageResponse.status
+      }`
+    );
+  }
+  return imageResponse.blob();
+};
+
+const createGalleryFigure = async (galleryImage) => {
+  try {
+    const imageBlob = await getImageBlob(galleryImage.url);
+    const myImage = document.createElement('img');
+    const myCaption = document.createElement('caption');
+    const myFigure = document.createElement('figure');
+    myCaption.textContent = `${galleryImage.name}: Taken by ${galleryImage.credit}`;
+    myImage.src = window.URL.createObjectURL(imageBlob);
+    myImage.setAttribute('alt', galleryImage.alt);
+    myFigure.append(myImage, myCaption);
+    imgSection.append(myFigure);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+registerServiceWorker();
+Gallery.images.map(createGalleryFigure);
diff --git a/service-worker/simple-service-worker/gallery/bountyHunters.jpg b/service-worker/simple-service-worker/gallery/bountyHunters.jpg
diff --git a/service-worker/simple-service-worker/gallery/myLittleVader.jpg b/service-worker/simple-service-worker/gallery/myLittleVader.jpg
diff --git a/service-worker/simple-service-worker/gallery/snowTroopers.jpg b/service-worker/simple-service-worker/gallery/snowTroopers.jpg
diff --git a/service-worker/simple-service-worker/image-list.js b/service-worker/simple-service-worker/image-list.js
@@ -0,0 +1,29 @@
+export const Path = 'gallery/';
+
+export const Gallery = {
+  images: [
+    {
+      name: 'Darth Vader',
+      alt: 'A Black Clad warrior lego toy',
+      url: 'gallery/myLittleVader.jpg',
+      credit:
+        '<a href="https://www.flickr.com/photos/legofenris/">legOfenris</a>, published under a <a href="https://creativecommons.org/licenses/by-nc-nd/2.0/">Attribution-NonCommercial-NoDerivs 2.0 Generic</a> license.',
+    },
+
+    {
+      name: 'Snow Troopers',
+      alt: 'Two lego solders in white outfits walking across an icy plain',
+      url: 'gallery/snowTroopers.jpg',
+      credit:
+        '<a href="https://www.flickr.com/photos/legofenris/">legOfenris</a>, published under a <a href="https://creativecommons.org/licenses/by-nc-nd/2.0/">Attribution-NonCommercial-NoDerivs 2.0 Generic</a> license.',
+    },
+
+    {
+      name: 'Bounty Hunters',
+      alt: 'A group of bounty hunters meeting, aliens and humans in costumes.',
+      url: 'gallery/bountyHunters.jpg',
+      credit:
+        '<a href="https://www.flickr.com/photos/legofenris/">legOfenris</a>, published under a <a href="https://creativecommons.org/licenses/by-nc-nd/2.0/">Attribution-NonCommercial-NoDerivs 2.0 Generic</a> license.',
+    },
+  ],
+};
diff --git a/service-worker/simple-service-worker/index.html b/service-worker/simple-service-worker/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>Service worker demo</title>
+
+    <link rel="stylesheet" href="style.css" />
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <h1>Lego Star Wars gallery</h1>
+
+    <section></section>
+
+    <script type="module" src="app.js"></script>
+  </body>
+</html>
diff --git a/service-worker/simple-service-worker/star-wars-logo.jpg b/service-worker/simple-service-worker/star-wars-logo.jpg
diff --git a/service-worker/simple-service-worker/style.css b/service-worker/simple-service-worker/style.css
@@ -0,0 +1,41 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 10px;
+  font-family: sans-serif;
+}
+
+h1 {
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 197px;
+  background: url(star-wars-logo.jpg) no-repeat center;
+}
+
+section {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+figure {
+  width: 100%;
+  margin: 0;
+}
+
+img {
+  width: 100%;
+  box-shadow: 2px 2px 1px black;
+}
+
+caption {
+  display: block;
+  margin: 0 auto 1rem;
+  width: 70%;
+  font-size: 1.2rem;
+  line-height: 1.5;
+  padding: 5px;
+  background: #ccc;
+  box-shadow: 1px 1px 1px black;
+}
diff --git a/service-worker/simple-service-worker/sw.js b/service-worker/simple-service-worker/sw.js
@@ -0,0 +1,84 @@
+const addResourcesToCache = async (resources) => {
+  const cache = await caches.open('v1');
+  await cache.addAll(resources);
+};
+
+const putInCache = async (request, response) => {
+  const cache = await caches.open('v1');
+  await cache.put(request, response);
+};
+
+const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => {
+  // First try to get the resource from the cache
+  const responseFromCache = await caches.match(request);
+  if (responseFromCache) {
+    return responseFromCache;
+  }
+
+  // Next try to use the preloaded response, if it's there
+  const preloadResponse = await preloadResponsePromise;
+  if (preloadResponse) {
+    console.info('using preload response', preloadResponse);
+    putInCache(request, preloadResponse.clone());
+    return preloadResponse;
+  }
+
+  // Next try to get the resource from the network
+  try {
+    const responseFromNetwork = await fetch(request);
+    // response may be used only once
+    // we need to save clone to put one copy in cache
+    // and serve second one
+    putInCache(request, responseFromNetwork.clone());
+    return responseFromNetwork;
+  } catch (error) {
+    const fallbackResponse = await caches.match(fallbackUrl);
+    if (fallbackResponse) {
+      return fallbackResponse;
+    }
+    // when even the fallback response is not available,
+    // there is nothing we can do, but we must always
+    // return a Response object
+    return new Response('Network error happened', {
+      status: 408,
+      headers: { 'Content-Type': 'text/plain' },
+    });
+  }
+};
+
+const enableNavigationPreload = async () => {
+  if (self.registration.navigationPreload) {
+    // Enable navigation preloads!
+    await self.registration.navigationPreload.enable();
+  }
+};
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(enableNavigationPreload());
+});
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    addResourcesToCache([
+      '/sw-test/',
+      '/sw-test/index.html',
+      '/sw-test/style.css',
+      '/sw-test/app.js',
+      '/sw-test/image-list.js',
+      '/sw-test/star-wars-logo.jpg',
+      '/sw-test/gallery/bountyHunters.jpg',
+      '/sw-test/gallery/myLittleVader.jpg',
+      '/sw-test/gallery/snowTroopers.jpg',
+    ])
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    cacheFirst({
+      request: event.request,
+      preloadResponsePromise: event.preloadResponse,
+      fallbackUrl: '/sw-test/gallery/myLittleVader.jpg',
+    })
+  );
+});

Original file line number	Diff line number	Diff line change
`@@ -55,4 +55,4 @@ Code examples that accompany various MDN DOM and Web API documentation pages.`
`55`	`55`
`56`	`56`	`* The "web-workers" directory contains a simple web worker to demonstrate how [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) work. [View the demo live](https://mdn.github.io/dom-examples/web-workers/simple-web-worker/).`
`57`	`57`
`58`		`-* The ["webgl-examples"](webgl-examples/README.md) directory contains a number of WebGL examples that demonstrate the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), which is used for 2D and 3D graphics on the web.`
	`58`	`+* The ["webgl-examples"](webgl-examples/README.md) directory contains a number of WebGL examples that demonstrate the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), which is used for 2D and 3D graphics on the web.`