PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB...

21
PROGRESSIVE WEB APPS CIS 601 Graduate Seminar Presentation 2 Name: Harinath Amasa CSU ID:2697292

Transcript of PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB...

Page 1: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

PROGRESSIVE WEB APPSCIS 601 Graduate Seminar Presentation 2

Name: Harinath AmasaCSU ID:2697292

Page 2: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

Contents

• Facts

• Progressive Web Apps

• Working

• Features

• Case studies

Page 3: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

Native Apps vs Mobile web

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

Page 4: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

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

Page 5: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to
Page 6: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

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.

Page 7: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

Progressive Web Apps properties

• Progressive

• Responsive

• Connectivity Independent

• App-like

• Fresh

• Safe

• Discoverable

• Re-engable

Page 8: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

How it works .. ??

Page 9: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to
Page 10: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

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

Page 11: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to
Page 12: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

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.

Page 13: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

Cache the App Shell

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

Page 14: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

Service Worker life

cycle

Page 15: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

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.

Page 16: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to
Page 17: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

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

Page 18: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to

Case studies

Page 19: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to
Page 20: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to
Page 21: PROGRESSIVE WEB APPS - Cleveland State Universityeecs.csuohio.edu/~sschung/CIS601/PROGRESSIVE WEB APPS.pdfProgressive Web App A progressive web app uses modern web capabilities to