meta_pixel
Tapesearch Logo
Log in
Syntax - Tasty Web Development Treats

783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.91.2K Ratings

🗓️ 17 June 2024

⏱️ 31 minutes

🧾️ Download transcript

Summary

Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data. Show Notes 00:00 Welcome to Syntax! 02:07 Brought to you by Sentry.io. 02:33 The file system API. 03:08 The Cache API. Mozilla Developer Cache API. Airhorner, a good example. 04:24 Size restrictions per browser. 07:04 How tools like Riverside.fm use IndexedDB. 08:47 Data eviction (too much data). 10:16 What we’re using it for and how. 12:17 How do we do this in code? 14:37 Creating the cache. 16:18 Retrieving from cache manually. 19:00 Adding metadata. 19:37 A live debugging. 22:39 Persistent storage. web.dev Persistent Storage. Hackernoon Persistent Storage. 26:10 Media score. Chrome Autoplay Policy. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Transcript

Click on a timestamp to play from that location

0:00.0

Welcome to Syntax on this Monday hasty treat.

0:04.6

We're going to be once again talking about the thing that we all hold so dearly.

0:09.8

In fact, we hold it for a long time.

0:12.0

Sometimes we hold it for days and days.

0:13.9

I'm talking about caching.

0:15.1

We're going to be talking about caching,

0:16.8

but not necessarily in the ways that we've talked about it before.

0:20.0

We're going to be talking about the cash API,

0:22.1

which many people think of as being part of service

0:24.2

workers.

0:25.2

But we're going to be talking about how we used it to build a Netflix style save for offline

0:29.8

for the application, for podcast episodes on our syntax site.

0:35.0

My name is Scott Tolinsky.

0:36.0

I'm a developer from Denver and with me as always is West Boss.

0:39.6

Hey, I am really excited about this because I did not realize that this was the

0:45.7

APA that you needed to to store stuff locally in the browser. I always thought it was

0:51.6

like file system APIs or or IndexedB, and turns out that there is a really nice

0:56.3

cash API that's not just service worker.

0:59.1

I've used it plenty of times in service workers, but not for storing data in the browser.

1:03.8

And I've always wondered myself, like I would love to be able to, for my courses, like

1:08.9

save them in the browser so people can watch them, but still get the whole streaming experience, you know. the level of tutorials was I guess I'm going to have to make an electron app right making a

1:24.8

desktop app and then therefore they could download the course and then have it be easily

...

Please login to see the full transcript.

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.

Copyright © Tapesearch 2026.