Preload Angular Bundles When Good Network Connectivity is Detected
Tags: angular, webdev, typescript, javascript
Published: 2019-05-31 07:54:39

---
title: Preload Angular Bundles When Good Network Connectivity is Detected
published: true
tags: angular, webdev, typescript, javascript
description: Learn how to create your own custom Angular preload strategy to preload bundles in advance when network connectivity is good
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0zdneg0sk4r087daju4d.jpg
series: Angular Preload Strategies
canonical_url: https://johnpapa.net/preload-angular-bundles-when-good-network-connectivity-is-detected/
---

Users want fast apps. Getting your JavaScript bundles to your browser as quickly as possible and before your user needs them can make a huge and positive impact on their user experience. Knowing how you can improve that experience is important.

One way you can improve user experience with your Angular apps is to strategically decide which bundles to preload. You control when your bundles load and which bundles load. This is why you should explore choosing a built-in or creating your own custom Angular preload strategy.

In this series we'll explore a few of your options for preloading Angular bundles.

Here are the articles in this series

- [Preload all Angular Bundles](https://dev.to/john_papa/preload-all-angular-bundles-1b6l)
- [You Pick Which Angular Bundles to Preload](https://dev.to/john_papa/you-pick-which-angular-bundles-to-preload-5l9)
- [Preload Angular Bundles When Good Network Connectivity is Detected](https://dev.to/azure/preload-angular-bundles-when-good-network-connectivity-is-detected-j3a)
- [Predictive Preloading Strategy for Your Angular Bundles](https://dev.to/john_papa/predictive-preloading-strategy-for-your-angular-bundles-4bgl)

> Check out [Suguru Inatomi's post here for a similar network-aware preloading strategy](https://dev.to/lacolaco/network-aware-preloading-strategy-for-angular-lazy-loading-4hae)

## Checking for a Good Connection

The "network aware" strategy uses the browser's [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection) to detect the connection and speed. If the speed qualifies as good, then it preloads the bundles. If not, it leaves them alone.

> You can check browser compatibility for the [Network Information API here](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection#Browser_compatibility).

You can create the custom `NetworkAwarePreloadStrategy` by creating a class that implements the `PreloadingStrategy` interface, and providing it in the root. Then you must implement the `preload` function and return the `load()` function when you want to tell Angular to preload the function.

Notice the `preload` function in the class `NetworkAwarePreloadStrategy` checks the `navigator.connection` object's `saveData` property first. Some mobile devices have a setting for "data saver". When this is enabled, this property will be `true`. Therefore, if the user has decided to save their data, they did so by choice and we should not be preloading bundles (which consumes data).

Next the code checks if the connection's `effectiveType` is one of the connection speeds that you feel are too slow to then preload the bundles. The code below decides that 2g and slow-2g don;t qualify for preloading, but 3g and better do. Therefore, as long as the `saveData` is true and the connection speed is 3g or better, the bundle will be preloaded.

```typescript
export declare var navigator;

@Injectable({ providedIn: 'root' })
export class NetworkAwarePreloadStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return this.hasGoodConnection() ? load() : EMPTY;
  }

  hasGoodConnection(): boolean {
    const conn = navigator.connection;
    if (conn) {
      if (conn.saveData) {
        return false; // save data mode is enabled, so dont preload
      }
      const avoidTheseConnections = ['slow-2g', '2g' /* , '3g', '4g' */];
      const effectiveType = conn.effectiveType || '';
      console.log(effectiveType);
      if (avoidTheseConnections.includes(effectiveType)) {
        return false;
      }
    }
    return true;
  }
}
```

## Setting the Custom NetworkAwarePreloadStrategy

Then when setting up your `RouterModule`, pass the router options including the `preloadingStrategy` to the `forRoot()` function.

```typescript
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: NetworkAwarePreloadStrategy
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}
```

## Try It

After applying this strategy, rebuild and run your app with `ng serve`. Open your browser, open your developer tools, and go to `http://localhost:4200`. When you inspect the Network tab in your browser you will likely see all of your bundles already preloaded.

Then toggle your throttling to 2g speeds in your browser, then refresh the page. Then the routes will no longer be preloaded.

## Deciding What Is Right For Your App

Now that you know how to create your own preload strategy such as `NetworkAwarePreloadStrategy`, how do you evaluate if this is the right strategy for your app?

If mobile and low bandwidth / low WiFi scenarios are likely for your users, this could be a beneficial preload strategy. You could talk to your business users (the stakeholders in your app) to discover this, if you are not sure.

You could also combine this strategy with one of the other custom strategies.

In the end the decision is up to you. I recommend before choosing this options, or any preload strategy, that you test at various network speeds under various valid and common user workflows. This data will help you decide if this is the right strategy for you, or if another may be more beneficial for users of your app.

## Resources

- Get [VS Code](https://code.visualstudio.com/?wt.mc_id=devto-blog-jopapa)
- Get the VS Code [Angular Essentials](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials&wt.mc_id=devto-blog-jopapa)
- Get the VS Code [Angular Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular2&wt.mc_id=devto-blog-jopapa)