TechEvent Offline web applications don't exist anymore
Download as PPT, PDF0 likes26 views
This document discusses progressive web applications (PWAs) and how they can enable offline functionality. It explains that PWAs use service workers and caching to allow websites to work offline. Service workers act as proxies between the browser and network, running in the background to cache resources so that responses can be returned even without an internet connection. The document provides examples of how Angular and Firebase can be used to implement offline capabilities in web applications.
TechEvent Offline web applications don't exist anymore
- 1. BASLE BERN BRUGG DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. GENEVA HAMBURG COPENHAGEN LAUSANNE MUNICH STUTTGART VIENNA ZURICH Offline web applications don’t exist anymoreOffline web applications don’t exist anymore Francesco LeardiniFrancesco Leardini ConsultantConsultant @paco_ITA@paco_ITA
- 2. Once upon a time there was the downasaur… Offline web applications don’t exist anymore2 14.09.2018
- 3. ...and nowadays! Offline web applications don’t exist anymore3 14.09.2018 Branded offline pages Engaging pages
- 4. What is a Progressive Web Application (PWA) Offline web applications don’t exist anymore4 14.09.2018 A PWA is a web application whose goal is to behave and look like a native app •Installable: thanks to the web app manifest •Work offline: using service workers (sw) •Can send push notifications
- 5. Add to Home Screen Offline web applications don’t exist anymore5 14.09.2018 Web app install prompt From the second visit, the browser proposes to add the link on the home screen.
- 6. Web App Manifest (manifest.json) Offline web applications don’t exist anymore6 14.09.2018
- 7. How does a PWA makes websites available offline? 7 • is a component of JavaScript code • works as a proxy between the browser and the network • runs in the background on a separate thread (no blocking) • works only on secure connections (localhost is considered secure) service workerA : Offline web applications don’t exist anymore14.09.2018
- 8. Service worker chaching strategies 8 Offline web applications don’t exist anymore14.09.2018 Two main caching strategies for data resources: Performance If a resource exists in the cache, the cached version is used Freshness Only if the network times out, the request falls back to the cache
- 9. Service worker in action 9 The first time the app is accessed, the service worker stores the required resources in the browser cache. cache service worker.js When the user visits the app next time, the service worker checks the cache and returns the response to the user even before accessing the web server. Offline web applications don’t exist anymore14.09.2018 web server
- 10. How much can we store in cache? 10 Offline web applications don’t exist anymore14.09.2018
- 11. Service Workers in Angular 11 Offline web applications don’t exist anymore14.09.2018 With angular-cli (1.6+) we can easily turn an existing application into a PWA: Two new files will be created and added to our project: •ngsw-config.json •manifest.json
- 12. 13 PWA demoPWA demo Offline web applications don’t exist anymore14.09.2018
- 13. 14 Can we do better?Can we do better? Offline web applications don’t exist anymore14.09.2018
- 14. Firebase platform Offline web applications don’t exist anymore15 14.09.2018
- 15. Cloud Firestore Offline web applications don’t exist anymore16 14.09.2018 • Still in beta release (Oct 2017) • NoSQL Database • Real-time data updates (3-way binding) • Offline support for mobile (iOS/Android) and web
- 16. Enable offline data in Cloud Firebase Offline web applications don’t exist anymore17 14.09.2018 • A copy of the data used is cached locally and made available when the device is offline. • It is still possible to write, read and query the cached data. • Once back online, Cloud Firestore synchronizes local changes with the server DB.
- 17. Offline data limitations Offline web applications don’t exist anymore18 14.09.2018 • Max 500 offline transactions possible • Possible saving conflicts (last write wins)
- 18. 19 A «A «never offline»never offline» app demoapp demo Offline web applications don’t exist anymore14.09.2018
- 19. BASLE BERN BRUGG DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. GENEVA HAMBURG COPENHAGEN LAUSANNE MUNICH STUTTGART VIENNA ZURICH Questions?Questions?