WebApps in the address bar of the browser
Desktop hard disks nowadays store several terabytes and can be interconnected in servers to exorbitant memory sizes. The main memory of current systems is in the gigabyte range. Graphics cards for computer games have now reached 12 GB and even mobile devices such as smartphones have gigantic storage possibilities; my iPhone 7 Plus has 128 GB flash memory and 3GB RAM – wow! The times when lack of memory was a big problem for programmers seem to be over.
Effects of an app that fits into the browser’s address bar
An app that is so small that it fits into the address bar of a browser reveals some positive and negative effects. And not just on mobile devices. Here are the positive effects from my point of view:
- If no external resources such as other files or XHR requests are used, the initial loading time is extremely short and nothing has to be reloaded from the network.
- The entire app could be saved in the favorites.
- Data could be stored locally e.g. via the local storage.
- The app could work 100% offline.
Technically there are some disadvantages besides the positive effects:
- The URL to open the app is not easy to read or to enter manually into the browser.
- The functionality of the app is limited, because the address bar of the browser is very restricted.
The implementation of Pong as an example
For the implementation of an app that fits into the address bar of the browser, I take Pong as an example. The logic of the game is simple, the game doesn’t need any graphics or the like, and it can be completely implemented with browser tools.
The rectangles at the top in the middle of the picture represent the goals to be achieved. As soon as a player scores 5 goals, he wins the game and the game can be restarted by pressing the Enter key. The left player is controlled with the W and S keys and the right with the up and down arrow keys.
Here is the corresponding source code:
The minifier in action
And this is what the result looks like after using a minifier:
With a little manual work, the size of the code can be further reduced. To get the whole thing into the address bar of your browser, you only have to specify the correct MIME type using a Data URI. Simply take the minified code above and add the following text to the front:
You’ve already got it all together! If you want to play a round of Pong with a colleague in the browser, you can simply copy the following text and paste it into your browser address bar. Have fun playing.
The practical use
Of course, my example is literally a gimmick. Could the whole thing also have a practical use? In my opinion: yes. For example, I could imagine that you could create a small, persistent to-do list app with it. This stores its data in the local storage and can be quickly and easily saved and accessed in my browser via a favorite entry. I also think the idea that you can send the app directly in an e-mail via a link is pretty cool. If one could still compress and sign such URLs, then perhaps larger apps would also be conceivable and the security of the application could be increased. Let’s see, maybe I will think of something else in the next few years. Or maybe you have an idea … 😉
Software Consultant at t2informatik GmbH
Peter Friedland works at t2informatik GmbH as a software consultant. In various customer projects he develops innovative solutions in close cooperation with partners and local contact persons. And from time to time he also blogs.