PROGRESSIVE WEB APPS & EDUCATION

Transcription

1 PROGRESSIVE WEB APPS & EDUCATION How Developers Can Build Web Sites With Native App User Experience and the Natural Advantages the Web Offers Businesses and Customers

2 CHRIS LOVE

3 CHRIS SpartanObstacles.com NormalFatGuy.com

4 Slide URL slideshare Source Code RESOURCES

5 PWA BEGINNER TO EXPERT PWACourse.com Over 21 Hours of Video + Resources $29

6 PWA DEVELOPMENT BY EXAMPLE 3 Example PWAs What a PWA is How to Quickly Upgrade Service Worker Life Cycle Basic Service Worker Caching Advanced Service Worker Caching Web Performance Best Practices Tools to Help Create a PWA

7 THE MODERN WEB WHAT IS A PROGRESSIVE WEB APP?

8 "A new way to deliver amazing user experiences on the web

9 This new level of quality allows Progressive Web Apps to earn a place on the user's home screen

10 FAST RELIABLE INTEGRATED ENGAGING Responds Quickly To User Works Online Offline Poor Connectivity User Should not Realize It is a Browser Immersive User Experience

11 Progressive Web Applications: A New Level of Thinking About the Quality of Your User Experience CHRIS WILSON Chrome

12 These apps aren t packaged & deployed through stores, they re just websites that took the right vitamins. They progressively become apps ALEX RUSSEL Chrome

13 Native Apps are a bridging technology (like Flash) BRUCE LAWSON Former Head Opera

14 PWAs should be able to progressively enhance to full-fledged apps JACOB ROSSI Microsoft

15 PAUL THURROTT Technology Journalist This apps platform is a perfect storm of the right ideas at the right time, a spiritual combination of the crossplatform dreams for Java and the pervasive nature and openness of the web.

16 ITS ABOUT WHAT CUSTOMERS STUDENTS/FACULTY WANT Work Offline Appear on Home Screen Push Notifications

17 5 BARS!

18 1 BAR

19 NO BARS

20 LiFi :/

21 Apps Must Handle Offline

22 PWA LEGACY TECH UPGRADES AppCache -> Service Worker localstorage -> IndexDB Touch Icons -> Manifest Save to Homescreen -> Install Banner

23 Build Better Web Apps than Facebook 23

24 MOBILE WEB VS. APP USAGE 13% 87% Source: comscore Mobile Metrix June 2015 US Age 18+

25 80% OF TIME SPENT IS IN USERS TOP 3 APPS Source: comscore Mobile Metrix June 2015 US Age 18+

26 80% OF TIME SPENT IS IN USERS TOP 3 APPS Source: comscore Mobile Metrix June 2015 US Age 18+

27 WE HAVE PASSED PEAK APP

28 NUMBER OF APPS AN AVERAGE USER INSTALLS PER MONTH Source: comscore Mobile Metrix June 2015 US Age 18+

29 ALEX RUSSEL Chrome We ve got pretty strong data from native app ecosystems that users don t use many apps, uninstall heavily, and in general find installation frustrating and taxing...most users won t install most PWAs most of the time, and that s fine.

30

31

32 JEREMY KEITH I worry that the messaging around progressive web apps is perhaps overfetishising the home screen. I don t think that s the real battleground. The real battleground is in people s heads; how they perceive the web and how they perceive native.

33 Native Apps Capabilities HTML5 Reach

34

35 WHY PWA FOR EDUCATION Students Come from a diverse background and use a diverse range of devices

36 an industry that caters primarily to the most tech savvy and likely impatient consumers, mobile optimization and adoption in the marketing of higher education is crucial. JESSICA KRYWOSA

37 WHY PWA FOR EDUCATION Education software is expensive (and from what I can tell outdated)

38 PWA DEEP DIVE THE WEB MANIFEST

39 WEB MANIFEST JSON Document Creating a manifest and linking it to your page are straightforward processes Describes Your App Control what the user sees when launching from the home screen Reference in HEAD Progressive Enhancement. Ignored by legacy browsers and only downloaded when needed.

40 ADD TO HOMESCREEN Has a web app manifest file with: a short_name (used on the home screen) a name (used in the banner) a 144x144 png icon a start_url that loads Has a service worker registered on your site. Is served over HTTPS (. Is visited at least twice, with at least five minutes between visits.

41 SERVICE WORKER INTRODUCTION TO SERVICE WORKER

42 A VIRTUAL ASSISTANT FOR YOUR WEB SITE A service worker is a script that your browser runs in the background Manages Tasks & Features That Don t Require User Interaction Frees Up the UI Thread for UI Stuff

43 SERVICE WORKER Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled. It's terminated when not in use, and restarted when it's next needed Persistence Done With IndexDB Can t Communicate with DOM Directly

44 SERVICE WORKER FETCH

45 FETCH Replaces XMLHttpRequest Uses Promises Polyfil Available for Legacy Browsers Full Support for Modern Browsers IE 11 & Old Android Need Polyfil Headers, Request, Response Objects

46 var myimage = document.queryselector('img'); fetch('flowers.jpg').then(function(response) { return response.blob(); }).then(function(myblob) { var objecturl = URL.createObjectURL(myBlob); myimage.src = objecturl; });

47 fetch('flowers.jpg').then(function(response) { if(response.ok) { response.blob().then(function(myblob) { var objecturl = URL.createObjectURL(myBlob); myimage.src = objecturl; }); } else { console.log('network response was not ok.'); } }).catch(function(error) { console.log('there has been a problem with your fetch operation: ' + error.message); });

48 var form = new FormData(document.getElementById('login-form )); fetch("/login", { method: "POST", body: form });

49 self.addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.url); event.respondwith( caches.match(event.request).then(function(response) { if (response) { console.log('found response in cache:', response); return response; } console.log('no response found in cache. About to fetch from network...'); return fetch(event.request).then(function(response) { console.log('response from network is:', response); return response; }).catch(function(error) { console.error('fetching failed:', error); throw error; }); }) ); });

50 SERVICE WORKER LIFE CYCLE

51

52 REGISTRATION if ('serviceworker' in navigator) { navigator.serviceworker.register('/sw.js').then(function(registration) { // Registration was successful }).catch(function(err) { // registration failed :( }); }

53 INSTALL self.addeventlistener('install', function (e) { //do something });

54 ACTIVATE self.addeventlistener('activate', function (event) { console.log('service Worker activating.'); });

55 ACTIVATE self.addeventlistener('install', function (e) { e.waituntil( })); self.skipwaiting(); });

56 SERVICE WORKER THE PROXY SERVER IN YOUR POCKET

57 CLASSIC WEB CLIENT-SERVER Web Page Web Server

58 ADD SERVICE WORKER Web Page Web Server Service Worker

59 Web Page Web Server Service Worker

60 Web Page Web Server Service Worker IndexDB Cache