Building a next generation web application

Building a web application that behaves like a mobile application, including the ability to function in areas with no network coverage, may sound like a fantasy, but with the latest advancements in web technologies it has become a reality. In this talk I will share my experiences and lessons learned while building a progressive web application that can be used in offline environments on any device.

In this talk you will learn what progressive web applications are, which characteristics make them behave and feel like mobile applications and and why we chose to develop one for our client. Our application has impacted the stakeholders so much that they are now moving away from native mobile applications to progressive web applications instead. I’ll show you how we created a truly offline-first web application by using modern web technologies such as Service Workers and IndexedDB. I’ll share some of the challenges we encountered with regards to the application’s performance and how we ensured our application performed at its most optimal regardless of the amount of data that was stored, what the network conditions were like, and what device it was running on. We’ll also have a look at the upcoming advancements in web technologies and how this will enable the development of next generation web applications.

Transcript

1. Building a next generation web application Madene Marais madene.marais@entelect.co.za @MadeneMarais
2. About Me
3. My Project Sales representatives need to place orders for fertilizer on their own devices while they are at customers on farms with poor network coverage. PROBLEM We are developing an application that is reliable in environments with poor network coverage and that can be used on any device or platform. SOLUTION Our client produces fertilizer on a large scale and their agronomic unit has extensive knowledge on farming practices. BUSINESS
4. “An innovative new way to create applications for mobile devices.”
5. “Apps that look and behave exactly like apps on a phone.”
6. “Just put them on an internet server. They’re also easy to update.” Steve Jobs
7. Progressive Web Apps A website built using modern web technologies, but acts and feels like a mobile app.
8. Live on the user's home screen, without the need for an app store. INSTALLABLE Characteristics Served via HTTPS to prevent snooping. SAFE Fit any screen size. RESPONSIVE Load instantly, even in uncertain network conditions. RELIABLE Make re-engagement easy through features like push notifications. ENGAGING Respond quickly to user interactions with silky smooth animations. FAST Progressive Web Apps have various characteristics that allow them to behave like mobile apps.
9. The application can be used on various devices, independent of operating system. MULTIPLE PLATFORMS Hiring and training people for web technologies is easier. FAMILIAR TECH The application needs to be reliable in areas with poor network coverage. OFFLINE CAPABILITES Lowers development and maintenance costs. SINGLE CODE BASE High level of performance across a variety of network conditions and devices. SPEED AND RELIABILITY A lot of the characteristics of PWAs made them a perfect fit for our project. Why a PWA? With the lifetime of the app, we need to cater for the possibility for future platforms. FUTURE SUPPORT
10. Offline-first A different way of thinking about web applications
11. Storing data offline Both static and dynamic resources need to be stored in order to provide a meaningful experience offline. Static content Network resources necessary to load your app while offline. Dynamic content Web content that changes based on the behavior, preferences, and interests of the user. Example: App Shell Example: News articles
12. Service Worker A script that your browser runs in the background, separate from a web page. Has the ability to intercept and handle network requests, and also respond to them in many ways. Allows users to opt-in to timely updates from their favourite sites and allows you to effectively re- engage them with customized, relevant content. PUSH NOTIFICATIONS By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users. CACHING Keeps the application up to date by talking to the server, even while the page is not open. BACKGROUND SYNC
13. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
14. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
15. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
16. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
17. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
18. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
19. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
20. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
21. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
22. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
23. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
24. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
25. Page Service Worker Network Cache Cache and Update Serve content from the cache while updating the cache with the latest info.
26. Caching Gotchas We encountered a few unexpected hurdles on our journey with service workers. Updating resources after building Updating config after building your app will not affect the revision of your resources and an old version of the file will be served by the service worker. Response Headers Headers are cached along with responses and will not update unless the resource’s URL changes. Application Updates The new version of your app will only be available after the new service worker has been activated.
27. IndexedDB A low-level API for client-side storage of significant amounts of structured data, including files/blobs. Event based operations are done asynchronously, so as not to block applications. ASYNCHRONOUS Uses indexes to enable high- performance searches of data. INDEXED SEARCHES Data is retrieved and updated within a series of transactions. TRANSACTIONAL
28. OFFLINE STRUCTURED DATA PERFORMANCE Why IndexedDB? IndexedDB met all of the following requirements we had for our project.
29. BROWSER LIMIT Chrome <6% of free disk space Firefox <10% of free disk space Safari (iOS) <50MB Safari (MAC) Unlimited IE10 <250MB Edge Dependent on volume size What about storage limits? The amount of data you can store differs depending on the browser.
30. Dynamic content with WebSockets Utilizing Web Sockets we were able to achieve an offline sync that was quick and used the minimal amount of data. Because the WebSocket is always connected to the server, we are always ready to send and receive data. FAST Using a push based mechanism we can be sure that we only ever send and receive a small amount of data. . LOW DATA USAGE Continuous connectivity means we can notify other users of changes on the server and give them near real time updates to changes. IMMEDIATE FEEDBACK
31. Background Sync In future we will also cater for scenarios where the user can get data synced while the website is in the background. Service Worker Sync The service worker will notify us when connectivity has been restored to perform a sync. Push Notifications The server can use the Push Notification API to wake up the device an initiate a sync when new data is available. Improved Reliability Using the above two mechanism you can be assured that all the data is always stored on the API and the user has immediate access to new data when opening the app.
32. Performance Achieving a high level of performance across a variety of network conditions and devices.
33. Web Workers A simple means for web content to run scripts in background threads, independently of other scripts. Background Thread The worker thread can perform tasks without interfering with the user interface and therefore does not affect the performance of the page. Shared Access Web workers can unify work between browser tabs and keep everything in sync. Support All modern browsers support dedicated web workers. Although, shared access workers are only supported in a few.
34. Angular Zones Due to the amount of data we were processing from the IndexedDB we had to manually perform work outside the Angular Zone to prevent the change detection from triggering for every record returned. External Request External requests are run outside of the Angular Zone. Change Detection Angular will run change detection every time a callback from an external request returns. Angular Zone
35. Virtual Scroll Display infinitely growing list of items in an efficient way. Displays a small amount of records just enough to fit the viewport and uses the same DOM elements as the user scrolls. . This method is effective because the number of DOM elements are always constant and small irrespective of the size of the list.
36. Our Architecture Let’s have a look at how all of this fits together in our app.
37. Web Worker (Database) Angular Zone Service Worker Network Cache IndexedDB Web Worker (Sync) Overview High level overview of what our architecture looks like.
38. Web Worker (Database) Angular Zone Service Worker Network Cache IndexedDB Web Worker (Sync) Database Queries Query user data stored locally in the IndexedDB. Creates, Updates, Deletes Query/Read
39. Web Worker (Database) Angular Zone Service Worker Network Cache IndexedDB Web Worker (Sync) Static Resources Get and cache static website resources like Javascript, HTML, CSS and images. GET Requests Static Resources Cached Requests
40. Web Worker (Database) Angular Zone Service Worker Network Cache IndexedDB Web Worker (Sync) Dynamic Resources Use web socket connection to keep IndexedDB up to date and to sync user data. Web Sockets Create, Read, Update, Delete Data change events
41. Tech Recap Let’s recap on the main points we have covered so far. A script that your browser runs in the background, that enhances your web app with offline capabilities. Service Worker A script that your browser runs in the background, that allows your app to do some work without affecting the user interface. Web Worker Structured storage that allows you to store dynamic data, enabling you to deliver fast and reliable user experiences. IndexedDB
42. Browser Support PWAs should work for every user, regardless of browser choice.
43. Browser Support SERVICE WORKER Chrome Firefox Safari Edge BACKROUND SYNC Chrome Firefox Safari Edge PUSH NOTIFICATIONS Chrome Firefox Safari Edge INDEXEDDB 2.0 Chrome Firefox Safari Edge WEB WORKER Chrome Firefox Safari Edge Browsers are gradually adding support for newer trends in web technology.
44. Browser Support SERVICE WORKER Chrome Firefox Safari Edge BACKROUND SYNC Chrome Firefox Safari Edge PUSH NOTIFICATIONS Chrome Firefox Safari Edge INDEXEDDB 2.0 Chrome Firefox Safari Edge WEB WORKER Chrome Firefox Safari Edge Browsers are gradually adding support for newer trends in web technology.
45. Browser Support BACKROUND SYNC Chrome Firefox Safari Edge PUSH NOTIFICATIONS Chrome Firefox Safari Edge INDEXEDDB 2.0 Chrome Firefox Safari Edge WEB WORKER Chrome Firefox Safari Edge Browsers are gradually adding support for newer trends in web technology. SERVICE WORKER Chrome Firefox Safari Edge
46. Browser Support BACKROUND SYNC Chrome Firefox Safari Edge PUSH NOTIFICATIONS Chrome Firefox Safari Edge INDEXEDDB 2.0 Chrome Firefox Safari Edge WEB WORKER Chrome Firefox Safari Edge Browsers are gradually adding support for newer trends in web technology. SERVICE WORKER Chrome Firefox Safari Edge
47. Browser Support BACKROUND SYNC Chrome Firefox Safari Edge PUSH NOTIFICATIONS Chrome Firefox Safari Edge INDEXEDDB 2.0 Chrome Firefox Safari Edge WEB WORKER Chrome Firefox Safari Edge Browsers are starting to support newer trends in web technology. SERVICE WORKER Chrome Firefox Safari Edge
48. Things to keep in mind Supporting various browsers has its challenges. Polyfills In some cases you can use a polyfill for features that are not supported by a browser to add consistency and functionality across browsers. Background sync Background sync is not supported by all browsers, so you’ll have to think of creative ways to achieve this. Graceful Fallbacks If a browser does not support a feature, you’ll have to make sure that it does not prevent your user from using the application.
49. The future Let’s have a look at the upcoming advancements in web technologies
50. App Store Support People have become used to looking for apps in app stores. For this reason companies like Google and Microsoft will start showing Progressive Web Apps in their app stores. Google Chrome 72 for Android shipped with a Trusted Web Activity feature, which means we can now distribute PWAs in the Google Play Store. Apple No official comments have been made by Apple yet about app store support, but they have pledged support for Safari. Microsoft Microsoft will allow manual submission of progressive web applications to the store. Bing will also automatically add apps that meet certain criteria. Native Progressive Web Apps can also be wrapped and packaged as native applications using tools like PWABuilder to publish to all app stores.
51. Improved Browser Support With all the major players pledging support for Progressive Web Apps, their browsers will keep on getting features that will improve the experience for everyone. Enables passwordless authentication and/or secure second-factor authentication without SMS texts. WebAuthn The streams API will allow JavaScript access to network resources as they are received from the server. Streams API More frameworks will start adding support to improve application performance using WebAssembly. WebAssembly Web Share, Payment Request, WebUSB, Shape Detection. These are all new API’s that might be added in future. And more WA
52. Native Capabilities As Progressive Web Apps grow in popularity they will get more access to the native API’s and capabilities currently reserved for native mobile applications. Allows you to give non- audible feedback to the user. Vibration Gives you access to the light intensity level measured by the device's light sensor. Ambient Light This will make you aware of the physical positioning of the device. Device Orientation Grants you access to the device camera for image capturing. Media Capture
53. “The key is to embrace disruption and change early. Don’t react to it decades later. You can’t fight innovation.” Ryan Kavanaugh
54. Feel free to contact me if you have any questions Madene Marais madene.marais@entelect.co.za @MadeneMarais