Maximiliano Firtman
Independent Consultant
Course Description
Build faster websites and add offline capabilities using the latest web storage APIs! Go beyond localStorage to use newer and more performant APIs like IndexedDB for storing JSON, CacheStorage for caching requests, and the FileSystem API for accessing the local file system. Learn the "state of the world" for client-side storage, quotas, and persistence in every browser!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: February 23, 2023
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 23 minutes
Maximiliano Firtman introduces the course by providing some personal and professional background. An overview of the course material and prerequisites are also covered in this segment.
Maximiliano discusses the benefits of browser storage, including increasing user experience, improving performance, offline support, and storing multiple types of valuable data. An overview of how browser storage works and its limitations is also provided in this segment.
Maximiliano provides a brief overview of essential core concepts of browser storage, including origin, web client, device, and user. An origin is an internet domain composed of the protocol, host, and port.
APIs for Browser Data Storage
Section Duration: 52 minutes
Maximiliano discusses APIs for browser data storage, including cookies, web storage, WebSQL, application cache, IndexedDB, file and directories, cache storage, and FileSystem Access. A student's question regarding if IndexedDB is backwards compatible is also covered in this segment.
Maximiliano compares the type of content stored, key usage, grouping, and storage limits of the previously discussed data storage APIs.
Maximiliano discusses some of the fallbacks of Web Storage and offers replacement options. Web Storage's data persisting with localStorage and sessionStorage is also discussed in this segment.
Maximiliano demonstrates storage debugging tools, including Chrome, Firefox, and Safari dev tools. A student's question regarding how the quota for IndexedDB is decided is also covered in this segment.
Maximiliano discusses the properties of quotas and data persistence. There is one quota for all storages including the data from APIs service worker registrations and PWAs web app manifests.
Maximiliano demonstrates using an API to request permission or check the status of persistent storage in a browser. Firefox will ask the user and Chromium will grant or deny based on engagement with that origin among other criteria.
Web Storage
Section Duration: 28 minutes
Maximiliano walks through the contents of the course repository and the basic setup instructions.
Maximiliano live codes requesting persistence storage for the Coffee Masters application. The application immediately executes an async function that checks for persistence, and if not, it requests persistence. A student's question regarding why a false value may be returned while using Chrome is also covered in this segment.
Maximiliano demonstrates asking quota for information on storage estimates with an async function. The quotas are estimates and will never give exact numbers.
Maximiliano walks through using Web Storage to store a user's cart contents in local storage. When working with local storage, the data passing through must be converted into a string.
IndexedDB Storage
Section Duration: 56 minutes
Maximiliano provides an overview of the event-based, NoSQL data store, IndexedDB and libraries that can be used on top of it. When storing objects, IndexedDB clones them, and cloning happens synchronously.
Maximiliano demonstrates creating and accessing a database with IndexedDB and improving the process by adding the idb promise-based wrapper. This segment covers database opening, creating, and deleting, keys for data stores, and quick transactions.
Maximiliano walks through replacing the web storage implementation with IndexedDB. New versions of load and save are implemented in this segment.
Maximiliano discusses creating an index in IndexedDB and quick transactions from indexes. A practice exercise creating a database to make the menu available offline is also walked through in this segment.
Maximiliano walks through refactoring the current load function into a cache-first load. A student's question regarding if there is an e-tag variant of cache invalidation for IndexedDB is also covered in this segment.
Maximiliano walks through a network-first load function and compares it to the previously written cache-first load. Advanced IDB topics to look into are also discussed in this segment.
Cache Storage
Section Duration: 43 minutes
Maximiliano discusses an overview of cache storage, including creating caches under a name, storing HTTP responses, and storing them under an HTTP request key. Common scenarios and serving resources are also covered in this segment.
Maximiliano walks through implementing the Cache Storage API to store the product images. The images are stored client-side and, with persistent storage, will not have to be re-downloaded.
Maximiliano briefly overviews a service worker and demonstrates implementing the Service Worker API. If the service worker is implemented in the scripts folder, the service worker's scope will be restricted to that folder.
Maximiliano demonstrates caching the application's shell to allow the app to run offline. Cross platform resources can also be stored using the service worker.
Maximiliano demonstrates refactoring the fetch request to first attempt to serve files network-first and then default to cache-first loading if the application is offline. The developer is in complete control of how to cache and serve the resources of the PWA and manage API calls.
FileSystem Storage
Section Duration: 31 minutes
Maximiliano discusses properties of the FileSystem Access API, including reading and writing files in the filesystem of the user's device, requiring user's permission, Chromium and desktop only, asynchronous API, and doesn't count towards the quota. Opening a file and writing to an opened file are also covered in this segment.
Maximiliano walks through setting up the base for importing and exporting the data for the cart's contents. A walk through of exporting the cart data and setting file type options are also covered in this segment.
Maximiliano walks through implementing the import function to allow importing cart data from the user's file storage. When a new cart is imported, the order has to be re-rendered.
Best Practices
Section Duration: 9 minutes
Maximiliano discusses some best practices for database, performance, and provides some serverless ideas. Remember, it's better to store small objects, use Web Workers, and the ability to create custom indexes.
Maximiliano discusses best data sync and security practices and provides options for where to continue to read and do more with browser data storage. Mastering service workers, thinking about data migration, and remembering browser storage is public are a few suggestions covered in this segment.
Wrapping Up
Section Duration: 3 minutes
Maximiliano wraps up the course by providing a brief overview of the material covered in this course and recommendations for next steps.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops