Progressive Web Apps

The Web has grown from sharing information as document to highly scalable application. With the introduction of Progressive web apps, we now have a whole new way to rethink and architect client applications across multiple platforms. The primary motive of a PWA is for it feel like a native app irrespective of the platform.

Transcript

1. <Title> Progressive Web Apps (The future of Web) Sai Kiran Sheshagiri Full stack developer
2. Sai Kiran Sheshagiri @saikiran78 in/saikiran78 Ø Full stack web developer @ Neudesic LLC Ø Specializes in .Net and NodeJS for Enterprise application development Ø MCTS in SharePoint Development and Administration Ø Cloud practitioner (Current focus) About Me
3. Agenda What is PWA? Tooling, Strategies & Patterns • Advantages of building a PWA • Web app manifest • Service Worker • App install banners • Background Sync • Push notifications Deep dive on how to build a PWA? • Tools for building a PWA • Strategies and patterns • Introduction to Progressive Web App • Overview of Web
4. Any web application that is utilizing the modern web API's to deliver an app (native) like experience to users flipkart.com opened in browser Icon added to Home Screen Look ‘n’ feel of the web app is like a mobile app 1/3 2/3 3/3 What is Progressive Web Apps (PWA)?
5. 5 Let’s begin from 90’s Web started as sharing documents and is now evolved as a singleplatform for business to provide their services Types of web applications - Single page application (Gmail), Online games, Video streams (Netflix), Screen Sharing, Video Conference and more
6. 6 Mobile – The leading medium Business now have to concentrate on providing services in another medium (i.e. Mobile platform) to maintain the user base and also provide continuous support to their users Web capabilities: Ø Responsive web design Ø more APIs (geo-location, audio-video capture, speech recognition etc..)
7. Web application in Mobile browser VS Mobile application (native) * Businesses do not have a choice, except to maintaining different application platforms like a web app (responsive web app), mobile app (iOS, Android)
8. Why don’t users like Mobile Web? Push Notifications Payment Services Offline capabilities “3-second rule of the web.” The theory is that you have about 3 seconds to capture a visitor’s attention. Longer than that and you’ll lose them. Some say it’s 4 seconds, and others say 2. The exact number doesn’t really matter, the point is that you have precious little time to capture and keep someone’s attention.
9. - GOAL is to maintain single reliable client application to provide business services without the over head of maintaining different applications (web app, iOS app, Android app), teams, code bases. How do we fix this gap between Mobile Web & Mobile App? Why not always use mobile application on mobile devices? - Convert the web site or web application to a Progressive Web App (PWA)
10. Characteristics of PWA Network Independent • Function without Internet connection Safe • Served only on HTTPS Discoverable • Browsers identify PWAs automatically Progressive, Responsive • User experience is enhanced gradually based on the browser’s capabilities. • Page looks good on different screen sizes Fresh • Always up-to-date Re-Engageable • Can bring users back to the app using, for example, Push Notifications Linkable • Can be shared around as plain URLs Installable, App-Like • Can be stored to the home screen just like native apps but without the extra hassle of the App Store • Look ’n’ feel of native application
11. The web app manifest is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user Web App Manifest
12. Capabilities allowed by Web App Manifest Network Independent • Function without Internet connection Safe • Served only on HTTPS Discoverable • Browsers identify PWAs automatically Progressive, Responsive • User experience is enhanced gradually based on the browser’s capabilities. • Page looks good on different screen sizes Fresh • Always up-to-date Re-Engageable • Can bring users back to the app using, for example, Push Notifications Linkable • Can be shared around as plain URLs Installable, App-Like • Can be stored to the home screen just like native apps but without the extra hassle of the App Store • Look ’n’ feel of native application
13. 1 3 Sample – Web app manifest More information – MDN and W3 Org
14. It's essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages. Service Workers
15. Capabilities allowed by Service Worker Network Independent • Function without Internet connection Safe • Served only on HTTPS Discoverable • Browsers identify PWAs automatically Progressive, Responsive • User experience is enhanced gradually based on the browser’s capabilities. • Page looks good on different screen sizes Fresh • Always up-to-date Re-Engageable • Can bring users back to the app using, for example, Push Notifications Linkable • Can be shared around as plain URLs Installable, App-Like • Can be stored to the home screen just like native apps but without the extra hassle of the App Store • Look ’n’ feel of native application
16. Registration of a service worker **service worker file should be at the root so as to cache all the files from the web application otherwise it will only have permissions to cache the files from the directory where it is created.
17. Life cycle of a Service Worker
18. sw-precache and sw-toolbox Workbox (successor for above tools) Tools & Strategies
19. 1 9 sw-precache Generate service worker code that handles all lifecycle events Service Worker Precache is a module for generating a service worker that precaches resources. It integrates with your build process. Generate service worker code that handles all lifecycle events
20. 2 0 sw-toolbox • Cache Only • Network Only • Cache, falling back to network • Network & Cache race • Network falling back to cache Service Worker Toolbox provides some simple helpers for use in creating your own service workers. Specifically, it provides common caching strategies for dynamic content, such as API calls, third-party resources, and large or infrequently used local resources that you don't want precached.
21. Pattern 1: Cache Only
22. Pattern 2: Network Only
23. Pattern 3: Cache, falling back to network
24. Pattern 4: Cache & Network race
25. Pattern 5: Network falling back to Cache
26. How to use these patterns with sw-toolbox? 1 2 3 4 5 Install sw-toolbox Register a resource (s) to a pattern Source: https://www.youtube.com/watch?v=NpVvQXEbs2M&t=317s (Jad Joubron Presenation)
27. Configuration file combining sw-precache & sw-toolbox Documentation: [sw-precache]: https://github.com/GoogleChromeLabs/sw-precache [sw-toolbox]: https://github.com/GoogleChromeLabs/sw-toolbox
28. App Install banners – Criteria 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 (a requirement for using service worker). Is visited at least twice, with at least five minutes between visits.
29. Push Notifications The Push API and Notification API open a whole new set of possibilities for you to re-engage with your users. Push and notification use different, but complementary, ‘push’ API is invoked when a server supplies information to a service worker A ’notification’ is the action of a service worker or web page script showing information to a user.
30. Background Sync Request a background sync Progressive enhancement (periodically sync the application) Source: https://www.youtube.com/watch?v=NpVvQXEbs2M&t=317s (Jad Joubron Presenation)
31. Lighthouse
32. Browser Support Source - https://jakearchibald.github.io/isserviceworkerready/
33. Slack Team: https://progressive-web-apps.slack.com Further reading App shell architecture Credentials API Payments API Labs and templates Workbox Lab PWA Angular (code by John Papa) PWA Starter Template (code by Jad Joubran) References Q & A
34. Conclusion Source -http://whatwebcando.today
35. Thank you