The Internet is a powerful medium that has radically made our lives better. It continues to grow day by day making Global Village a reality. Today, the average internet speed has gone up significantly. Yet, millions of Americans are still trudging from website to website, with sluggish internet speeds. According to a report, nearly half of the 102 million fixed connections in the US run at speeds below 25 megabits per second.
Slow internet speed is not just an agonizing experience for the users but it also kills their online experience. If the statistics are to be believed, 53% of users will abandon a site if it takes longer than 3 seconds to load!
It feels very annoying when the page seems to be loading and all we see is a blank screen.
That’s where Progressive Web Apps (PWAs) come to our rescue. You get the best user experience possible whether there is a connectivity or no connectivity at all!
Let’s find out more about Progressive Web Apps and how they can be developed using Angular Google’s front-end JavaScript framework.
What are Progressive Web Apps (PWAs)?
According to the latest statistics, 51.89 percent of global web traffic originated from mobile devices in the second quarter of 2018. While mobile web browsers generated more internet traffic than native mobile apps, the website visitors rarely came back. In most of the cases, they just performed one time searches, read articles or watched videos and did not return.
However, the users who used mobile apps invested much more time in them. It happened because of the two reasons:
- The users found it more convenient to open an application from Smartphone’s home screen than to run the browser and type the address of the website.
- Besides, the websites stop working when there is no internet connectivity. Many native apps, on the other hand, still work when there is no internet connection.
Progressive Web Apps combine best of both the worlds
Progressive Web Apps are regular web pages or websites that provide the best user experiences of a mobile application while having the reach of a website. It combines features offered by most modern browsers with the benefits of a mobile experience. Here are some of the features of Progressive Web Apps:
- There is no need to install an app via an app store. They can just be installed on a device’s home screen.
- The users get a native-app-like experience along with all the perks of a real app such as Push Notifications, Offline Working, and Splash Screens that gives it a more app-like feel.
If you are looking to get started with PWAs, here’s how you can do it using Angular CLI.
How to develop PWAs using Angular?
Progressive Web Apps are pure web applications built with the same web technologies, such as – HTML, JS and CSS that are used to build other websites. The concept of PWAs started booming only in late 2015, but today, companies both small and large are adopting PWAs for their current and future projects. Some examples include Twitter Lite, Tinder, Flipkart Lite etc.
Core building blocks of Progressive Web Apps
Here are the two core building blocks of Progressive Web Apps:
App Manifest
App Manifest provides information about an application, such as its name, icon, description etc. in a JSON text file.
It is added in the head section of the HTML page, using the following code:
<link rel=”manifest" href="/manifest.json">
Service Worker
Service worker is one of the most important components of Progressive Web Apps. It’s a JavaScript code that runs in the background of your browser when you view a webpage. It is entirely separate from the webpage and is responsible for the following things:
- Intercepting and responding to network requests
- Caching or retrieving resources from the cache
- Delivering push messages
Once a Service Worker gets installed on your website, it will make the browser run the JavaScript in the background, regardless of whether you are browsing the website or not.
Building progressive web apps with Angular
Angular is the most popular front-end web application platform that can also be used to make robust, responsive and reliable PWAs. Here’s how it is used to create Progressive Web Apps.
Getting started
Creating a progressive web app with Angular CLI starts with generating a normal Angular CLI project:
ng new my-project-name
Then the project is configured by using the following command:
cd my-project-name
ng add @angular/pwa –project my-project-name
The following changes will be made to the project by this command:
- The project will be configured to initialize a service worker when running in production mode.
- json will be addedto describe your application.
- app icons will be added to your project.
- <noscript>element will be configured.
Setting up the manifest
The manifest.json describes the following things about your application:
- The name of your application.
- The theme color of the application.
- The icon for your application.
Besides setting the theme color within the manifest, it’s also a good idea to change the <meta/>tag generated within index.html:
<link rel="manifest" href="manifest.json"><meta name="theme-color" content="#64B5F6">
Now, when you run the application on a mobile device, you’ll see that the color of the address bar changes to the color of your choice.
Also, if you add the application to the home screen manually, you’ll see that it shows the name of the application and the icon that is provided in the manifest.
Service worker
One of the key-features of PWAs is the use of service workers. Service workers are basic JavaScript code files that run in the background. They make your application available offline. However, to do that, all the necessary scripts need to be loaded by the script. Angular CLI automates the entire process. When you build your application in production mode, a service worker is generated. Here’s how it is coded:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Service worker registration
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
],providers: [],
bootstrap: [AppComponent]})
export class AppModule { }
Service Worker only works on secure origins. So, you will have to make your application secure by running it on HTTPS.
Working with local storage
It isn’t always necessary to work with local storage when developing progressive web apps, but it could be useful. The maximum size of data that can be stored within local storage depends on the browser but usually varies between 2MB (for mobile browsers) and 10MB (for desktop browsers). For this we can use the following code:
@Injectable({
providedIn: 'root'
})
export class TaskService {
static key = 'tasks';
subject: BehaviorSubject<Task[]> = new BehaviorSubject<Task[]>(TaskService.deserialize());
constructor() { }
private static deserialize(): Task[] {
return JSON
.parse(localStorage.getItem(TaskService.key) || '[]')
.map((task: SerializableTask) => ({...task, due: new Date(task.due)}));
}
private static serialize(tasks: Task[]) {
localStorage.setItem(TaskService.key, JSON.stringify(tasks));
}
private static id(tasks: Task[]) {
const ids = tasks.map(task => task.id);
return ids.length === 0 ? 1 : Math.max(...ids) + 1;
}
findAll(): Observable<Task[]> {
return this.subject;
}
save(task: Task): void {
const tasks: Task[] = TaskService.deserialize();
if (task.id == null) {
tasks.push({...task, id: TaskService.id(tasks)});
} else {
const index = tasks.findIndex(obj => obj.id === task.id);
tasks[index] = task;
}
TaskService.serialize(tasks);
this.subject.next(tasks);
}
}
Using the notification API
To make your application engaging, two browser APIs can be used – the notification API and the push API. The Push API is more powerful as it allows you to send notifications to the device even when the application is turned off. This requires access to a messaging service.
The Notifications API allows you to send notifications, but only when the application is running. To use this API within Angular, the following code can be used:
notify(tasks: Task[]) {
Notification.requestPermission(perm => {
if (perm === 'granted') {
window.navigator.serviceWorker.ready.then(reg => {
reg.showNotification(`You have ${tasks.length} tasks that are overdue`, {
icon: './assets/icons/icon-72x72.png' }); }); }} ); }
Running without JavaScript
Even when the application is available on the home screen, it is still bound by the rules of the web browser. So, when the JavaScript is disabled within the browser, the progressive web app won’t work either.
To solve that issue, you should add a proper message so your users know that the app won’t work without JavaScript.
By default, Angular CLI generates a <noscript>element within src/index.html, which can be customized as well.
Loading screen
Initially, when your application will be started, a splash screen will be shown, based on the colors defined within the src/manifest.json. The splash screen will be shown until all the sources are loaded. You can also add a progress bar to your application by adding HTML within the <app-root>element which can be found in src/index.html.
Final words:
Hopefully, the relative ease of building progressive web apps with Angular as demonstrated in this article will encourage more users to make their apps progressive. If you need help with mobile app development, feel free to get in touch with the experienced app developers at Enuke Software Pvt. Ltd. The professionals at Enuke promise to deliver cutting-edge mobile app development services in every industry. Having their fingers on the pulse of app development, the app developers at Enuke will shape your entire vision to be as profitable as possible.
Let’s discuss your ideas. Get in touch with us at – https://www.enukesoftware.com
