Add WIP Media Session API updates article #4057

beaufortfrancois · 2017-01-18T14:14:05Z

This PR is still WIP and is used to get feedback from engineers.

WDYT @mounirlamouri @xxyzzzq?

xxyzzzq

Looks great! I only found some minor issues.

In the image:

The second MediaImage has no "{".
Action handlers currently take no arguments.
Disable spell check when making the final version?

xxyzzzq · 2017-01-18T14:46:04Z

src/content/en/updates/2017/02/media-session.md

+    }
+
+    function getNetworkArtwork(request) {
+       // Fetch network artwork.


nit: indent 2 spaces

No, this is fine as is.

It looks like this is a 3-space indent and the other functions have a 2-space indent.

petele · 2017-01-18T15:05:25Z

src/content/en/updates/2017/02/media-session.md

+
+{# wf_updated_on: 2017-02-06 #}
+{# wf_published_on: 2017-02-06 #}
+{# wf_tags: news,mediasession,play,pause #}


Build Errors for uncommon tags. You can add these tags in src/data/commonTags.json. Be sure to review the file first to make sure you're not creating similar tags.

src/content/en/updates/2017/02/media-session.md Uncommon tag (mediasession) found.

src/content/en/updates/2017/02/media-session.md Uncommon tag (pause) found.

I didn't know this file! Thank you ;)
Fixed.

petele · 2017-01-18T15:05:55Z

src/content/en/updates/2017/02/media-session.md

+{# wf_updated_on: 2017-02-06 #}
+{# wf_published_on: 2017-02-06 #}
+{# wf_tags: news,mediasession,play,pause #}
+{# wf_featured_image: /web/updates/images/2017/02/featured.png #}


Build Error:

src/content/en/updates/2017/02/media-session.md WF Tag wf_featured_image found, but couldn't find image - /web/updates/images/2017/02/featured.png

petele · 2017-01-18T15:08:19Z

src/content/en/updates/2017/02/media-session.md

+{# wf_published_on: 2017-02-06 #}
+{# wf_tags: news,mediasession,play,pause #}
+{# wf_featured_image: /web/updates/images/2017/02/featured.png #}
+


I strongly encourage also including a {# wf_featured_snippet: blah blah blah #}.

The featured snipped is used on the index pages as the primary description. It CAN include HTML and is your "hook" to get someone to read your article. The description at the top of the document is used as the meta description and is only used as the primary description if wf_featured_snippet isn't provided.

Noted. Thanks!

petele · 2017-01-18T15:09:10Z

src/content/en/updates/2017/02/media-session.md

+
+{# wf_updated_on: 2017-02-06 #}
+{# wf_published_on: 2017-02-06 #}
+{# wf_tags: news,mediasession,play,pause #}


Also add chrome57 to the list of tags.

petele · 2017-01-18T15:10:38Z

src/content/en/updates/2017/02/media-session.md

+If you don't want to play audio right after the first interaction, I recommend
+you use the `load()` method of the audio element.
+
+<pre class="prettyprint">


Instead of wrapping in pretty print, the preferred method is to indent four spaces. I think this works, but there may also be some weirdness around it if I remember right.

In this particular code sample, I'm using <strong>audio.load()</strong> which is not parsed correctly when using four spaces indentation. If there's a way to get it without prettyprint, I'm all for it ;)

petele · 2017-01-18T15:11:18Z

src/content/en/updates/2017/02/media-session.md

+<div class="clearfix"></div>
+<div class="attempt-left">
+  <figure>
+    <img src="https://placehold.it/350x350?text=With no Media Session" alt="TODO">


alt="TODO"

petele · 2017-01-18T15:11:29Z

src/content/en/updates/2017/02/media-session.md

+</div>
+<div class="attempt-right">
+  <figure>
+    <img src="https://placehold.it/350x350?text=With Media Session" alt="TODO">


alt="TODO"

petele · 2017-01-18T15:12:03Z

src/content/en/updates/2017/02/media-session.md

+<div class="clearfix"></div>
+<div class="attempt-left">
+  <figure>
+    <img src="https://placehold.it/350x350?text=Lock screen" alt="TODO">


alt="TODO"

petele · 2017-01-18T15:12:08Z

src/content/en/updates/2017/02/media-session.md

+</div>
+<div class="attempt-right">
+  <figure>
+    <img src="https://placehold.it/350x350?text=Wear notification" alt="TODO">


alt="TODO"

petele · 2017-01-18T15:12:45Z

src/content/en/updates/2017/02/media-session.md

+    }
+
+    function getNetworkArtwork(request) {
+       // Fetch network artwork.


No, this is fine as is.

mounirlamouri · 2017-01-19T10:00:45Z

src/content/en/updates/2017/02/media-session.md

+
+As you may know, `autoplay` is disabled on Chrome for Android which
+means we have to use the `play()` method of the audio element there. This
+method must be triggered by [a user gesture] such as a touch or a mouse click.


What does [ ] do here?

It automagically adds URLs when they're defined at the very bottom of the file.

mounirlamouri · 2017-01-19T10:01:17Z

src/content/en/updates/2017/02/media-session.md

+events. In other words, the user must click on a button before your web app can
+actually make some noise.
+
+    playButton.addEventListener('pointerup', function(event) {


Why not 'click'?

pointerup is what we promote nowadays.

mounirlamouri · 2017-01-19T10:01:55Z

src/content/en/updates/2017/02/media-session.md

+events. In other words, the user must click on a button before your web app can
+actually make some noise.
+
+    playButton.addEventListener('pointerup', function(event) {


s/function (event)/e =>/ ?

I tend to use arrow function for non addEventListener stuff as it creates confusion when it's not needed.

mounirlamouri · 2017-01-19T10:02:34Z

src/content/en/updates/2017/02/media-session.md

+
+let audio = document.querySelector('audio');
+
+welcomeButton.addEventListener('pointerup', function(event) {


same answer.

mounirlamouri · 2017-01-19T10:03:40Z

src/content/en/updates/2017/02/media-session.md

+    });
+
+If you don't want to play audio right after the first interaction, I recommend
+you use the `load()` method of the audio element.


You can explain that the reason is that Blink will keep track of whether the user interacted with the element in some ways and load() is one of them. It will also help the playback be more smooth because the content will be loaded.

Thanks! Explanation added.

mounirlamouri · 2017-01-19T10:10:30Z

src/content/en/updates/2017/02/media-session.md

+## Implementation nits
+
+- Chrome Media notifications show only if media files duration is [at least 5 seconds].
+- Muted media files won't trigger Chrome media notifications.


That's not entirely true. <video autoplay muted> will not. Anything else muted will. Even the former case will if it gets unmuted then re-muted.

In that case, I'll remove this nit.

mounirlamouri · 2017-01-19T10:11:14Z

src/content/en/updates/2017/02/media-session.md

+
+- Chrome Media notifications show only if media files duration is [at least 5 seconds].
+- Muted media files won't trigger Chrome media notifications.
+- Media notifications use the favicon if no artworks are defined.


I would rephrase:
- If no artwork is define and there is a favicon at a desirable size, media notifications will use it.

FYI, the full logic is:
If no artwork is defined, no suitable image is available, or image download failed, media notification will fallback to a favicon at a desirable size if available.

@xxyzzzq If image download failed, it doesn't always fallback to favicon right?

We fallback to favicon in this case. If not then it should be a bug :)

mounirlamouri · 2017-01-19T10:11:28Z

src/content/en/updates/2017/02/media-session.md

+
+- Chrome Media notifications show only if media files duration is [at least 5 seconds].
+- Muted media files won't trigger Chrome media notifications.
+- Media notifications use the favicon if no artworks are defined.


You might also want to check your "artwork" vs "artworks".

Oh you're right! Sorry for that ;)

mounirlamouri · 2017-01-19T10:12:44Z

src/content/en/updates/2017/02/media-session.md

+  [low-end devices], it is `256x256`.
+- Dismiss media notifications with `audio.src = ''`.
+- Hook up an `<audio>` element as the input source to the [Web Audio API] makes
+  it work with the Media Session API.


Should you have a short paragraph/section about audio focus? This might sound weird but if we were to explain that Media Session API only applies when Chrome will take audio focus could help some readers understand more deeply what's happening.

@mounirlamouri Do you mind sharing an abstract?

mounirlamouri · 2017-01-19T10:13:00Z

src/content/en/updates/2017/02/media-session.md

+
+At the time of writing, Chrome for Android is the only platform that supports
+the Media Session API. More up-to-date information on browser implementation
+status can be found on [chromestatus.com].


Exact link to the entry maybe?

It is available at the very bottom of the page.

I agree this should be a link to the exact entry.

beaufortfrancois · 2017-01-19T11:52:51Z

@xxyzzzq The hero image was still WIP as well. Next patch will include the "final" one.

beaufortfrancois · 2017-01-19T14:32:05Z

I've just addressed @petele @xxyzzzq and @mounirlamouri feedback in bd09396

beaufortfrancois · 2017-01-19T14:38:18Z

@jakearchibald Do you mind having a look at this Media Session article? I'd love to get your feedback on the Service Worker / Cache part.

jakearchibald · 2017-01-19T17:02:59Z

Does the developer have to do anything to release the session once playback is done?

jakearchibald · 2017-01-19T16:19:23Z

src/content/en/updates/2017/02/media-session.md

+With the brand new [Media Session API], you can now **customize media
+notifications** by providing metadata information such as the title, artist,
+album name, and artwork of the media (audio or video) your web app is playing
+in Chrome 57 (beta in February 2017, stable in March 2017). It also


This is a pretty long first sentence with a lot of commas and parenthesis. I'd lose "such as the title, artist,
+album name, and artwork" and maybe "(audio or video)" too.

You can cover the details later in the article. In fact, the image below covers a lot of the details really well.

jakearchibald · 2017-01-19T16:26:54Z

src/content/en/updates/2017/02/media-session.md

+## Gimme What I Want
+
+You already know all about the Media Session API and are simply coming back to
+copy and paste with no shame some boilerplate code? So here it is.


This is a great idea.

jakearchibald · 2017-01-19T16:27:45Z

src/content/en/updates/2017/02/media-session.md

+      <source src="audio.ogg" type="audio/ogg"/>
+    </audio>
+
+Note: I could have used a `<video>` tag as well there to showcase the Media


As well, or instead?

jakearchibald · 2017-01-19T16:28:56Z

src/content/en/updates/2017/02/media-session.md

+Note: I could have used a `<video>` tag as well there to showcase the Media
+Session API.
+
+As you may know, `autoplay` is disabled on Chrome for Android which


It work for some types of media doesn't it? Dunno if that's worth clarifying.

I've added for audio elements. Thanks!

jakearchibald · 2017-01-19T16:29:06Z

src/content/en/updates/2017/02/media-session.md

+Session API.
+
+As you may know, `autoplay` is disabled on Chrome for Android which
+means we have to use the `play()` method of the audio element there. This


"there" where?

jakearchibald · 2017-01-19T16:49:36Z

src/content/en/updates/2017/02/media-session.md

+      playAudio();
+    });
+
+The Media Session API allows you as well to show "Seek Backward" and "Seek


nit: Remove "as well"

It's kinda suggested here, but is it worth being explicit that these buttons won't be shown unless you add a handler?

jakearchibald · 2017-01-19T16:56:55Z

src/content/en/updates/2017/02/media-session.md

+    .then(cache => cache.matchAll())
+    .then(responses => Promise.all(responses.map(r => r.blob())))
+    .then(blobs => blobs.map(blob => blob.size).reduce((acc, cur) => acc + cur, 0))
+    .then(cacheSize => { console.log('Artworks cache is ' + cacheSize + ' bytes.'); })


This is going to bring all the artworks into memory. Alternatively you could add up the content-length headers, and make estimates where this header is missing.

Here's the code below I've used to add up content-length headers. It gives me different results than using blob.size()...

caches.open('artworks-cache-v1') .then(cache => cache.matchAll()) .then(responses => { let cacheSize = 0; let queue = Promise.resolve(); responses.forEach(response => { let responseSize = response.headers.get('content-length'); if (responseSize) { queue = queue.then(_ => cacheSize += Number(responseSize)); } else { queue = queue.then(_ => response.blob()) .then(blob => cacheSize += blob.size); } }); return queue.then(_ => { console.log('Artworks cache is ' + cacheSize + ' Bytes.'); }); }) .catch(error => { console.log(error); });

@jakearchibald What do you think of using this code?

caches.open('artworks-cache-v1') .then(cache => cache.matchAll()) .then(responses => { let cacheSize = 0; let queue = Promise.resolve(); responses.forEach(response => { queue = queue.then(_ => response.blob()) .then(blob => { cacheSize += blob.size; blob.close(); }); }); return queue.then(_ => { console.log('Artworks cache is ' + cacheSize + ' Bytes.'); }); }) .catch(error => { console.log(error); });

nvm https://github.com/google/WebFundamentals/pull/4057/files/dce240d58480a124e1817e80ecefdaa3612f68b9#r97076285 is "correct". I'll use this!

And here's w3c/ServiceWorker#1059

jakearchibald · 2017-01-19T16:58:48Z

src/content/en/updates/2017/02/media-session.md

+
+At the time of writing, Chrome for Android is the only platform that supports
+the Media Session API. More up-to-date information on browser implementation
+status can be found on [chromestatus.com].


I agree this should be a link to the exact entry.

jakearchibald · 2017-01-19T16:59:19Z

src/content/en/updates/2017/02/media-session.md

+
+## Samples & Demos
+
+Check out our official [Media Session Chrome samples].


Broken link

The media session sample has not been reviewed yet.

jakearchibald · 2017-01-19T17:00:30Z

src/content/en/updates/2017/02/media-session.md

+album name, and artwork of the media (audio or video) your web app is playing
+in Chrome 57 (beta in February 2017, stable in March 2017). It also
+allows you to **handle media related events** such as seeking or track
+changing which may come from notifications or media keys.


Maybe link to a demo here? As in, show it working, then go on to explain how it works.

jakearchibald · 2017-01-19T17:03:45Z

Really enjoyed this article!

jakearchibald · 2017-01-19T17:07:33Z

However, dare I say it… is the service worker stuff a little off-topic? (didn't want to say this, because, of course I want everything to be about service worker)

beaufortfrancois · 2017-01-20T12:19:09Z

Thanks for reviewing @jakearchibald.
I've addressed all your feedback ~~except for the blob's one yet as I'd like to find a way to not rely on content-length.~~

Re: Service Worker, I think the offline story needs to be told "there". It makes sense especially when you play with the Media Session API on a lie-fi connection.

beaufortfrancois · 2017-01-20T13:40:15Z

@petele Is there a staging server for PRs where we can tell people to look at?

beaufortfrancois · 2017-01-20T19:08:02Z

@jpmedley It is not yet finalized but I think it is in a "good shape" for you to have a look. Thank you.

petele · 2017-01-24T14:49:57Z

@beaufortfrancois - sadly no staging server for folks to look at right now. :(

samdutton · 2017-01-25T14:10:52Z

src/content/en/updates/2017/02/media-session.md

+{% include "web/_shared/contributors/beaufortfrancois.html" %}
+
+With the brand new [Media Session API], you can now **customize media
+notifications** by providing metadata information of the media your web app is


Nit: I think this should be 'for the media' not 'of the media'.

samdutton · 2017-01-25T14:12:15Z

src/content/en/updates/2017/02/media-session.md

+
+With the brand new [Media Session API], you can now **customize media
+notifications** by providing metadata information of the media your web app is
+playing in Chrome 57 (beta in February 2017, stable in March 2017). It also


I think you should probably add a full stop after 'playing' and then start a new sentence with 'MediaSession is supported in Chrome 57 ...'

I've added a full stop and moved the "supported" sentence. WDYT?

samdutton · 2017-01-25T14:16:26Z

src/content/en/updates/2017/02/media-session.md

+      <source src="audio.ogg" type="audio/ogg"/>
+    </audio>
+
+Note: I could have used a `<video>` tag instead to showcase the Media Session


Nit: `the MediaSession API.'

It is actually the "Media Session API", not "MediaSession API" according to https://wicg.github.io/mediasession/

samdutton · 2017-01-25T14:18:24Z

src/content/en/updates/2017/02/media-session.md

+
+### Let's play 🎷
+
+Add a simple `<audio>` tag to your web page and assign several media sources so


Nit: should probably say '<audio> element' and '<video> element'.

Thanks! Done.

samdutton · 2017-01-25T14:29:50Z

src/content/en/updates/2017/02/media-session.md

+      // Do something more than just pausing current audio...
+    });
+
+Note: As the browser may consider the web app is not be playing when media


'The browser may consider that the web app is not playing media when files are seeking or loading. You can override ...'

samdutton · 2017-01-25T14:29:59Z

src/content/en/updates/2017/02/media-session.md

+Note: As the browser may consider the web app is not be playing when media
+files are seeking or loading, you can override this behaviour by setting
+`navigator.mediaSession.playbackState` to `"playing"` or `"paused"`.  This
+comes handy when you want to make sure your web app UI stays in sync with the


'comes in handy'

samdutton · 2017-01-25T14:32:40Z

src/content/en/updates/2017/02/media-session.md

+### The Service Worker caching strategy
+
+Regarding media files, I would recommend a simple "[Cache, falling back to
+network]" strategy as illustrated by Jake Archibald.


Maybe 'as described by Jake Archibald', with a link.

[Cache, falling back to network] is already a link.

Ah — thanks.

samdutton · 2017-01-25T14:33:39Z

src/content/en/updates/2017/02/media-session.md

+Regarding media files, I would recommend a simple "[Cache, falling back to
+network]" strategy as illustrated by Jake Archibald.
+
+For artworks though, I'd be a little bit more specific and choose the approach


Nit: I think 'artwork' is better — 'artworks' sounds like works of art :).

Oops ;)
Done.

samdutton · 2017-01-25T14:35:04Z

src/content/en/updates/2017/02/media-session.md

+
+### Let user control cache
+
+As user will consume content from your web app, media files and artworks may


'As the user consumes content from your web app, media files and artwork may take a lot of space on their device.'

samdutton · 2017-01-25T14:35:27Z

src/content/en/updates/2017/02/media-session.md

+## Implementation nits
+
+- Chrome for Android requests "full" audio focus to show media notifications
+  only when media files duration is [at least 5 seconds].


'media file duration'

samdutton · 2017-01-25T14:36:31Z

src/content/en/updates/2017/02/media-session.md

+
+- Chrome for Android requests "full" audio focus to show media notifications
+  only when media files duration is [at least 5 seconds].
+- If no artwork is defined and there is a favicon at a desirable size, media


Do you really mean favicon (i.e. like https://simpl.info/favicon.ico)?

icon image will be ;)

beaufortfrancois · 2017-01-25T15:07:08Z

@samdutton I've addressed all your feedback. Thanks again!

jpmedley · 2017-01-26T15:37:26Z

@beaufortfrancois Just after you asked me to edit was when Sam put in all of his comments. I want to double-check. Are you expecting feedback from ANYONE else?

@jakearchibald I'll need you to review and approve your requested changes as well.

beaufortfrancois · 2017-01-27T09:36:43Z

As discussed offline, @jakearchibald is happy for it to launch as it.
Therefore, I'd love your final review @jpmedley.

jakearchibald · 2017-01-27T10:11:42Z

Yep! The article was great before I reviewed it. Any fixes are a bonus 😄

petele · 2017-01-27T16:11:07Z

@jakearchibald - can you please "approve" the changes in git so that I don't have to "dismiss" your review before I merge? :)

jpmedley · 2017-01-27T17:33:59Z

src/content/en/updates/2017/02/media-session.md

+    alt="Media Session TL;DR;"/>
+</figure>
+
+## Gimme What I Want


All titles level 2 and lower should be sentence case. Only the article title should be title case. Please change throughout.

jpmedley · 2017-01-27T17:43:27Z

src/content/en/updates/2017/02/media-session.md

+    });
+
+Note: If the `<audio>` element has the `controls` attribute, you can simply set
+up the Media Session in the audio `play` event listener instead which occurs


The rules are these:

When referring to the API proper, capitalize. Media Session API

When referring to a generic media session, do not capitalize. media session

When referring to an instance of the MediaSession interface, like this: mediaSession (or something similar)

When referring to the MediaSession interface itself, like this: MediaSession

Please verify throughout.

jpmedley · 2017-01-27T17:47:06Z

src/content/en/updates/2017/02/media-session.md

+is why you need to update it to make sure you're always showing relevant
+information in the media notification.
+
+#### Previous Track / Next Track


Sentence case.

jpmedley · 2017-01-27T17:50:12Z

src/content/en/updates/2017/02/media-session.md

+True but first and foremost, you want to make sure **all items in this
+checklist are checked**:
+
+1. All media and artwork files are served with the appropriate `Cache-Control`


Items that aren't required to be in a particular order should be bulleted, not numbered.

jpmedley · 2017-01-27T17:52:34Z

src/content/en/updates/2017/02/media-session.md

+`Allow-Control-Allow-Origin: *` HTTP header. This will allow third-party web
+apps to fetch and consume HTTP responses from your web server.
+
+### The Service Worker caching strategy


The term service worker is lower case unless referring to the 'Service Worker API'. See my rules for media source, above. Please check throughout.

jpmedley · 2017-01-27T17:52:58Z

src/content/en/updates/2017/02/media-session.md

+
+### The Service Worker caching strategy
+
+Regarding media files, I would recommend a simple "[Cache, falling back to


Delete the word 'would'.

jpmedley · 2017-01-27T17:57:05Z

src/content/en/updates/2017/02/media-session.md

+    .then(cache => Promise.all(artworkFilesToDelete.map(artwork => cache.delete(artwork))))
+    .catch(error => { console.log(error); });
+
+## Implementation nits


I think 'Implementation notes' would be a better title.

jpmedley · 2017-01-27T17:58:01Z

src/content/en/updates/2017/02/media-session.md

+
+- Chrome for Android requests "full" audio focus to show media notifications
+  only when media file duration is [at least 5 seconds].
+- If no artwork is defined and there is an icon image at a desirable size, media


Do you mean appropriate size?

…SessionArticle

beaufortfrancois · 2017-01-30T10:25:22Z

@jpmedley Thank you very much. I've addressed your valuable feedback at 460bfb3

beaufortfrancois · 2017-01-31T07:26:27Z

If @jpmedley is OK, @petele please merge and push live.

Add WIP Media Session API updates article

6f74628

beaufortfrancois added the DO NOT MERGE label Jan 18, 2017

xxyzzzq reviewed Jan 18, 2017

View reviewed changes

jpmedley added the needs-CopyEdit label Jan 18, 2017

petele suggested changes Jan 18, 2017

View reviewed changes

petele requested a review from jpmedley January 18, 2017 15:13

mounirlamouri reviewed Jan 19, 2017

View reviewed changes

googlebot added the cla: yes label Jan 19, 2017

Address @petele @xxyzzzq and @mounirlamouri feedback

bd09396

petele approved these changes Jan 19, 2017

View reviewed changes

petele requested a review from jakearchibald January 19, 2017 15:00

Add Play/Pause section

dce240d

jakearchibald suggested changes Jan 19, 2017

View reviewed changes

beaufortfrancois mentioned this pull request Jan 20, 2017

Add WIP Media Session sample GoogleChrome/samples#468

Merged

Address @jakearchibald feedback

8fc3720

beaufortfrancois force-pushed the mediaSessionArticle branch from 9ca1131 to 8fc3720 Compare January 20, 2017 15:08

samdutton reviewed Jan 25, 2017

View reviewed changes

Address @samdutton feedback

eaa390d

Add video showcasing official media session sample

94b91a5

jpmedley suggested changes Jan 27, 2017

View reviewed changes

beaufortfrancois and others added 2 commits January 30, 2017 10:47

Merge branch 'master' of github.com:google/WebFundamentals into media…

6105127

…SessionArticle

Copy edit.

ec154d8

beaufortfrancois force-pushed the mediaSessionArticle branch from 42a77c2 to ec154d8 Compare January 30, 2017 10:12

beaufortfrancois removed the needs-CopyEdit label Jan 30, 2017

Address @jpmedley feedback

de6ab6f

beaufortfrancois force-pushed the mediaSessionArticle branch from 460bfb3 to de6ab6f Compare January 30, 2017 10:44

Add photo attribution

db3fe29

jakearchibald approved these changes Jan 30, 2017

View reviewed changes

beaufortfrancois removed the DO NOT MERGE label Jan 31, 2017

jpmedley approved these changes Jan 31, 2017

View reviewed changes

petele merged commit 1c93aac into google:master Jan 31, 2017

beaufortfrancois deleted the mediaSessionArticle branch February 1, 2017 07:50

xxyzzzq mentioned this pull request Feb 1, 2017

Fix the images used in the Media Session API updates article #4118

Closed


		let audio = document.querySelector('audio');

		welcomeButton.addEventListener('pointerup', function(event) {


		## Samples & Demos

		Check out our official [Media Session Chrome samples].


		### Let's play 🎷

		Add a simple `<audio>` tag to your web page and assign several media sources so


		### Let user control cache

		As user will consume content from your web app, media files and artworks may


		### The Service Worker caching strategy

		Regarding media files, I would recommend a simple "[Cache, falling back to

Add WIP Media Session API updates article #4057

Add WIP Media Session API updates article #4057

Conversation

beaufortfrancois commented Jan 18, 2017

xxyzzzq left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beaufortfrancois Jan 19, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beaufortfrancois commented Jan 19, 2017

beaufortfrancois commented Jan 19, 2017

beaufortfrancois commented Jan 19, 2017

jakearchibald commented Jan 19, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beaufortfrancois Jan 20, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beaufortfrancois Jan 20, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beaufortfrancois Jan 19, 2017 •

edited

Loading

beaufortfrancois Jan 20, 2017 •

edited

Loading

beaufortfrancois Jan 20, 2017 •

edited

Loading