Progressive web applications (PWAs): What, Why and How

Progressive web applications (PWAs): What, Why and How

What is Progressive web applications (PWAs)? Why Should You Care? How Does a PWA Make Websites Available Offline? All will be in this article

In the last few years, there has been exponential growth in the number of mobile phone users. Today, more than 60% of total internet usage is happening via mobile phone.

Obviously, the reasons include portability, cheap hardware, easy access to the internet, and the increased number of services on the internet. With more users on mobile, the optimization of user experience on the phone is essential.

For smaller companies, which often do not have native apps due to cost or time constraints, the web app is the key opportunity for winning customers by providing the best possible experience.

If companies have a dedicated native-mobile app, there’s a possibility many users will still prefer their web version in order to avoid downloading and installing an app on their phone. This could be due to hardware and memory constraints or some other personal preference.

If a company is dedicated and wants to get the maximum number of engaged customers, the experience of the web app has to be close to that of the native app.

Nowadays, the expectation from our websites is very high. Almost 25 years ago when the website was invented, its purpose was mostly to share information.

Today, the website is a grocery shop, social network, chatting place, etc. The website is expected to search for houses and hold the world map. The website is expected to give all the features of PowerPoint and Excel.

Meet Progressive Web Applications

Let’s take the example of WhatsApp on your phone. When there’s no network, you can still open the app, check past messages, and even reply to someone. When the phone gets the internet connection, the messages are being automatically sent in the background.

This is what PWA promises to provide in web apps. It enables web apps to load when there is no network, sync in the background, and seamlessly do things while providing a native-like experience for your users.

Why We Need PWAs, and What Are Their features?

Let’s discuss some of the core attributes that are missing from common nonprogressive web applications.

  1. Reliable The app should be lightning fast when loading — it should be close to instantaneous and should also open when there is no network or a fairly low-speed network like 2G. Google found that 53% of the users abandon the website if the page took longer than three seconds to load.
  2. Fast The scrolls and page transitions should be buttery smooth when the user is interacting with the web app. Everyone hates crappy scrolls.
  3. Responsive The app should fit in all the different sizes of devices. The perfect web app should be like liquid, which takes the shape of its vessel.
  4. Installable If we want to make web apps closer to the native apps, they have to be installable and should reside in the home screen along with other native apps so the user can access the PWA in one click.
  5. Splash screen
    PWAs adds a splash screen during the startup of the app. This makes the PWA feel more like a native app.
  6. Highly engageable The app should keep the users engaged. A PWA provides features like push notifications, a home-screen icon, full-screen capabilities, and an offline-first app to glorify user engagement.

All the above characteristics are possible in PWAs.

A PWA is just a regular web app which attended the best university and mastered user experience.

PWA and Modern UI Frameworks

Few people think a PWA is coupled with the latest UI frameworks like React.js, Angular 6, or Vue.js.

Well, not necessarily.

PWA has nothing to do with the framework you’re using — it only needs the required components.

How Does a PWA Make Websites Available Offline?

This was exactly my first thought when it came to PWAs. How exactly can web apps open without the internet?

We all know native apps can open without an internet connection because when we download and install them, critical resources like UI components and some data are stored in the device. Well, this is exactly what happens in a PWA as well.

The PWA stores HTML files, CSS files, and images in the browser cache, and the developers can fully control the network call. All of these are being achieved by service workers.

What Are the Technical components of a PWA?

PWAs have some important technical components that work together and energize the regular web app. The following components are required to develop a good PWA.

Let’s get an overview of each of them.

Service worker

Our web apps talk to the network directly, and if there is no network, the screen shows the famous dinosaur.

Here’s an opportunity to optimize this process. For the first-time load, the service worker stores the required resources in the browser cache. And when the user visits the app next time, the service workers check the cache and return the response to the user before even checking the network.

A_service worker_ is just a component of JavaScript code that works as a proxy between the browser and the network. A service worker manages the push notifications and helps to build the offline-first web application using the browser’s cache API.

This can speed up the performance of your app, whether the device is connected or not connected to the internet.

The developer has full control over the behavior of the app and how it should respond in various scenarios. The service worker has its own life-cycle events.

