Augmented Reality

What is Augmented Reality?

AR is one of the latest technologies in trending market and it’s only going to increase in popularity as AR-capable smartphones and other devices become more widely available. AR allows us to see the real-world environment right in front of us like trees swaying in the park, dogs chasing balls, children playing soccer with a digital augmentation overlaid on top of it.

Uses of Augmented Reality Technology in the real world

Augmented reality technology is used in gaming apps like Pokémon Go which was popular in 2016 very quickly among the young generation. In this game you need to locate and capture the Pokémon characters that shown in the real world in your living environment.

The following examples denote where augmented reality technology is been used in the mobile and smart games. (This is related to the Pokémon Go)

  • Augmented reality is used in enhanced navigation systems to superimpose a path over a live view of the lane.
  • Broadcasters use augmented reality (AR) to draw lines on the field during football games to explain and analyze plays.
  • IKEA, the Swedish furniture and homewares retailer, has developed an augmented reality (AR) app called IKEA Place that allows you to see how a piece of furniture would look and work in your room.

Why we need this Technology?

AR would become the latest human-machine interface, linking the digital and physical worlds. It enables new information dimensions which data can be easily structured, managed and delivered. AR enables people to process both the physical and digital nature at the same time, removing the need to mentally cross the gap. This enhances our ability to absorb knowledge quickly and correctly, make decisions, and complete tasks quickly and efficiently.

Key capabilities of the AR

The following key capabilities are available in AR technology when using in the real-world environment.

  • Visualizing
  •  Instructions and guidance in simulators
  • Interact
  • Enhancing human decision making
  • Can be combined with another technology like Virtual reality.

AR Strategy

AR’s rising success, as well as its potential as a human interface for SCP technologies, poses some new strategic questions. Although the answers will vary depending on the business and circumstances of each company, AR will become an increasingly important part of every company’s strategy.

References

  • https://hbr.org/2017/11/why-every-organization-needs-an-augmented-reality-strategy
  • https://www.fi.edu/what-is-augmented-reality

Angular PWA install and configure

What is a PWA?

A progressive web application (PWA) is web-based application software built with HTML, CSS and JavaScript. It is intended to work on all platforms that use a standards-compliant browser.

Internally, a PWA uses the service worker browser API to provide access to certain native features. Also Cache storage is a really good feature that helps to drastically improve the page’s loading time.

A PWA needs to be :

Progressive

Work for all users, regardless of browser choice, as they are built with progressive enhancement as a basic principle.

App-like Use the app shell model to provide app-style navigation and interactions.

Installable

Let users “keep” apps that they think are most useful on their home screen without the hassle of an app store.

Responsive

it should look good on any form factor (desktop, mobile, tablet, or anything next).

Offline usability

deliver a work experience, regardless of network connection.

Fresh

Always up-to-date thanks to the service worker update process.

Safe

Served via HTTPS to prevent snooping and ensure content has not been tampered with.

Discoverable

Can be identified as “applications” thanks to W3C manifest and service scope registration scope so that search engines can find them.

Re-engageable

Makes it easier to re-engage through features like push notifications.

Linkable

Share easily via URL and do not require complex installation.

BUT…

· IOS support from version 11.3 onwards
· Greater use of the device battery
· Not all devices support the full range of PWA features
· It is not possible to establish a strong re-engagement for iOS users
· Limited access to some hardware components of the devices

Getting Started

Follow the steps below to create a PWA in Angular.

  1. Create an Angular application
  2. Add @angular/pwa package
  3. Understand the files added/modified by @angular/pwa package
  4. Run the application locally

 1. Create an Angular application

  • We are creating an angular project using angular CLI.
    • ng new angular-pwa-test
  • The above command will create a scaffold angular application inside the angular-pwa-test folder.
  • Navigate to the angular-pwa-test folder and open VSCode.
    • cd angular-pwa-test && code

2. Add @angular/pwa package

  • Now we’re going to add the @angular/pwa package.
    • ng add @angular/pwa
  • The above command will add and modify several files.

3. Understand added / modified files by @angular/pwa package

  • It adds different png files for different splash images for different resolutions.
  • icon-128×128.png, icon-144×144.png, icon-152×152.png, icon-192×192.png, icon-384×384.png, icon-512×512.png.
  • Additionally, it adds ngsw-config.json and manifest.webmanifest for configuration purposes.
  • Also, it modifies angular.json, package.json, index.html and app.module.ts
  • Changes in index.html and package.json are pretty straight forward. Let’s take a quick look at the files changes by CLI.
ngsw-config.json
  • This file is the Angular Service Worker itself, like all service workers, it passes a separate HTTP request so the browser can track whether it has changed and applied to the service worker lifecycle.
manifest.webmanifest
  • It basically contains the look of the PWA application when it is opened. Here you can set options like default screen icon, display background color, etc.
angular.json
  • Added src/manifest.webmanifest file under assets, so that it will be served with the site.
  • That links ngswConfigPath and serviceWorker enabling the production configuration in build schematics.
app.module.ts
  • app.module.ts Used to import ServiceWorkerModule For registration ngsw-config.js (For production mode only)

4. Run the application locally.

  • Note: PWA works only on https and localhost environment.
  • Angular CLI is restricted because service worker does not work with ng serve command. Therefor you need to build and host separately, possibly using http-server.

If you run ng serve command, you can see our project will build and run without any issue, but you can’t see any PWA functions.

  1. Run ng build –prod command. It will create files under dist/angular-pwa-test folder
  2. Navigate to that folder using cd dist/angular-pwa-test
  3. Run npm i -g http-server command
  4. Open from web browser
  • · We can create a script to do this process easily. Just open a terminal and run npm run start-pwa-app command.
    • “start-pwa-app”: “ng build –prod && http-server -p 8080 -c-1 dist/angular-pwa”
  • · Now you can see that the PWA app is running on http://localhost:8080 .
  • · The next time that you reload the browser, all the assets should be loaded from the service worker offline cache.
  • · This means that we load all the resources for the first time, but then all the resources will come from the cache storage.
  • · Now open the developer console and navigate to Application > Service Workers. You can see there is a service worker file ngsw-worker.js installed for http://localhost:8080