Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Majid HajianProgressive Web Apps with Angularhttps://doi.org/10.1007/978-1-4842-4448-7_1

1. Setup Requirements

Majid Hajian¹

(1)

Oslo, Norway

In this book, I strive to take you on a journey where you can create the most comprehensive Progressive Web Apps (PWAs) with Angular. But before I start, we’ll review some PWA fundamentals and set up the environment that will be used throughout the book.

Progressive Web App Fundamentals

PWAs are applied to those web applications that are fast, engaging, reliable, and will try to progressively enhance user experience regardless of their browsers, platforms, or devices. In other words, a PWA is not only one framework, tool, or fancy buzzword, but it is a mindset for constant enhancement by leveraging browsers’ modern APIs, which leads to satisfaction for every single user.

No matter which framework you choose to work with, no matter which language you choose to write your code with, PWAs must have special characteristics:

1.
Instant loading: Application should load fast and must be interactive very quickly.
2.
Connectivity independent: With either no network or a slow and unstable connection, the application must continue working.
3.
Responsive, mobile-first, offline-first design: Let’s focus and optimize for mobile first, which has lower hardware capacity, and the application should be completely usable on mobile.
4.
Re-engaging: A push notification is one way to send a reminder to a user.
5.
Native-like features: Having UI architecture like App Shell and using hardware APIs like Web Bluetooth can make our web app more like a native app.
6.
Secure: Security is the highest priority, and every PWA must serve via HTTPs.
7.
Installable: Being installable means it’ll be added to the device’s home screen and launched like a native app.
8.
Progressive: Regardless of browsers or devices, our app should evolve and embrace new features and give every single one of them the best user experience.

Why Angular?

A couple of years ago, the front-end world was dominated by Angular 1.x even before React came to the market. By establishing and finalizing ES6 and TypeScript appearances as well as new browser features and standards that have been adapted widely, the Angular team, which has been backed by Google, decided to rewrite AngularJS, formerly known as Angular 1.x, leading toward Angular 2, called Angular nowadays. Angular is backed by Observable APIs with Rxjs and TypeScript and has unique features such as robust change detection and routing, animation, lazy loading, a headache-free bundle process, CLI, and tons of other APIs. These make it an exceptional, capable, and full-fledged front-end framework that is trusted by many companies worldwide to build and distribute complex web applications.

Additionally, the Angular Service Worker module has been introduced in version 5, improved in version 6,¹ and is now getting updates regularly in order to add more features and become stable. Although Angular Service Worker along with Angular CLI is not the only option to create a PWA, it is very well maintained, which allows us to effortlessly create or convert an Angular app to a PWA.

All in all, it’s not that far off to say you have an all-in-one framework to create a web and mobile application, and this makes Angular unique.

Installing Node and NPM

You need to make sure that you have Node and NPM installed on your machine. Simply run the following commands to check your Node and NPM version or to see if you have already installed them:

$ node -v

$ npm -v

Node 8 or higher and NPM 5 or higher are needed. You can visit the Node website at https://nodejs.org and download the latest version based on your operating system (Figure 1-1).

../images/470914_1_En_1_Chapter/470914_1_En_1_Fig1_HTML.jpg — Figure 1-1.
Node official website where you can download the latest version of NodeJS

YARN is an alternative to NPM and has been around for a while. If you prefer to use it, you should visit https://yarnpkg.com/en/docs/install and then install the latest version based on your operating system. To check if you have YARN installed, simply run the following command:

$ yarn -v

Installing Chrome

Although we create a PWA that will work regardless of browsers of your choice, I will stick to Chrome and its dev tools to develop and debug Service Worker as well as other PWA features. At the time of writing the book, Chrome has a PWA auditing tool called Lighthouse that is built in under the Audit tab. If you would like to download Chrome, you can visit https://www.google.com/chrome/ .

I will evaluable our application with Lighthouse and boost our PWA score later in this book. We continuously use the applications tab to debug our Service Worker, IndexedDB, Web App manifest, etc.

Scaffolding Our Project

It is time to scaffold our project using Angular CLI. So, before we proceed, first install Angular CLI globally by running the following:

$ npm install -g @angular/cli

$ yarn global add @angular/cli

Now that CLI is installed globally, we can generate a new Angular application.

Generating New Angular App with CLI

As soon as Angular CLI version 6 is installed (you may have a higher version when you read this book), you have the ng command available globally in your terminal. Let’s scaffold our project simply by running the following:

$ ng new lovely-offline –-routing –-style=scss

Lovely-offline is our application name, routing will generate the route module, and style=scss indicates the scss prefix for our styling files.

Adding Angular Material Design

The Angular Material module is, perhaps, one of the best UI libraries for a web app. It will let us develop our application rapidly and flawlessly. You are not limited to this library only, but I recommend it for this project. To install:

$ npm install --save @angular/material @angular/cdk @angular/animations

Now open the project in your editor or Idea, and then under /src/app, find the app.module.ts, and import BrowserAnimationsModule into your application to enable animations support.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

AppRoutingModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

To use each component, we should import their relevant module into ngModule, for instance:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatToolbarModule } from '@angular/material/toolbar';

import { MatIconModule } from '@angular/material/icon';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatToolbarModule,

MatIconModule,

AppRoutingModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

A theme is required; therefore, I will add one of the available themes to style.scs in our project:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

It is recommended that you install and include hammer.js as Gestures in Material design are relied on in this library.

$ npm install hammerjs

After installing, import it in src/main.ts

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

import 'hammerjs';

if (environment.production) {

enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule)

.catch(err => console.log(err));

Icons requires the Google Material Icons font; thus, we will add the font CDN link to our index.html file:

<!doctype html>

<head>

<title>LovelyOffline</title>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>

<body>

<app-root></app-root>

</body>

</html>

Now our project is ready to use. Simply run ng serve or npm start. You can access the project in your browser by entering localhost:4200 .

Setting Up a Mobile Device

There is nothing better than testing our application in a real device to see how it looks. Android, along with Chrome, is supporting most of the PWA features including Service Worker, Push notification, and background sync as well as even more modern browser APIs.

Please read the article below on the Google developer website, https://developers.google.com/web/tools/chrome-devtools/remote-debugging , if you have a real device and want to conveniently connect it to Chrome dev tools. Keep in mind that the real device is not necessary; you can always test your app via Android and iOS emulators.

Setting Up a Mobile Emulator

To run an Android Emulator, I recommend you install Android Studio and follow the instructions placed on the Android developer website: https://developer.android.com/studio/run/emulator .

Mac Users are also able to install xCode and run an iPhone simulator on their Mac. After installing xCode from https://developer.apple.com/xcode/ , you should be able to find Open Developer Tool under the xCode menu, and then you can open Simulator to open your selected iPhone / iPad.

Connecting Android Simulator to Chrome Dev Tools

You now should be able to connect your Android simulator to Chrome dev tools. Please refer to the “Set Up Mobile Device” section.

Summary

In this chapter, we have looked at PWA fundamentals, and then we scaffolded our projects using CLI. Angular Material has been added to our project in order to style our app.

Moreover, we have reviewed other tools that we will need throughout this course such as Node, NPM, YARN, and Chrome; and we learned how to set up our real device as well as our simulators in order to properly test our app.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.