Once the caching is complete and ready for offline visits, you can also choose to brag about it by displaying a note saying that caching is complete and the user can visit this offline as well.

The manifest file

The manifest file is a config JSON file that contains the information of your application, like the icon to be displayed on the home screen when installed, the short name of the application, the background color, and the theme.

If the manifest file is present, the Chrome browser will automatically trigger the web app to install the banner. If the user agrees, this adds the icon to the home screen, and the PWA is installed. Isn’t this bossy?

The following is the sample manifest file:

{
  "short_name": "Spinner",
  "name": "Fidget spinner",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/home/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/home/",
  "theme_color": "#3367D6"
}

Check the manifest file in action in the following screenshots.

HTTPS

Service workers have the ability to intercept the network requests and can modify the responses. Service workers perform all the actions on the client side. Hence, PWAs requires secure protocol HTTPS.

The service worker has the ability to receive push notifications and background sync, which definitely increases the user experience and keeps the customer engaged. Push notifications and background sync are optional but are recommended to provide a more native-like experience.

Demo Time

Today, there are many PWAs available out there. If you want to play around with a PWA and want to see service workers in action, visit fidgetspin.xyz, and switch to the Application tab in Chrome’s DevTools.

  1. Status: Tells us that the service worker is activated and running.
  2. Offline: By checking this option, Chrome treats the app is if it’s offline. Refresh the tab, and it’ll emulate how the PWA will respond when there’s no network. You can also switch off the WiFi or data to test the PWA.
  3. Cache: This section shows what files are stored in the cache by the service worker.
  4. Push & Sync: These sections are used during development to test push notification and background sync.

You can visit https://pwa.rocks/, which has a good collection of PWA apps.

Tools and Libraries

There are few open-source tools available that enhance and make it easy to develop PWAs.

  1. Lighthouseis an audit tool that can run against any web page, public or personal, and generates one report with the checklist required for a PWA. This can be used during the development of your PWA to crosscheck and get recommendations to further improve the experience.
  2. Workboxis a collection of libraries, open sourced by Google, and can be used to generate the service-worker file. Workbox also comes along with various caching strategies of images and other resources.
Success Stories of PWAs

Google publishes the success stories of companies that have implemented PWAs. Visit this page to read more about how companies have solved problems to handle slow networks, how they optimized the user experience, and how they got up to an 80% increase in conversions and SEO performance.

This showcases various problems faced by various companies around the globe and how they solved it using PWAs. I’m pretty sure you’ll get directions on how a PWA can prove helpful for you as well.

Building a simple PWA with Service Workers

Building a simple PWA with Service Workers

Building a simple PWA with Service Workers, Push Notifications and Offline capabilities. A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync.

Building a simple PWA with Service Workers, Push Notifications and Offline capabilities.

How to Build Progressive Web Apps (PWA) using Angular 9

How to Build Progressive Web Apps (PWA) using Angular 9

In this Angular 9 PWA tutorial, we will use the most recent version of Angular 9 to build a Progressive Web Application (PWA) that works on mobile or any platform that uses a standard-compliant browser. Creating Progressive Web Apps Using Angular 9. How to convert the existing angular application to PWA? How to Add PWA features in an angular application? How to work with Service Workers? How to configure the add-to-home-screen feature using web manifest file? How to audit the PWA app with Google’s Lighthouse extension?

In this tutorial, we will use the most recent version of Angular 9 to build a Progressive Web Application (PWA) that works on mobile or any platform that uses a standard-compliant browser.

What is PWA?

A progressive web app offers the high level of user experience because it has the same features as native apps have. Nowadays, PWA has become the big deal, and more companies are switching towards the Progressive web applications (PWA).

PWA does not require to be deployed via app stores; instead, we take a slightly different approach and deploy it through the web servers through URLs. To make the same PWA as the native apps, we have to fulfill the following requirements.

Responsive

Runs on almost every device desktop, mobile, or tablet.

Auto-Updated

Service worker keeps it always updated.

Secure

Content is considered to be safe due to serving through HTTPS.

Reliably Connected

Service workers support to make it work offline and on sparse networks.

Progressive

