Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PWA - Browser Applications


Published on

A Presentation I made in Plovdiv Conf 2019. Subtitles of it can be found here

Published in: Internet
  • Be the first to comment

  • Be the first to like this

PWA - Browser Applications

  1. 1. PWA Applications in the Browser Toma Velev
  2. 2. GUI Devs?
  3. 3. Evolution of Human - Technology Interaction
  4. 4. 20 Years Ago
  5. 5. 10 Years Ago
  6. 6. Today
  7. 7. PWA = Rich Application (HTML5) APIs in the Browser Service Worker (JavaScript) Outside of the Page Scope
  8. 8. PWA Progressive - The work outside of the Page Web - Accessible through every Browser Application - Many APIs and UX to feel more like App
  9. 9. Why choose PWA/HTML5
  10. 10. PWA = Best Practices for UX Speed Reliable Engaging Secure (only over HTTPS)
  11. 11. Above concrete proprietary technology
  12. 12. Speed - Minimize Code Obfuscation, code minimization SVG / CSS - Instead of Images whenever possible Browser Feature instead of library or coded personally
  13. 13. Speed - Load Incrementally (Visually)
  14. 14. Speed - Load Code Incrementally - Code Splitting <link rel="stylesheet" type="text/css" href="style.css"> <style type="text/css" > //some basic styling </style> var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'style.css'; head.appendChild(link); var jsScript = document.createElement('script'), s = document.scripts[0]; jsScript.src = 'jsScript.js'; s.parentNode.insertBefore(jsScript, s);
  15. 15. Normal JPEG vs Progressive JPEG
  16. 16. Speed Minimize Widget Creation (Android ListView Pattern) Angular 7 - Virtual Scroll
  17. 17. Speed - Minimize DOM Creation
  18. 18. Resources Location Application Server CDN On Your Device
  19. 19. Resource Loading - Speed Up HTTP Request Cache-Control Header SPA - Keep Browser Session Alive as long as possible Load them locally even when offline (from AppCache with Service Worker)
  20. 20. Reliable - Working even offline //Within the Browser Session window.navigator.onLine /true or false/; window.addEventListener('offline', function(event){ console.log("You lost connection."); }); window.addEventListener(‘online’, function(event){ console.log("You are now back online."); });
  21. 21. Reliable - Working even offline //Service Worker self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) ); });
  22. 22. Where to store stuff Back-End Cookie Local Storage WebSQL (Discontinued) IndexedDB App Cache (for resources) File System (Draft)
  23. 23. Beyond Simple Drawings Canvas (2D) WebGL - 2D, 3D
  24. 24. MEDIA DEVICES API (Draft) Accesses Users Input Devices (Microphone - Audio, Camera - Video) after Permission Grant. Stores it as byte array wrapped in an object let you do whatever (play/transform/send).
  25. 25. GPS Location getCurrentPossition() watchID = watchPosition() / clearWatch(watchID)
  26. 26. Websocket API Real - Time Communication between the browser and the server Used in Time-Critical Apps, Chats, Tools (BrowserSync)
  27. 27. Simplified VM designed for the Internet Age Executing code closer to native than (interpreted) JS Brings speed to calculation heavy use cases WASM (Compilation Target for higher level languages) “Lives” inside the JavaScript Sandbox Web Assembly
  28. 28. Background Work (W3C Draft) Background Fetch - order the work to be executed outside of the Page Scope Background Sync - PostPone work for when there is Internet Similar Restrictions as on the Mobile Platforms
  29. 29. Web Push (PWA)
  30. 30. Add to Home Screen Adds the Site to the list of Applications Removes the address bar if launched from the above shortcut Makes a Site Look And Feel more like Application
  31. 31. Permissions Very Much Like on Mobile Platforms
  32. 32. Same UX Permissions Best Practice Ask for functionality permission on first access fo feature! Not all on first page load!
  33. 33. Who uses it Facebook Twitter Tinder LinkedIn Photopea (PhotoShop-like App Online) Many more ...
  34. 34. PWA features on Site not designed to look like an app
  35. 35. CanIUseIt Check on Check it in the code and decide whatever happens: if ('serviceWorker' in navigator) { …... if (navigator.geolocation) { ...
  36. 36. PWA Integration You could do right now ● Add to Home Screen ● Cache until your app lives - offline: ● The external libraries ● Versioned (JS/CSS/Other) resources
  37. 37. Hack NASA with HTML - maybe not but you could probably do a lot
  38. 38. Demo 1 Demo 2
  39. 39. Questions?