Downloaded 13 times
More Related Content
![[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...](https://cdn.slidesharecdn.com/ss_thumbnails/microfrontendsarchitectureedit-190410074045-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![Aeternity Blockchain - Ecosystem & Devtools [2019]](https://cdn.slidesharecdn.com/ss_thumbnails/aeternityprezentacjasilesian03-190320155135-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to PWA basics for developers
PWA basics for developers
- 1. Everything you shouldknow about PWA to start (as a developer)
- 2. Filip Rakowski Co-creator @Vue Storefront Frontend Developer @ Divante Author @ PWA.buzz filrakowski frakowski
- 3.
- 4. What you’ll learn 01 02 03 WhatProgressive Web Apps are? Short introduction to key features and ideas behind Progressive Web Apps Key technologies We will take a look at technologies used in Progressive Web Apps to achieve native-like and offline user experience. PWA checklist Hot to make your app a Progressive Web App. 4
- 5. What are PWAs? 5 Progressiveweb apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps. Mozilla MDN More information: https://developers.google.com/web/progressive-web-apps/
- 6. What is ProgressiveEnhancement? 6 Progressive enhancement is a development approach, not a technology choice. You as the developer, decide on a base level of user experience for your site or application, and more advanced functionality is added if a browser supports it. Shopify blog More information: https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/
- 7. Progressive Web appsare... 7 Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
- 8. Progressive Web appsare... 8 Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- 9. Progressive Web appsare... 9 Engaging - Feel like a natural app on the device, with an immersive user experience.
- 10.
- 11.
- 12. Service Worker 12 Asynchronous JavaScriptthat runs in a browser (on a different thread in opposite to your web apps single-threaded JavaScript) that can react to some events (like fetch, push) and works even when website (or browser) are closed. More information: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers app.js
- 13. Service Worker -request proxy 13 Service Worker is a kind of proxy for you requests. You can modify them in your SW (e.g. change the requested file name or serve it from cache instead of a server) before they are proceeded to the server. More information: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers service-worker.js
- 14. Why using aService Worker requires https? Browser is not aware of modified requests! Website Please give me index.html file Please give me notindex.html file Service Worker Server notindex.htmlnotindex.html but the website is not aware of it
- 15.
- 16. 16 In-browser database forstoring JSON-like data. Best for caching dynamic data (JSON) More information: https://developers.google.com/web/ilt/pwa/working-with-indexeddb IndexedDB
- 17. IndexedDB 17 IndexedDB API ishard to work with but there are solutions that abstracts it to easier format: Local Forage iDB ...many others
- 18. Cache Storage 18 Object-request /Object-response browser database for caching network requests. Best for caching static assets (HTML, CSS, JS) More information: https://developer.mozilla.org/en-US/docs/Web/API/Cache
- 19. Caching resources 19 Static files: -HTML - CSS - JS - Fonts/Icons (bad idea) Dynamic data - JSONs from server - Pending CUD operations Cache Storage IndexedDB
- 20. Typical use case- serving app from cache when user is offline 20
- 21. Typical use case- serving app from cache when user is offline 21
- 22. Other use cases 22 -Serve static assets from cache for faster page loads - Use cache as a fallback for failed network requests (or some of them)
- 23.
- 24. What is WebApp Manifest? 24 The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience. Mozilla MDN More information: https://developer.mozilla.org/en-US/docs/Web/Manifest
- 25. What is WebApp Manifest? 25
- 26. What is WebApp Manifest? 26
- 27. Native-like experience forWeb Apps 27
- 28. Push API andnotifications
- 29. Push notifications 29 Works exactlylike native OS push notifications and uses Push API. You can use them to engage your users (e.g. discounts) or send them important informations (like delayed flights). Push notifications can be sent from Service Worker so they don’t need opened website to deliver messages instantly. More information: https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications
- 30. How Push APIworks? 30
- 31.
- 32. What is BackgroundSync 32 Background sync is a new web API that lets you defer actions until the user has stable connectivity. This is useful for ensuring that whatever the user wants to send, is actually sent. Google Developers More information: https://developers.google.com/web/updates/2015/12/background-sync
- 33. What is BackgroundSync 33 Background sync allows you to provide real offline experience with all CRUD operations available offline (Read with cache / Create, Update, Delete with Background sync). You can also prefetch data periodically in the background so user don’t need to download it when entering the website (see periodic sync) For example: Like facebook/twitter post or place order on eCommerce shop while offline
- 34.
- 35.
- 36. 1. Cache yourApp Shell 36 Cache your App Shell (static assets) for instant loads and offline purposes. Use Cache Storage for this. Don’t forget to make use of cached files in your Service Worker. More information: https://developers.google.com/web/fundamentals/architecture/app-shell
- 37. 2. Cache dynamicdata from database 37 Cache dynamic data from server (mostly JSONs) and serve it from Cache Storage when user is offline (or choose different caching strategy). Use IndexedDB for this but keep in mind that it’s size is limited. At this point your App should work offline, congrats!
- 38. 3. Add WebApp Manifest 38 Create Web App Manifest file (manifest.json) and allow users to pin your app to their homescreens and use like a real Native App.
- 39. 4. Use backgroundsync for pending requests 39 Allow your users to perform Create, Update and Delete operations while offline with Background Sync.
- 40. Congrats! 40 Your app isa fully-featured PWA now! - Works like a native app (Web App Manifest) - Is accessible from users homescreen (Web App Manifest) - Loads insanely fast even on slow internet connection (Cache Storage, IndexedDB, Service Worker) - Shows cached content while user is offline (Service Worker) - Allows user to perform some actions without internet access) (Background Sync)
- 41. Possible additional enhancements 41 -Push Notifications - Payment Request API - Credentials API
- 42. Tools that canhelp you 42 Workbox Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build progressive web app's. See details Google Lighthouse Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more. See details
- 43. More resources aboutPWA 43 - Google Developers - Mozilla MDN - ServiceWorker.rs (great cookbook!) - PWA.buzz newsletter