Web app that employs modern web capabilities to produce an app-like experience for every user.

Searchable

Very much searchable via search engines due to web app manifest.

Shareable

It does not require to be downloaded can easily be shared via a simple link or URL.

User Experience

Similar user experience by engaging the same interaction methodology as a native app has.

Installable

Fully installable on users’ mobile home screen, and the good thing is we do not have to visit the app store.

Regularly Communicate

Keeps you up to date via push notifications and offers you the latest updates, promotion offers, etc.

Table of Contents:

  • Configuring & Installing Angular Application
  • Adding Angular Material Library
  • Build & Consume REST API using HttpClient
  • Adding PWA in Angular 8/9
  • Service Workers in Angular
  • Configure Production Build with http-server
  • Audit PWA App with Lighthouse
  • Conclusion
Configuring & Installing Angular Application

In this step, we will configure the Angular project for giving you the demo of Angular PWA.

First, you make sure that you have the latest version of Node.js and NPM configured on your system.

node -v

# v10.16.0

Follow this URL to download and install Node & NPM.

Now, we are going to begin with installing the latest version of Angular CLI on your system.

npm install -g @angular/[email protected]

Run the following command to install an Angular app:

ng new angular-pwa

Get inside the project directory:

cd angular-pwa
Adding Angular Material Design UI Library

Adding a Material design library in Angular is very easy, It can be done by using just a single command. Run the following command from your terminal.

ng add @angular/material

Add the material theme in src/styles.css file.

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

Ordinarily, we import the angular material components in the AppModule. But there is a slight twist. We are going to create a separate module file for material components and import the components here and then import the material component file inside the main AppModule file.

This is the process I highly recommend for managing the material components in an organized way. We will show the users data into the angular material table, Create app/material.module.ts file add the following code inside of it.

import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule, MatToolbarModule } from '@angular/material';

@NgModule({
    imports: [
        MatTableModule,
        MatPaginatorModule,
        MatToolbarModule
    ],
    exports: [
        MatTableModule,
        MatPaginatorModule,
        MatToolbarModule
    ]
})

export class MaterialModule { }

Next, import MaterialModule module in the main app.module.ts file as given below.

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/* angular material */
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule { }
Build & Consume REST API using HttpClient

In this step, create angular service to fetch the data from the remote server using an open-source REST API.

To make the HTTP requests we need to import and register HttpClientModule service in app.module.ts file.

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
   ]
})

Let’s generate a service. In here, we will write the logic to fetch the users’ data with the help of JSONPlaceholder API, run the following command.

ng g service rest-api

Next, open the app/rest-api.service.ts file and add the following code in it:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

export interface User {
  id: string;
  name: string;
  email: string;
  website: string;
}

@Injectable({
  providedIn: 'root'
})

export class RestApiService {
  api: string = "https://jsonplaceholder.typicode.com/users";

  constructor(private http: HttpClient) { }

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.api)
  }
}

We are fetching the User data using the HttpClient service as an Observable via getUsers() method.

Next, open the app/app.component.ts file and add the given below code:

import { Component, ViewChild } from '@angular/core';
import { RestApiService } from './rest-api.service';
import { MatPaginator, MatTableDataSource } from '@angular/material';

export interface TableElement {
  id: string;
  name: string;
  email: string;
  website: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  Data: TableElement[];
  col: string[] = ['id', 'name', 'email', 'website'];
  dataSource = new MatTableDataSource<TableElement>(this.Data);
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

  constructor(private restApiService: RestApiService) {
    this.restApiService.getUsers().subscribe((res) => {
      this.dataSource = new MatTableDataSource<TableElement>(res);
      setTimeout(() => {
        this.dataSource.paginator = this.paginator;
      }, 0);
    })
  }

}

We imported the RestApiService in AppComponent to fetch and display the user data. We are using Angular Material table UI component to display the data. We can manipulate the item’s size using the angular material pagination module.

Build the PWA app UI using the angular material table, go to the app.component.html file to create the layout. Our layout will have the material navbar and a data table with pagination.

<mat-toolbar color="accent" class="header">
  <span>Angular PWA Example</span>
</mat-toolbar>

