Laying the Foundation

This book provides some perspective and elaborates on cutting-edge features like service workers and IndexedDB. It provides step-by-step instructions for creating an Angular application and incrementally adding features to build a sophisticated web application. The book uses an imaginary online gaming system, Web Arcade, to illustrate the techniques. It acts as a use case for building a modern web application that is resilient to network connectivity drops and speed changes.

Let’s establish the context with a little bit of history. As you might know, web applications have been popular for more than two decades. There have been a tremendous number of applications built. In fact, many web applications are mission critical for running businesses.

In the early 2000s, these applications replaced thick clients, which were installed on a device, a desktop, or a laptop. The thick clients posed a challenge because the applications had to be built by targeting an operating system. Most applications were not interoperable between Apple macOS and Microsoft Windows; however, there were exceptions. A few organizations and developers used Java-based technologies for building the thick clients, which ran on a Java Virtual Machine (JVM). Before such solutions gained traction, web applications took over. Largely, the thick clients were not compatible across different platforms and operating systems.

Web applications helped address this problem. A web application runs on a browser. The browsers interpret and execute HyperText Markup Language (HTML), JavaScript, and Cascading Style Sheets (CSS). The features are standardized by the European Computer Manufacturers Association (ECMA) and Technical Committee 39 (TC39).

The scenario changed with the advent of mobile apps, which are installed and run on mobile devices. This could be a mobile phone or a tablet device like an iPad. Apple’s App Store, which started in 2008, had a major role in organizations’ and developers’ shift to apps. Today, Apple’s iOS and Google’s Android are the two major mobile platforms. iOS uses App Store, and Android uses Google Play (also called Play Store) to distribute apps for their respective platforms.

Original Problem

On mobile devices, the apps brought back the original problem: you need to develop apps for respective platforms. You build your native app once for iOS and repeat for Android. Of course, there are alternatives, which include workarounds with hybrid and cross-platform technologies. They suit the major use cases, but there are always a few workflows for which such a solution does not help. Moreover, there are compromises with the native user experience; an iOS user may not feel the user interface matches the platform if originally built for Android. Many workflows and applications need large screens and the flexibility provided by desktop-class operating systems. There has only been minor traction bringing iOS and Android apps to the desktop. In most cases, the user experience is limited.

Caveats with the Web Application Solution

Organizations and developers build web applications that cater to all major platforms and browsers on iOS and Android and on macOS and Microsoft Windows. Remember, organizations adapted this solution originally while moving away from thick clients. At that time, the devices were largely stationary at a desk and not mobile. They were connected by either a cable or a WiFi network. The connectivity was stable. While building applications, connectivity was not a factor.

Mobile platforms have changed this scenario. Users are highly mobile, moving in and out of networks. Applications need to consider the connectivity factor. Imagine a user loses connectivity temporarily. When she attempts to launch a mobile web application, a traditional web application shows a message similar to “page cannot be displayed,” and the application does not launch. The user cannot proceed. The problem might be worse if the user is in the middle of a transaction. Data is lost, and the user might have to retry the entire workflow.

Apps provide a ready-made solution. Remember, apps are installed on the devices. Users can launch the app and interact with past data or messages even when the user is disconnected. If a user submitted a transaction or a form, an app can cache temporarily and synchronize when online.

Take the example of a social application such as Twitter. When offline, it allows you to launch the application, see cached tweets, and even compose a new tweet and save it as a draft.

Modern web applications support such advanced caching features. This book details how to build a modern web application that allows the users to function when offline.

Use Case

The book uses Web Arcade, an online game system on the Web as a use case. You will build the application with Angular and TypeScript. The book provides step-by-step instructions for how to create the application, various components, services, and more.

On desktop and mobile devices, modern browsers like Google Chrome, Microsoft Edge, Safari (on Mac and iOS), and Firefox allow users to install the application. The book provides step-by-step instructions to enable them to install the web application and create a shortcut for the application. The shortcut provides easy access to the web application and launches it in its own window (unlike a typical web application, which always launches in a browser). Figure 1-1 shows the Web Arcade application installed on macOS. Notice the Web Arcade application icon in the Dock. You will see a similar icon in the Windows taskbar. The application is in its own separate window, not among the browser tabs.

This book details how to use a service worker (with Angular) to cache the application. It provides step-by-step instructions to set up a development environment and test the caching features. At this stage the application loads even if the network is unavailable. In an example, you may use the feature to roll a die even when the application is offline. As you can imagine, rolling a die does not require server-side connectivity. It is a random number generated between 1 and 6. The application visualizes rolling the die (Figure 1-2).

You’ll start by caching the application data and using it while offline (or on a slow network). You will see how the service worker cache is utilized when the real server-side services are unavailable.

The book also details how to create data; specifically, the Web Arcade application will allow users to add comments even while offline. The comments are cached using IndexedDB, a local database. The application identifies once the connectivity is established. It synchronizes the cached offline comments with the server-side services and database.

Later, you’ll need to create new versions of the application and the database. The book covers features and implementations to prompt users about an available upgrade. It details how to provide seamless transitioning to the new database and upgrade its structure.

Code Samples

We anticipate enhancements and will incorporate feedback in the master branch accordingly. However, the branch book-samples is dedicated to matching the code samples in the book exactly.

It is a good practice to leave the application running in the background. Throughout the book you will continuously create and update the code and run the samples. The scripts run by the previous code keep the application up and running. Do not terminate this script, unless directed.

Summary

This chapter touched on the need for new implementations like service workers and IndexedDB, which are natively supported by most modern browsers. The remainder of the book will detail how to implement and integrate these technologies in a web application. We also introduced a use case called Web Arcade, an online gaming system on the Web, which will be used throughout the rest of the book.