Intro into PWA

Intro to Progressive Web Apps IWD Celebration – GDG Abu Dhabi – NYUAD | 9th March 2018

Overview Hi. We’re Mozilla, the proudly non-profit champions of the Internet, helping to keep it healthy, open and accessible to all. 2

Tweet at Us! #mozilla #moztechspeakers TAKE 3 MIN to Tell Us What you think! mzl.la/devsurvey 3

Me. Alaa Shaheen @FloweryCoder https://www.linkedin.com/in/alaashaheen1/ Email: alaa.shaheen2012@gmail.com Software Product Manager at Bilbareed.com Mozilla Tech Speaker 4

What is PWA ➔Web apps are the websites, that are using web technologies, and they have the capabilities to act like a mobile app. ➔Top level in task switcher ➔Top level in home screen ➔Top level in the notification tray 5

➔”A progressive web application is basically a website built using modern web technologies but acts and feels like a mobile app” 6

Why we need to go into Progressive web apps? ➔Recent studies shows that progressive web apps, increases business revenues and web stands for the companies. 7

Using the mobile apps,, ➔Needs to install app from the app store ➔Some apps are not available in our countries ➔Limited access to app stores ➔Users install or buy apps when buying phone, then less apps are being installed. 8

FlipKart ➔Largest online shopping site in India, called FlipKart, launched their light application using progressive web apps, and they found a huge increase in the number of visitors. ➔62% from the users accessed the website from 2G network. ➔Uses three times less mobile data to access the website and get the items they want. 9

Progressive Web Apps ➔Progressive: must work on any device and enhance progressively. ➔Discoverable: in search engines. ➔Linkable: should use the URI to indicate the current state of the application. ➔Responsive: must fit the device’s form factor and screen size. ➔App-like: like a native app and be built on the application shell model, with minimal page refreshes. 10

Progressive Web Apps ➔Connectivity-independent: low connectivity or offline. ➔Re-engageable: push notifications. ➔Installable: installed on the device’s home screen. ➔Fresh: new content should be made available in the app. ➔Safe: hosted over HTTPS to prevent man-in-the-middle attacks. 11

Progressive Web Apps ➔Connectivity-independent: low connectivity or offline. ➔Re-engageable: push notifications. ➔Installable: installed on the device’s home screen. ➔Fresh: new content should be made available in the app. ➔Safe: hosted over HTTPS to prevent man-in-the-middle attacks. 12

Characteristics: ➔Add to home ➔Splash Screen ➔App Shell 13

14

Technologies behind it? ➔Service Workers ➔Application Shell ➔Web App Manifest File 15

Service Workers ➔Web Apps are being built on top of: ◆Server ◆Client Service Worker sit between client and server to enhance network connectivity to the app. 16

Service Workers ➔a script, that your browser runs in the background. ➔handle http requests and push notifications. ➔cache all static resources. ➔can be used to display the application shell. ➔inform users that they are disconnected from the internet. 17

Code Example ➔Service Worker’s Life Cycle: ◆Register ◆Install ◆Activate ◆Fetch 18

Code Example ➔ Register the service worker in your app’s js file app.js 19

Code Example ➔An install event is triggered the first time a user visits the page. ➔the service worker is installed in the browser. ➔you can cache all the static assets in your web app. 20

Code Example 21

Code Example ➔Activate: This event is fired when the service worker starts up. ➔service worker updates its cache whenever any of the app shell files change. 22

Code Example 23

Code Example ➔Fetch: This event helps serve the app shell from the cache. ➔It then either responds with the cached version, or uses fetch to get a copy from the network. 24

Code Example 25

Web app Manifest File ➔It controls how your app should appear to the user in mobile phone. ➔Where to find the app in the phone and how to launch it. 26

Application Shell ➔Usually the app assembles the page content in one place. ➔App Shell, separates the content of the app that does not change often. ➔It helps to boot the app when it starts, and power the user interface of the web app. ➔It is written in HTML , CSS and JS. 27

Application Shell 28

App Shell ➔Service Worker can save locally the content of the app, and the application shell can load the main app interface. ➔App Shell , with caching mechanism and using the Service Workers, allows developers to focus on performance and speed. 29

Offline Mode Using PWA , developer can cache the App Shell, and load it offline, by saving content locally. 30

App Shell ➔Break design to main components: ◆Main design on the screen ◆Other UI components key to the app ◆Supporting resources to App Shell, JS , Styles , etc 31

App Shell ➔Should contain all the necessary resources to launch the app: ◆HTML ◆CSS ◆JS ◆Images 32

How to Add Data to the App? ➔We have three methods to display data to our PWA: ◆Server Side Rendering: fastest ◆Get Data Via Ajax Request: slowest method ◆Combination of server side and Ajax request: server inject data into the app JS. 33

●Eliminate the need for HTML request ●But we need JS to run the data ●We can cache data after loading for further use 34

Storage data ➔Local Storage: easiest , and available to everywhere, but the it is Synchronous and may cause bad performance. 35

Storage data ➔Cache: ◆Ready to use ◆Asynchronous ◆Fast ◆Not available to all browsers 36

Storage data ➔Indexed DB: ◆Fast ◆Asynchronous ◆Supported on all browsers ◆Check Mozilla develop website for more info. 37

Appendix

Resources MDN Web Docs https://developer.mozilla.org/en-US/Apps/Progressive/I ntroduction https://developer.mozilla.org/en-US/Apps/Progressive The Firefox Frontier https://blog.mozilla.org/firefox/progressive-web-apps-w hats-big-deal/ Auth0.com https://auth0.com/blog/introduction-to-progressive-app s-part-one/ Google Developers https://developers.google.com/web/progressive-web-app s/ 39

Thanks. Alaa Shaheen @FloweryCoder https://www.linkedin.com/in/alaashaheen1/ Email: alaa.shaheen2012@gmail.com Software Product Manager at Bilbareed.com Mozilla Tech Speaker 40

Q&A