<table mat-table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID. </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
    <td mat-cell *matCellDef="let element"> {{element.email}} </td>
  </ng-container>

  <ng-container matColumnDef="website">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Website </th>
    <td mat-cell *matCellDef="let element"> {{element.website}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="col"></tr>
  <tr mat-row *matRowDef="let row; columns: col;"></tr>
</table>

<mat-paginator [pageSizeOptions]="[7, 14, 28]" showFirstLastButtons></mat-paginator>

Adding PWA in Angular 8/9

It is undoubtedly very easy to convert an existing angular application into a Progressive Web App (PWA). The “ng add angular pwa” command can make your dreams come true.

ng add @angular/pwa

The above command automatically add PWA files and features inside an Angular app:

  • The manifest.webmanifest file
  • The ngsw-config.json service worker
  • Varying sizes of icons inside the assets/icons directory

The “index.html” file has been updated and added the following meta tag and theme colour attribute.

  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#1976d2">

Please make sure and add few PWA compliant icon assets.

Service Workers in Angular

A Service Worker is a script that works in the background and gets along with almost every modern browsers.

Service Workers work with HTTPS and works in the same manner as Web Workers does but a bit adversely. Progressive Web Application considers service workers as the primary technology. It allows deep platform integration, such as offline support, background sync, rich caching, and push notifications.

The “ng add angular pwa” command generated the ngsw-config.json file, It is solely responsible for service workers. Service workers are also automatically added to app.module.ts file.

// app.module.ts

import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [...],
  imports: [
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [...],
  bootstrap: [...],
  schemas: [...]
})

export class AppModule { }

Have a look at the ngsw-config.json file.

// ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

The “ng add angular pwa” command also registered the service-worker inside the package.json file:

// package.json

{
  "dependencies": {
    ...
    "@angular/service-worker": "~8.2.14"
    ...
  }
}

The feature will only work with the app, which is being served with HTTPS.

Configure Production Build with http-server

Install the http-server package globally via NPM using the following command.

sudo npm install -g http-server

The http-server is a simple, zero-configuration command-line http server. It is powerful enough for production usage, but it’s simple and hackable enough to be used for testing, local development, and learning.
http-server

Run ng build prod command to build the app for production environment.

ng build --prod

Now, we have the production build ready at the dist/angular-pwa folder. Next, we will serve the angular PWA using the http-server package.

Get inside the prod build folder.

cd dist/angular-pwa

Start the prod build
Next, run the following command in your terminal.

http-server -o

The above command will open the angular app on the following URL http://127.0.0.1:8080 and also give you the following URLs, you can check your app by entering one of the URL in the browser’s address bar.

Available on:
http://127.0.0.1:8080
http://192.168.0.102:8080

Audit PWA App with Lighthouse

Now, we will verify the PWA application using Lighthouse extension on the Google Chrome browser. Add the following URL on the browser’s address bar: http://127.0.0.1:8080

Install the lighthouse extension from chrome web store.

Next, open the browser console by using the Ctrl + Shift + I.

Conclusion

Finally, we have completed the Angular 9 PWA tutorial with an example. In this tutorial, we have got a chance to do the cover the following topics:

  • How to convert the existing angular application to PWA?
  • How to Add PWA features in an angular application?
  • How to work with Service Workers?
  • How to configure the add-to-home-screen feature using web manifest file?
  • How to audit the PWA app with Google’s Lighthouse extension?

Download the full code of this tutorial from this GitHub repository, I hope you will like this tutorial. Happy Coding!

A Beginner's Guide To Progressive Web Apps

A Beginner's Guide To Progressive Web Apps

In this Progressive Web Apps (PWA) tutorial, you'll understand what a PWA is, why should You care? Why build native when you can build a progressive web app? Progressive web applications are a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. They are intended to work on any platform that uses a standards-compliant browser.

Progressive web applications (PWAs) are a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. They are intended to work on any platform that uses a standards-compliant browser.

WebKit, the tech underlying Safari and Mobile Safari, has recently (Aug 2017) declared that they’ve started working on introducing Service Workers into the browser. This means that soon they will land in iOS devices as well. So the Progressive Web Apps concept will likely be applicable to iPhones and iPads, if Apple decides to encourage this approach.

