App-Like Characteristics
In many ways, Progressive Web Apps provide features and a user experience that users expect from native apps. We'll dive deep into the concept of a Web App Manifest, and add more metadata to our project to allow it to feel like a native app when launched from a mobile device home screen. We'll also look at how we can use web push notifications with our service worker!
-
App-Like CharacteristicsWelcome and Recap
We'll go through today's agenda, and recap what we've learned so far.
-
App-Like CharacteristicsMobile and Social Metadata
There are some easy ways that our app can become a "superhero", related to use on mobile devices and in "social situations" (social networks, sharing links on messaging apps, etc…). We'll dip into the topics of schema.org structured data, web application manifests, and mobile-specific meta tags to provide as rich and "app-like" an experience as possible.
-
App-Like CharacteristicsEXERCISE: Mobile Web, as an App!
Add a web app manifest, some meta tags and the add-to-homescreen Javascript library to our web app, so that it appears as close as possible to a native app. We should see our Lighthouse score jump up considerably as a result of this enhancement!
-
App-Like CharacteristicsPush Notifications
Unfortunately, the world of web push notifications is still quite fragmented. We'll look at the Apple, Google and Firefox notification APIs, and present some examples of unified services that can be used to deliver messages to users regardless of their chosen browser. We'll look at both "local" and "push" notifications, providing some optional exercises that developers of various developer programs can complete, to get some hands-on experience with the pertinent APIs.
-
App-Like CharacteristicsPayment Processing
The ability to accept secure one-touch payments via Apple Pay and Google Wallet is one of the most exciting new capabilities of progressive web applications. We'll look at the setup process required to get up and running, and provide some optional exercises that members of Apple and Google's respective developer programs can practice with using these payment APIs.
-
App-Like CharacteristicsBackground Tasks
Web Workers are available in all modern browsers and provide a foundation for doing some work in a separate thread. We'll explore the great potential that this capability offers, and outline some real-world use cases.
-
App-Like CharacteristicsEXERCISE: Background Processes
We'll use background processes in order to add a QR code reader to our app, where the heavy lifting is NOT done on the UI thread.
-
App-Like CharacteristicsLunch
Break for Lunch