Check out a free preview of the full Web Storage APIs course

The "Wrapping Up" Lesson is part of the full, Web Storage APIs course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano wraps up the course by providing a brief overview of the material covered in this course and recommendations for next steps.

Preview
Close

Transcript from the "Wrapping Up" Lesson

[00:00:00]
>> We'll go over the state of browser storage, the APIs available, which API should be used in your PWAs and which one you shouldn't be using? Debugging tools, everything about quotas, persistance, how to request, persistance storage. Remember, if you don't request explicitly persistance storage, you are under best effort.

[00:00:24]
So your data might be evicted at any time. And then we've covered with code web storage, try to not use it. IndexedDB with the proper at least, Cache Storage and the FileSystem API. In the companion website, you have the last chapter, some ideas of what else you can do as homework, like bonus, next steps.

[00:00:50]
So things that you can do to improve this PWA, such as separate categories and products in different data storage in the same database. Caching the menu using a transaction. For example, right now, when we are caching the menu, we are using a for each and we are caching one by one.

[00:01:08]
We are adding to a database one by one. But what happens if the third one fails? We ended up with a menu that is half of the menu. So it's better to use a transaction. So if you wanna play with transactions on IndexedDB, that's a nice sample, okay?

[00:01:23]
Try to increase the whole UI performance, replacing innerHTML with different techniques. InnerHTML was the easiest way here to just focus on the data part and not other parts of performance in user interface. Let the user know the current offline and storage status. You can create settings or some part of the website saying you're online, you're offline.

[00:01:48]
Okay, this is your quota, you are okay, you are green, you are yellow, you're red, okay? And by the way in Chrome, you can simulate in the latest version of Chrome's a custom storage quota. So you can say, you know what, you have one megabyte, and this is pretty interesting to test your errors, how you're handling errors.

[00:02:14]
So you can say you have only one megabyte now. So when you try to save data in the indexedDB or cache storage more than one megabyte, it will trigger exceptions. Are you handling that situation? Okay, that's in the latest version of Chrome only. Simulating custom storage port. So you can play with that, okay?

[00:02:38]
You can update assets in the cache when there is no connection to the server. And increase the PWA installability experience, such as the first time you get into PWA, you can offer the user a way to install the app. Different things that you can play as a bonus over this coffee masters PWA that now works completely offline.

[00:02:59]
Well, okay, thank you. That's all I have for you today.
>> [APPLAUSE]

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now