It’s not a groundbreaking new technology, but rather a new term that identifies a bundle of techniques that have the goal of creating a better experience for web-based apps.

What is a Progressive Web App

A Progressive Web App is an app that can provide additional features based on what the device supports, providing offline capability, push notifications, an almost native app look and speed, and local caching of resources.

This technique was originally introduced by Google in 2015, and proves to bring many advantages to both the developer and the users.

Developers have access to building almost-first-class applications using a web stack. This is always considerably easier and cheaper than building native applications, especially when considering the implications of building and maintaining cross-platform apps.

Devs can benefit from a reduced installation friction, and at a time when having an app in the store does not actually bring anything in terms of discoverability for 99,99% of the apps, Google search can provide the same benefits if not more.

A Progressive Web App is a website which is developed with certain technologies that make the mobile experience much more pleasant than a normal mobile-optimized website. It almost feels like working on a native app, as it offers the following features:

  • Offline support
  • Loads fast
  • Is secure
  • Is capable of emitting push notifications
  • Has an immersive, full-screen user experience without the URL bar

Mobile platforms (Android at the time of writing, but it’s not technically limited to that) offer increasing support for Progressive Web Apps. They even ask the user to add the app to the home screen when that user visits such a site.

But first, a little clarification on the name. Progressive Web App can be a confusing term, and a good definition is: web apps that take advantage of modern browsers features (like web workers and the web app manifest) to let their mobile devices “upgrade” the app to the role of a first-class citizen app.

Progressive Web Apps alternatives

How does a PWA stand compared to the alternatives when it comes to building a mobile experience?

Let’s focus on the pros and cons of each, and let’s see where PWAs are a good fit.

Native Mobile Apps

Native mobile apps are the most obvious way to build a mobile app. Objective-C or Swift on iOS, Java /Kotlin on Android and C# on Windows Phone.

Each platform has its own UI and UX conventions, and the native widgets provide the experience that the user expects. They can be deployed and distributed through the platform App Store.

The main pain point with native apps is that cross-platform development requires learning, mastering and keeping up to date with many different methodologies and best practices. If, for example, you have a small team or you’re a solo developer building an app on 3 platforms, you need to spend a lot of time learning the technology and environment. You’ll also spend a lot of time managing different libraries and using different workflows (for example, iCloud only works on iOS devices — there’s no Android version).

Hybrid Apps

Hybrid applications are built using Web Technologies, but are deployed to the App Store. In the middle sits a framework or some way to package the application so it’s possible to send it for review to the traditional App Store.

Some of the most common platforms are Phonegap and Ionic Framework, among many others, and usually what you see on the page is a WebView that essentially loads a local website.

The key aspect of Hybrid Apps is the write once, run anywhere concept. The different platform code is generated at build time, and you’re building apps using JavaScript, HTML and CSS, which is amazing. The device capabilities (microphone, camera, network, gps…) are exposed through JavaScript APIs.

The bad part of building hybrid apps is that, unless you do a great job, you might settle on providing a common denominator. This effectively creates an app that’s sub-optimal on all platforms because the app is ignoring the platform-specific human-computer interaction guidelines.

Also, performance for complex views might suffer.

Apps built with React Native

React Native exposes the native controls of the mobile device through a JavaScript API, but you’re effectively creating a native application, not embedding a website inside a WebView.

Their motto, to distinguish this approach from hybrid apps, is learn once, write anywhere. This means that the approach is the same across platforms, but you’re going to create completely separate apps in order to provide a great experience on each platform.

Performance is comparable to native apps, since what you build is essentially a native app which is distributed through the App Store.

Progressive Web Apps features

In the last section, you saw the main competitors of Progressive Web Apps. So how do PWAs stand compared to them, and what are their main features?

Remember — currently, Progressive Web Apps are for Android devices only.

Features

Progressive Web Apps have one thing that separates them completely from the above approaches: they are not deployed to the app store.

This is a key advantage. The app store is beneficial if you have the reach and luck to be featured, which can make your app go viral. But unless you’re in the top 0.001% you’re not going to get much benefit from having your little place on the App Store.

