ProMatrix Offline Solutions


The best software products have the least amount of dependencies.

With that being said, imagine not depending on a connection to the Internet.

This would allow you to work, or play from anywhere, anytime.

It used to be that online solutions were the big thing. And they still are, as long as you have a solid connection to the Internet. But what happens when you lose that connection?

 

Azure
SignalR
WebAPI
Angular 2
TypeScript
Application Cache
Bootstrap/LESS/SASS
Microsoft .Net
Google Drive

ProMatrix has created an AppCache framework that integrates with the technologies listed on the left

How it works:
You must be connected to the Internet at some point to load and cache the application and content, but once loaded and cached, you can restart your computer, and travel to the other side of the world while using the application, without interruption.


Applications have endless potential, once they become offline enabled.

Not needing an Internet connection opens up all types of possibilities.

Not only will you be able to view content and media, but your application will launch quicker.

You will continually save on bandwidth, since you already have all the content you need.

Listed on the right side are typical applications that are great when they are offline enabled.

Games
Video Help System
Content Management
Video Training
Instruction Manual
Warehousing
Inventory
 

Supercharge Angular 2 with Application Cache

AppCache Music Demo    (Live)

Block Diagram

Control Logic


ProMatrix Inc.
1650 Galiano St.
Coral Gables, FL. 33134

(786) 408-0969

Contact:

Contact us for details, demonstrations and scheduling.

