+ Reply Thread
And we are back again!

This time we will obtaining our API key for issuing youtube requests.
  • Make sure you have a Google account.
  • Log into the google developers console
  • Create a project
  • THEN, select YouTube data API
  • Click create credentials on the right hand side of the screen.
  • Choose where you will call the API from
  • Pick public or User.
  • Obtain your API Key.

Now that we've gotten our API key, next we will be getting our files and folder structure ready!!!

Good job you have here, but still trying to grasp the use case of this kinda application, because before the api can work I must still have access to the Internet
Yes you need Internet access. We are not trying to make a case where we develop a web app with its backend service and likes. We are here to illustrate the use case of application cache, and localStorage. If you have any idea that might be more explanatory it will be welcome.

Facts to consider here is, we are not saying our web app will run offline in total. All we are saying is, an offline first(thinking that the user is offline) application. Which will note allow our users to have blank/error page. But it loads our app for the user to interact with.

Use case of a scenario is this, imagine an event app where users register for an event and choose to attend. Now our user is set and wants to attend the event and seeks to get the address, Ish!!! network issue or out of data, what will we as developers have to say? In this scenario, an offline first app would have saved the user in this case by storing all subscribed events (or even ask the user if they want to save the whole page for offline use). Same applies here but in different case, we want our user to see their last searched video result sets, have a thumbnail for offline videos and when we are online we can continue surfing the web.

And once again we are not opportune to be creating a full blown app, I would have suggested a todo app or a github users profile app or consume jsonplaceholders api. We want something that will be so simple but real to grab the concept. and youtube search app will and can do the task.

Hi everyone sorry for the late update.

Here we have it our files and folder structure as required.

We will be using bootstrap, font-awesome, and jquery. All have been made available in the github link provided below. If you wish you can fork and commit to your github account too. This would be a full functional app so why can't we brag that we are making something that is at least working!
Watch this space tomorrow, I will be dropping the markup for the layout of our app. Then will follow a full explanation of the three APIs, application cache, local storage, and service workers. And we will better analyse why we are settling for applicaion cache yet(We might move tomorrow if browser support increases).

Till then you can run from your terminal or command line

Let's move it

Before continuing, I want to notify us that I have pushed a new branch to the repo of the tutorial and also merged it with the master.
The update has the layout in place and included our dependencies (font awesome, bootstrap and jquery)

Now read below what application cache is.
Application as explained in the first post gives us the ability to create an offline web page, that is accessible offline if our users refresh their browsers.
The browser provides a caching mechanism that cache all our assets, but the problem is the browser can kick them off the memory without notice.
Addressing this is the HTML5 introduction of application cache API. This gives us the ability to tell the browser hey, cache these guys and don't ever delete them unless I tell you to do so.
To use application cache we need to declare a manifest file as an attribute on the root html tag like so
<html manifest="example.appcache"> ... </html>

And in the manifest file, we can tell the browser which of the assets are to be cached.

I am asking this as if a total novice.
How do I get to run that command line above and where do I run it?
Back to top