Progressive Web Apps are discoverable using Search Engines, and when a user gets to your site that has PWAs capabilities, the browser in combination with the device asks the user if they want to install the app to the home screen. This is huge, because regular SEO can apply to your PWA, leading to much less reliance on paid acquisition.

Not being in the App Store means you don’t need Apple’s or Google’s approval to be in the users pockets. You can release updates when you want, without having to go through the standard approval process which is typical of iOS apps.

PWAs are basically HTML5 applications/responsive websites on steroids, with some key technologies that were recently introduced to make some of the key features possible. If you remember, the original iPhone came without the option to develop native apps. Developers were told to develop HTML5 mobile apps that could be installed to the home screen, but the tech back then was not ready for this.

Progressive Web Apps run offline.

The use of service workers allow the app to always have fresh content, which can be downloaded in the background, and to provide support for push notifications, which offer greater re-engagement opportunities.

Also, sharability makes for a much nicer experience for users that want to share your app, as they just need a URL.

Benefits

So why should users and developers care about Progressive Web Apps?

  1. PWA are lighter. Native Apps can weigh 200MB or more, while a PWA could be in the range of the KBs.
  2. There’s no native platform code
  3. The cost of acquisition is lower (it’s much more difficult to convince a user to install an app than to visit a website to get the first-time experience)
  4. Significantly less effort is needed to build and release updates
  5. They have much more support for deep links than regular app-store apps
Core concepts
  • Responsive: the UI adapts to the device screen size
  • App-like feel: it doesn’t feel like a website but rather like an app (as much as possible)
  • Offline support: it will use the device storage to provide an offline experience
  • Installable: the device browser prompts the user to install your app
  • Re-engaging: push notifications help users re-discover your app once installed
  • Discoverable: search engines and SEO optimization can provide a lot more users than the app store
  • Fresh: the app updates itself and the content once it’s online
  • Safe: it uses HTTPS
  • Progressive: it will work on any device, even older one, even if it has fewer features (e.g. just as a website, not installable)
  • Linkable: it’s easy to point to it using URLs
Service Workers

Part of the Progressive Web App definition is that it must work offline.

Since the thing that allows the web app to work offline is the Service Worker, this implies that Service Workers are a mandatory part of a Progressive Web App.

WARNING: Service Workers are currently only supported by Chrome (Desktop and Android), Firefox, and Opera. See http://caniuse.com/#feat=serviceworkers for updated data on the support.

TIP: Don’t confuse Service Workers with Web Workers. They are a completely different thing.

A Service Worker is a JavaScript file that acts as a middleman between the web app and the network. Because of this it can provide cache services, speed the app rendering, and improve the user experience.

For security reasons, only HTTPS sites can make use of Service Workers, and this is part of the reason why a Progressive Web App must be served through HTTPS.

The App Manifest

The App Manifest is a JSON file that you can use to provide the device information about your Progressive Web App.

You add a link to the manifest in every header on each page of your web site:

<link rel="manifest" href="/manifest.webmanifest">

This file will tell the device how to set:

  • The name and short name of the app
  • The icons’ locations, in various sizes
  • The starting URL, relative to the domain
  • The default orientation
  • The splash screen

Example

{ 
  "name": "The Weather App", 
  "short_name": "Weather", 
  "description": "Progressive Web App Example", 
  "icons": [{
    "src": "images/icons/icon-128x128.png",
    "sizes": "128x128",
    "type": "image/png" 
  }, { 
    "src": "images/icons/icon-144x144.png",
    "sizes": "144x144", 
    "type": "image/png" 
  }, { 
    "src": "images/icons/icon-152x152.png",
    "sizes": "152x152", 
    "type": "image/png" 
  }, { 
    "src": "images/icons/icon-192x192.png",
    "sizes": "192x192", 
    "type": "image/png" 
  }, { 
    "src": "images/icons/icon-256x256.png", 
    "sizes": "256x256", 
    "type": "image/png" 
  }], 
  "start_url": "/index.html?utm_source=app_manifest", 
  "orientation": "portrait", 
  "display": "standalone", 
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2" 
}