Intentionally, there is no email address provided, so please call: (786) 408-0969

 
Demo
DEMO 01-Welcome Welcome! This is a series of videos explaining how to supercharge angular 2 with application cache. Hello, my name is Zira, and I will be narrating for David Donovan, and in this video I am going to demonstrate the benefits of using the application cache to increase the performance of a web application, and allow it to work offline. That means that you can be disconnected from the web, and the application will be completely functional. By the way, it’s not necessary to use the application cache with Angular 2. It’s just supercharges the already hottest client-side framework. Application cache will work with any client-side framework, or no framework at all. 02-Overview Please allow me to showcase this simple, but powerful application that utilizes the application cache with Angular 2. For lack of a better name, I call it, the AppCache Demo. The AppCache Demo is a music player that displays the music score of 5 different tracks,,, guitar, bass, drums, keyboards and saxophone. It allows the user to set the level of each track, mute the track, and view the notes to be played as the track is playing.,,, This application is designed for jammers, students, and could be used in a live performance.,,, So, if I am a saxophone player, I could mute the saxophone part and add my own part, on saxophone, trumpet, flute, or whatever instrument I choose. The same thing applies for the guitar, the bass, or, the drums. 03-Controls Once I press the play button, the 5 tracks begin playing back simultaneously. But first I’ll explain how all the controls work. The buttons at the top, select the track for viewing. The checkboxes will mute or unmute the tracks, and the sliders allow you to control the volume for that track. Then at the bottom, we have the play button,,, the pause resume button, and the stop button.,,, Since it seems like everybody wants to rule the world these days, that’s the song I chose for the AppCache Demo. Maybe that’s clever of me, and maybe not. I’ll let you decide! 04-Start Playback First, start the playback by clicking the play button. You can hear all tracks beginning to play, but you are only viewing the music for the guitar track.,,,,,, Click the bass track. You see the bass part.,,,,,, The drums.,,,,,, The keyboards.,,,,,, And finally you see the saxophone.,,,,,, I can mute the saxophone part by clicking the checkbox. Or unmute it.,,,,,, And adjust the volume with the slider.,,,,,, Then back to the guitar track. And, oh yeah, the pause resume control at the bottom.,,,,,, and finally the stop button will take you back to the beginning. 05-Disconnected OK. Now let’s disconnect from the Innernet. I’ll do that by literally pulling the plug.,,,,,, To prove that I am disconnected, I’ll go to NetFlix. Hmmm… Yep, I’m totally disconnected.,,, Now let’s see if by utilizing the application cache, I can bring up the AppCache Demo. 06-Success How about that!,,, There she is! I see from the online indicator and from the toaster warning message that I’m offline! 07-Offline Playback And what about starting the playback?,,,,,,,,, Great!,,,,,, And viewing the different tracks?,,,,,,,,, Awesome! Finally, someone that knows what they’re doing with the Application Cache. Hmmm,,, It’s about time!!! If you’d like to see the AppCache Demo for yourself, you can go to this web address.,,,,,, The technologies used for the AppCache Demo are: Angular 2, typescript. ASP.Net Core. Windows Azure. And the HTML5 video player. All modern technologies brought together for you for this demonstration. As you can see from this demo, we have just eliminated the dependency to be connected to the Innernet.,,, If your connection is unreliable, or not at all, the application is still completely functional.,,, You can disconnect from the innernet, shut down, move across the world, into the ocean, or into outer space. Power back up, start the application, and, with the benefits of the Application Cache, you will be back, up and running. 08-Other Possibilities What other type of web applications can you think of that would benefit from using the application cache?,,, Calculators. Games. Service manuals. Online-offline training courses.,,,,,, And the list goes on. And on, and on. 09-Next Video In the next few videos, I’ll explain how to implement an application cache framework, so please stay with me.,,, I hope I don’t lose you BLOCK DIAGRAM Welcome Hello there! This is a series of videos explaining how to supercharge angular 2 with application cache. This is Zira, narrating again for David Donovan, and in this video I am going to give you a high level view of the App-Cache Music Demo. This isn’t just another boring business application. It makes no sense to just wait around, so, let’s jump right into a block diagram. Preloader The Preloader, detects if the application is connected to the server or not. It also tracks the progress of the application caching process, and only allows access to the application after the application is fully cached. There is an important point about detecting the online status of the browser. Not all browsers evaluate being online with the same criteria. Here is a real life scenario. Suppose you are connected to the Web, but the server is temporarily unavailable. Well, you are online with the Internet, but offline with the application. To solve this problem, the most logical approach is to make a call to the server on startup. If the response is not a status code of 200, the application is considered offline. MainFrame The MainFrame, is an Angular component that is loaded dynamically during the Angular bootstrap process. Once all of the html, css, and Java Script files are cached, the MainFrame becomes visible to the user. The MainFrame has controls in the header and footer parts of the view. The MainFrame also has two child view components that take turns showing themselves in the middle of the MainFrame. Monitor The Monitor component is a child view component of the MainFrame. Its purpose is to give the user a visual representation of the loading progress of the content. In this case, the case of the App-Cache Demo, we are loading the content of 5 different mp4 files. Once the content is loaded, we are enabling the play button on the MainFrame. Execution Philosophy You may have noticed that the loading and executing of the App-Cache Demo has a different execution philosophy. Most web application try to display content and allow the user to interact quickly, even if the whole application is not loaded. And this is certainly a reasonable approach. However in the case of the App-Cache Demo, we are taking a different approach, not allowing any interaction from the user until the application is fully cached and loaded. By using this approach, once we begin using the application, should we happen to lose our connection to the Internet,,,, we still continue to run as normal. This execution philosophy will resemble how a desktop application gets installed and executed. You can’t begin using a desktop application until it is completely installed. Component Html In this view of the block diagram, we can see what Html file the components are in. The Preloader, is referenced in the index.html file, the MainFrame, Monitor and Viewer are part of the appFrame.html file, and the content files are loading by way of the playerFrame.html file. More details about this in the following video. Next up Controllers Now maybe it makes sense to explain about the control logic. CONTROL LOGIC Welcome Hey everybody! This is a series of videos explaining how to supercharge angular 2 with application cache. My name is Zira, and I’m narrating for David Donovan.,,, In this video I am going to give you details about the control logic for the App-Cache Music Demo. Controllers Controller Logic.camproj There are three main server-side controllers that facilitate the application caching process. First, the Manifest Controller serves up the manifest for different parts of the application. The HTML controller serves up HTML in a dynamic and streamlined approach, and the Video Controller serves to the client the videos. Let’s break these down as to how these three controllers will be used to increase the performance of any web application, and allow it to work offline, starting with the Manifest Controller. Manifest Controller Manifest-index.camproj Manifest-preloader.camproj appfiles manifest.png Traditionally in an HTML file, the manifest would reference a manifest file. This is a newer feature brought to us by HTML5, and you can see the reference to the manifest here in the html tag. Now, the browser doesn’t care how the file is returned to it, as long as it looks like a manifest file. So our design gives us the flexibility to use a server-side controller to return what looks like a manifest file. This way the manifest can be created dynamically. Notice in the manifest file name that we are addressing the Manifest Controller here.,,,,, And we are addressing the specific file here.,,,,,, Also notice the file extension.,,,,,, Google Chrome is the only browser that I know of that will display the Application Cache manifest files. Let’s open up Chrome to view the manifest for the preloader. This is one of the simpler manifest files. I’m not going to spend a lot of time reviewing this file, but I did want to mention that these are the files that are cached by the browser.,,,,,, And this date will be updated when a source file changes. As long as this date remains the same, the browser will use the files that it has already cached, and has no need to download new files from the server. The logic for updating the date is handled in the manifest controller and is taken care of automatically.,,, Not too shaby.,,, Not too shaby at tall. We might as well take a look at the manifest for the app files. This manifest is huge in comparison, containing many css files, html files, Java Script files and a few graphic images. I’d like to point out a few other things about the Manifest Controller. This one isn’t too obvious, but a huge performance gain to know this information. Please notice that I have, an I-frame in this page. The main point, and we will cover it later as well, is that the more manifests that you have in a web application, the faster it will load. And why is that? Hmmm,,,,,, Because the files that are listed in one manifest can load concurrently with the files in another manifest. This may be a little bit of a hard concept to swallow so let me break it down. A manifest contains a list of files that get loaded one after another, but if another manifest exists, in a different frame, those files get loaded at the same time. This results in the entire application getting loaded in a fraction of the time.,,, Yae! Web.config Manifest-web.config.camproj Why not take a quick look at the web.config file for this application. You should notice that we are declaring the file extension, .cache-manifest as a mime type of text slash cache-manifest. This is important if the server is going to know how to serve up this file type. Just a good thing to know if you want to create and use your own manifest file extensions. AppFrame.html Let’s look back at the index.html file for a second. Notice that the html contains, an iFrame tag with the source attra-bute pointing to the appFrame.html. Ok, now let’s look at that HTML.,,, Now we are looking at the app Frame.html file. Notice manifest is referencing the Manifest controller. We might as well look at that manifest. That guy sure has a lot of stuff in it! Looking back at the app Frame HTML, you should notice directive main frame. This is where the MainFrame component will get injected into the page. Viewer.html Runtime-viewer.camproj selected song Let’s have a discussion about the viewer component, even though I will be the only one discussing anything. As we talked about before, the viewer component is a child component of the MainFrame component. This HTML will get injected into the MainFrame view. Here are some key points. First, this script is using an Angular 2 NG 4 loop. In doing so, the rendered HTML will look to the browser like this.,,, Notice that the track dot file path got replaced with this.,,, Then when the browser makes a request for this HTML file, the server responds by way of the HTML controller, which will serve up the HTML for a specific instrument.,,,,,, Sorry if that’s a lot to comprehend. It’s not my fault that not everything is easy.,,,,,, Player Frame Template Html-playerFrame.camproj When the application requests the HTML for the instrument, the HTML controller gets a template to convert to the actual file that gets served to the browser. In the top part is the template for the HTML that gets converted to what you see in the bottom part. And keep in mind that all the instruments are in their own frame, and they each have their own video player, and their own manifest. You are probably asking yourself, does it really have to be so complicated? Again, It’s not my fault that not everything is easy, I’m just trying to explain it to you! Video Controller While we are right here, I’ll point out that the player HTML has a video player tag, which has a source attribute, which request the MP4 file. Here is another case where the browser request a file but a controller receives the request. And in this case, the video controller responds with an video file. It’s true that we wouldn’t need a controller here, except that I have every intention of getting the MP 4s from a cloud storage, such as google drive, instead of the file system. AppCache Monitor AppCache Monitor.png You may have noticed that at the application startup that the MainFrame stays hidden until the application is cached. That was a design choice, and not completely necessary. However, if the browser realizes that there is a newer version of a cached file, then the browser will need to reload the application. All of that is much more graceful when the MainFrame is hidden. The progress bar that you see will give you an indication as to what the progress is of the loading, caching, and checking for updates. Content Cache Monitor Content Monitor.png Once the application is fully cached, the MainFrame is displayed, and inside the MainFrame is the Content Monitor. The progress bar that you see now is an indication of the progress of the caching of the 5 MP4 files. Once the files are completely cached, then the play button is enabled, and you may begin using the application. Also, as I pointed out earlier, since all the files are in the browser cache, you may completely disconnect from the Internet and the application will continue to run as normal.