{"id":16485328,"url":"https://github.com/morganconrad/serviceworkers","last_synced_at":"2025-08-08T01:05:00.894Z","repository":{"id":71410017,"uuid":"108932580","full_name":"MorganConrad/serviceworkers","owner":"MorganConrad","description":"Experiments in Service Workers","archived":false,"fork":false,"pushed_at":"2017-12-11T19:09:31.000Z","size":53,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-01T00:11:45.955Z","etag":null,"topics":["javascript","serviceworker","serviceworkers"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MorganConrad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-31T02:11:13.000Z","updated_at":"2018-05-17T09:49:24.000Z","dependencies_parsed_at":"2023-03-17T11:15:30.620Z","dependency_job_id":null,"html_url":"https://github.com/MorganConrad/serviceworkers","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MorganConrad/serviceworkers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2Fserviceworkers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2Fserviceworkers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2Fserviceworkers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2Fserviceworkers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MorganConrad","download_url":"https://codeload.github.com/MorganConrad/serviceworkers/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2Fserviceworkers/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269348099,"owners_count":24401885,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","serviceworker","serviceworkers"],"created_at":"2024-10-11T13:25:28.245Z","updated_at":"2025-08-08T01:05:00.853Z","avatar_url":"https://github.com/MorganConrad.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![License](http://img.shields.io/badge/license-MIT-A31F34.svg)](https://github.com/MorganConrad/serviceworkers)\n\n# Exercises in Service Workers\n\n## How to run these\n\nThe **best way** to go through the exercises is to serve each folder on your localhost. That way you can modify the code as you wish.\nIf you have a web server already installed, such as Apache or Nginx, use them.\n\nIf not, a simple node.js based server that I use a lot for testing is [http-server](https://www.npmjs.com/package/http-server).\n\n`npm install http-server -g`\n\nTo run, use the provided serve.bat or serve.sh scripts, or, from the command line, `http-server [path] [options]`\n\nAlternatively, you can browse these pages on GitHub Pages.  Though you won't be able to change the code.\nThe URL will be https://morganconrad.github.io/serviceworkers/{exercise folder}/www/index.html\n\n## 01_multipleSWs: Hook up multiple service workers.  \n\nThis shows how you can setup separate service workers per folder.  It installs one service worker for\n - index.html\n - help.html   (note - also in /)\n - blog/\n - users/\n\nIn the console, you will see the workers get registered, then log messages when they get called for a fetch.\n\nDifferent Service Workers _per folder_ is a reasonable idea: Blog vs. images. vs CSS, or security\n\nBecause two different workers (SW_01.js and SW_01_help.js) try to control the root directory, they swap back and forth.  \n - This is probably a bug in real code.\n - In the Developer Console, note how they are waiting on each other...\n - In all the other exercises, only a single service worker gets registered, at the root level.\n\n[Open on GitHub Pages](http://morganconrad.github.io/serviceworkers/01_multipleSWs/www/index.html)\n\n\n## 02_multipleListeners: Attach multiple listeners to the fetch event\n\nOne listener, named `doNothing()`, just logs.  Since it doesn't call `event.respondTo()`, processing continues.\n\nThe second listener, `realHandler()`, responds by calling the normal fetch method, ending the listener chain.\n\nTry swapping the order, putting `realHandler` first, and see if `doNothing` still gets called.\n\nIn a \"real\" example, one listener might handle HTML, another CSS, etc...\n\n[Open on GitHub Pages](http://morganconrad.github.io/serviceworkers/02_multipleListeners/www/index.html)\n\n\n\n## 03_fetch: A vaguely realistic fetch listener\n\nThis example responds with either cached results (`cacheFirstThenNetwork()`), or responses from the network (`networkFirstThenCache()`).\nEdit the code and see what happens.  Note that more.html is deliberately left out of the initial cache, so it will always require one network call.\n\n[Open on GitHub Pages](http://morganconrad.github.io/serviceworkers/03_fetch/www/index.html)\n\n\n\n## 04_templating: More fun stuff to do with Fetch - Templating\n\nIllustrates how you could modify the response.  For example, fetching some JSON data to use in a template engine like Handlebars.\n\n[Open on GitHub Pages](http://morganconrad.github.io/serviceworkers/04_templating/www/index.html)\n\n\n\n\n## More Interesting \"Fetch\" Use Cases of Service Workers\n\n - Use user's location to switch to a geographically closer server.\n - Load Balancing\n - Analytics\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorganconrad%2Fserviceworkers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorganconrad%2Fserviceworkers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorganconrad%2Fserviceworkers/lists"}