PROGRESSIVE WEB APPSCIS 601 Graduate Seminar Presentation 2

Name: Harinath AmasaCSU ID:2697292

Contents

• Facts

• Progressive Web Apps

• Working

• Features

• Case studies

Native Apps vs Mobile web

Do you use web version of Google Maps on your phone or App?

Native Apps Advantages• Great performance

• Smooth animations and interactions

• Instant loading and offline support

• Easy access through home screen

• Push notifications

Disadvantages• Memory

• Updating is a pain

• Application size

Progressive Web App

A progressive web app uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, leveraging the web's low friction.

As the user progressively builds a relationship with the App over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen and loads as a top-level, full screen experience.

Progressive Web Apps properties

• Progressive

• Responsive

• Connectivity Independent

• App-like

• Fresh

• Safe

• Discoverable

• Re-engable

How it works .. ??

WEB APP MANIFEST

The Manifest for Web applications is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the device home screen), direct what the user can launch and more importantly how they can launch it

Service Worker

• A service worker is a script that runs in the background, separate from your web page. It responds to events, including network requests made from pages it serves.

Cache the App Shell

A Service worker can use the Cache API to cache the app’s shell

Service Worker life

cycle

PUSH NOTIFICATIONS FOR RE-ENGAGEMENT

Push notifications allow your users to opt-in to timely updates from sites they love and allow you to effectively reengage them with customized, engaging content.

https://samplenews-5dd53.firebaseapp.com

Case studies