Confirmed users
61
edits
MDN/Get involved/Events/HackOnMDN/Project: Service Workers: Difference between revisions
MDN/Get involved/Events/HackOnMDN/Project: Service Workers (view source)
Revision as of 01:18, 22 June 2015
, 22 June 2015MessagePort API note added (landed in Firefox 41)
(Moved docs from etherpad/wiki-sandbox to the main wiki, added timestamp note) |
(MessagePort API note added (landed in Firefox 41)) |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 57: | Line 57: | ||
* Implement versioning for segments, so Service Workers could keep the offline caches up-to-date | * Implement versioning for segments, so Service Workers could keep the offline caches up-to-date | ||
* Define guidelines for external/dynamic content caching & replacement (embedded videos, iframes, jsfiddles/jsbins etc) | * Define guidelines for external/dynamic content caching & replacement (embedded videos, iframes, jsfiddles/jsbins etc) | ||
==Plans for HackOnMDN 2015 weekend== | ==Plans for HackOnMDN 2015 weekend== | ||
* Prototype a proof-of-concept page, either live on a staging area or just a static demo | * Prototype a proof-of-concept page, either live on a staging area or just a static demo | ||
* Demonstrate the proof-of-concept (possibly both on desktop AND mobile) | * Demonstrate the proof-of-concept (possibly both on desktop AND mobile) | ||
==Ongoing work== | ==Ongoing work== | ||
| Line 84: | Line 82: | ||
Once preliminary API work is done, a preview of the functionality should be hidden behind a waffle-flag and deployed on the staging server. Due to the staging server having a valid SSL certificate, above command line flags would be unnecessary, and testing would be available on all standard Chrome installs (desktop & mobile). For expected Firefox & FirefoxOS support see notes below. | Once preliminary API work is done, a preview of the functionality should be hidden behind a waffle-flag and deployed on the staging server. Due to the staging server having a valid SSL certificate, above command line flags would be unnecessary, and testing would be available on all standard Chrome installs (desktop & mobile). For expected Firefox & FirefoxOS support see notes below. | ||
==Implementation timeline/proposed stages== | |||
===First stage: basic functionality=== | |||
First and foremost, have Service Workers up & running. Have a basic service workers script that caches core page assets on install + all visited pages. This should result in performance improvements and basic offline capabilities. | |||
''Main goal: experiment with Service Workers, gather data, wait for the API & implementations to stabilize.'' | |||
'''TODO:''' | |||
* Generalize current proof-of-concept service worker code. | |||
* Generating service worker code on the server (include proper timestamps/cachebusting query parameters in asset URL list). | |||
* Crawl static assets' CSS files for referenced assets and include their URLs int the URL list. | |||
* Crawl current page for referenced assets and cache both the page & its linked assets (this could happen on the client side in JS) | |||
===Second stage: on-demand caching=== | |||
After basic implementation, implement on-demand caching: user could choose any number of "MDN segments" and cache the pages/assets for those segments. | |||
''Main goal: real useful offline capability for MDN.'' | |||
'''TODO:''' | |||
* Figure out how to split MDN content into "segments" | |||
** tags? (simple, linear taxonomy) | |||
** path? (multi-level, treelike structure) | |||
** other? | |||
* Add button to cache "whole current segment" for the currently visited page (ie: JavaScript reference segment on console.log() page) | |||
* Add an API to query page/asset URL list for the current segment (this is to avoid needlessly including the list on all the pages) | |||
* When the cache button is clicked, load the segment url-list asynchronously and pass it to the Service Worker | |||
* The Service Worker caches the URLs of the segment. | |||
** Note segment cache "versions" - keep track of changes to pages contained in a cacheable segment | |||
** Figure out update mechanism for cached segments (automatic? manual (update button)?) | |||
** Optionally implement an interface for managing cached segments (i.e. a checkboxed list of segments, to download and cache various segments of MDN at once) | |||
===Third stage: advanced functionality=== | |||
Offline editing, offline search and other functionality: anything that would be "nice-to-have" and that Service Workers could help accomplish. | |||
''Main goal: push Service Workers to the limit - have useful functionality that is also making good use of the power of the SW tech.'' | |||
'''Possibly implement:''' | |||
* Offline editing | |||
** Make offline editing possible, cache assets needed for the editor interface. | |||
** Make previewing possible (I am not familiar with Kumascript, but this could require reimplementing functionality in JS) | |||
** Store edits on the client side, replay them once connectivity is restored (+figure out how to deal with conflicts) | |||
* Offline search | |||
** Service Worker could take over search functionality, generating results by crawling documents in the cache | |||
* Any other useful feature (ideas welcome) | |||
=Notes, limitations, experiences from the weekend= | =Notes, limitations, experiences from the weekend= | ||
| Line 100: | Line 143: | ||
** On '''Chrome''' you could start Chrome with the '''--ignore-certificate-errors''' command-line parameter which will disable SSL certificate checks for the session. | ** On '''Chrome''' you could start Chrome with the '''--ignore-certificate-errors''' command-line parameter which will disable SSL certificate checks for the session. | ||
* Firefox Nightly (as of 03-28) seems to fail to register SW - [https://jakearchibald.github.io/trained-to-thrill/ https://jakearchibald.github.io/trained-to-thrill/] works in chrome as intended, while ''navigator.serviceWorker.controller''returns ''null'' on Nightly even after install, should be using Maple builds: [http://blog.wanderview.com/sw-builds/ http://blog.wanderview.com/sw-builds/] (download/install & use '''firefox -P -no-remote'''''to create a new profile and run it next to standard firefox)'' | * Firefox Nightly (as of 03-28) seems to fail to register SW - [https://jakearchibald.github.io/trained-to-thrill/ https://jakearchibald.github.io/trained-to-thrill/] works in chrome as intended, while ''navigator.serviceWorker.controller''returns ''null'' on Nightly even after install, should be using Maple builds: [http://blog.wanderview.com/sw-builds/ http://blog.wanderview.com/sw-builds/] (download/install & use '''firefox -P -no-remote'''''to create a new profile and run it next to standard firefox)'' | ||
** Later nightly builds like that of 04-10 and later seem to work, mostly obsolating the need for using SW-specific builds. | |||
* NOTE that '''Chrome''' (as of V43.0.2342.2 dev (64-bit)) '''does not support add/addAll''' methods out-of-the-box on opened cache objects - you will need a polyfill ([https://github.com/coonsta/cache-polyfill) https://github.com/coonsta/cache-polyfill)] to use it. Chrome bug for native addAll() support in blink-dev: [https://code.google.com/p/chromium/issues/detail?id=440298 https://code.google.com/p/chromium/issues/detail?id=440298] | * NOTE that '''Chrome''' (as of V43.0.2342.2 dev (64-bit)) '''does not support add/addAll''' methods out-of-the-box on opened cache objects - you will need a polyfill ([https://github.com/coonsta/cache-polyfill) https://github.com/coonsta/cache-polyfill)] to use it. Chrome bug for native addAll() support in blink-dev: [https://code.google.com/p/chromium/issues/detail?id=440298 https://code.google.com/p/chromium/issues/detail?id=440298] | ||
* NOTE Chrome's Service Worker communication samples ([https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker/post-message) https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker/post-message)] recommend using the MessagePort API for passing messages between the SW/page. Firefox does not really implement the API {{bug|952139}} - further info is required on implementation status or on how could this be overcome. | |||
* NOTE Chrome's Service Worker communication samples ([https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker/post-message) https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker/post-message)] recommend using the MessagePort API for passing messages between the SW/page. | |||
** <s>Firefox does not really implement the API {{bug|952139}} - further info is required on implementation status or on how could this be overcome.</s><br> MessagePort API has landed [https://bugzilla.mozilla.org/show_bug.cgi?id=911972 in Firefox 41] | |||
** As of the time of writing, even Chrome does not imlement the latest spec in this regard. More info on this on [https://github.com/slightlyoff/ServiceWorker/issues/662 GitHub] and linked [https://stackoverflow.com/questions/29230470/equivalent-of-sharedworker-port-in-serviceworker StackOverflow post]. | |||
* Docs changes: in [https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#The_premise_of_Service_Workers https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#The_premise_of_Service_Workers] | * Docs changes: in [https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#The_premise_of_Service_Workers https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#The_premise_of_Service_Workers] | ||
** '''Missing:''' [https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker/register https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker/register] - not even mentioned on the [https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker] page | ** '''Missing:''' [https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker/register https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker/register] - not even mentioned on the [https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker] page | ||
** | ** | ||
=ServiceWorkers - Developer QuickStart Reference= | =ServiceWorkers - Developer QuickStart Reference= | ||
* [https://docs.google.com/a/mozilla.hu/presentation/d/1LUuMYDi1ssmslQKnnX3cwrdLVy2YCqyww3PBtqEP0q8/mobilepresent Intro slides on Service Workers from jQUK] | * [https://docs.google.com/a/mozilla.hu/presentation/d/1LUuMYDi1ssmslQKnnX3cwrdLVy2YCqyww3PBtqEP0q8/mobilepresent Intro slides on Service Workers from jQUK] | ||
* [https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers Intro docs on MDN] | * [https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers Intro docs on MDN] | ||
* [https://www.youtube.com/watch?v=4uQMl7mFB6g Service Workers introduction by Jake Archibald (video)] | |||
* Articles on Service Workers | * Articles on Service Workers | ||
** [http://www.html5rocks.com/en/tutorials/service-worker/introduction/ HTML5Rocks Service Workers intro] | ** [http://www.html5rocks.com/en/tutorials/service-worker/introduction/ HTML5Rocks Service Workers intro] | ||
** [http://jakearchibald.com/2014/using-serviceworker-today/ Using the Service Worker in Chrome today] | |||
** [http://jakearchibald.com/2014/offline-cookbook/ Jake Archibald's Offline Cookbook] | ** [http://jakearchibald.com/2014/offline-cookbook/ Jake Archibald's Offline Cookbook] | ||
** [https://github.com/w3c-webmob/ServiceWorkersDemos Service Workers Demos] | ** [https://github.com/w3c-webmob/ServiceWorkersDemos Service Workers Demos] | ||
| Line 118: | Line 168: | ||
* Advanced topics | * Advanced topics | ||
** [https://gauntface.com/blog/2014/12/15/push-notifications-service-worker Service Workers push notifications] | ** [https://gauntface.com/blog/2014/12/15/push-notifications-service-worker Service Workers push notifications] | ||
** [http://jakearchibald.com/2015/thats-so-fetch/ | ** [http://jakearchibald.com/2015/thats-so-fetch/ Details on the Fetch API] | ||
** [https://www.igvita.com/2014/12/15/capability-reporting-with-service-worker/ Capability Reporting with Service Worker by Ilya Grigorik] | |||
* Debugging Service Workers | * Debugging Service Workers | ||
** In Chrome: [https://www.chromium.org/blink/serviceworker/service-worker-faq Chrome Service Worker FAQ] | ** '''In Chrome:''' | ||
*** [https://www.chromium.org/blink/serviceworker/service-worker-faq Chrome Service Worker FAQ] | |||
*** Use the <code>--ignore-certificate-errors</code> command line parameter to disable HTTPS cert. checks | |||
*** [https://code.google.com/p/chromium/issues/detail?id=441605 Ongoing discussion on lifting HTTPS requirement for developers.] Voiced our concerns in [https://code.google.com/p/chromium/issues/detail?id=441605#c19 comment #19]. | |||
** '''In Firefox:''' | |||
*** Worker debugging is coming soon: {{bug|1003097}} | |||
*** Use about:config → devtools.serviceWorkers.testing.enabled=true to skip HTTPS cert. checks | |||
* Track browser implementations: | * Track browser implementations: | ||
** [https://github.com/slightlyoff/ServiceWorker/ Service Worker spec repository] | |||
** [https://twitter.com/service_workers Service Worker News - digest with spec changes] | |||
** [https://jakearchibald.github.io/isserviceworkerready/ Service Workers ready yet? - track browser implementations] | |||
** Firefox: {{bug|1131322}} | ** Firefox: {{bug|1131322}} | ||
*** [https://blog.wanderview.com/blog/2015/03/24/service-workers-in-firefox-nightly/ available for testing in Nightly (Desktop, as of 2015-04-07] | |||
*** [https://bugzilla.mozilla.org/show_bug.cgi?id=1154900 preffed on since Nightly v40 (Desktop & Android, as of 2014-04-18] | |||
** Blink-dev: [https://code.google.com/p/chromium/issues/list?q=label%3ACr-Blink-ServiceWorker#=100&start=0] | ** Blink-dev: [https://code.google.com/p/chromium/issues/list?q=label%3ACr-Blink-ServiceWorker#=100&start=0] | ||
* Service Workers in Firefox OS (GAIA rearchitecture/3.0) | |||
** [https://wiki.mozilla.org/Gaia/Architecture_Proposal GAIA Rearchitecture Proposal] | |||
** [http://blog.timc.idv.tw/posts/service-worker-and-the-grand-re-architecture-proposal-of-firefox-os-gaia/ Rearchitecture proposal - Writeup by Tim Chien] | |||
** [https://wiki.mozilla.org/Gaia/Toolkit/Service_Worker New GAIA toolkit] | |||