Syntax - Tasty Web Development Treats

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

Jun 17, 2024

31:07

Snipd AI

Scott and Wes explore browser caching for audio files, discussing the File System API and Cache API. They cover size restrictions, tools like Riverside.fm using IndexedDB, creating and managing cached audio data in code. Also, they touch on persistent storage, media score, and autoplay policies.

AI Summary

AI Chapters

Episode notes

Podcast summary created with Snipd AI

Quick takeaways

Utilizing Cache API for offline saving in browsers beyond service workers.

Exploring browser storage capabilities for data and browser eviction policies based on disk space constraints.

Deep dives

Overview of Cache API Exploration

The podcast delves into the utilization of the Cache API beyond service workers, showcasing its role in storing data locally in browsers. The hosts discuss using the Cache API to create a Netflix-like offline saving feature for podcast episodes on their website, highlighting the simplicity and flexibility of this approach.

Intro

5min

Exploring Various Data Storage Mechanisms in Browsers

15min

Troubleshooting Technical Challenges and Improving Offline Listening Feature

2min

Exploring Persistent Storage and Data Eviction in Browsers

2min

Autoplay Video on Websites

7min

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.