Unlocking the Power of Progressive Web Apps
The web platform has remained a hub of attraction for developers, product owners, and stakeholders due to its vast reach and universal access. Powerful web applications work seamlessly across various devices and operating systems. With the addition of Progressive Web App (PWA) capabilities, web apps can now offer offline access and other features previously exclusive to native platforms.
Bridging the Gap between Web and Native
Despite the progress made in PWAs since their introduction in 2015, there is still a long way to go. To bridge the gap between web and native capabilities, tech giants like Google, Microsoft, and Intel collaborated on the “Web Capabilities Project” or Project Fugu. The goal is to enable web apps to do everything native apps can do.
5 Exciting APIs to Supercharge Your PWAs
In this article, we’ll explore five innovative APIs from Project Fugu that can help you build full-featured PWAs.
Contact API: Simplifying User Interactions
The Contact API grants access to a user’s contact list, allowing for seamless interactions. Imagine building a web app that generates thoughtful messages for friends. With the Contact API, users can select contacts directly from the app, eliminating the need to copy and paste.
Key Features:
- Secure context access (HTTPS or localhost)
- Available on Chrome 80 and above, Android M (6.0.1) and above
- Built with security in mind to ensure user consent
- No bulk select or select all option
Web Share Target API: Enhancing Sharing Capabilities
The Web Share Target API enables installed PWAs to receive shared content, taking web sharing to the next level. This API allows users to share files alongside text, making it easier to share content.
Key Features:
- Allows installed PWAs to receive shared content
- Supports file sharing alongside text
- Requires registration in the manifest file
App Shortcuts API: Boosting Productivity
The App Shortcuts API provides quick access to common actions within a PWA, increasing user engagement and productivity. Long press an app icon, and a list of shortcuts will appear, similar to native apps.
Key Features:
- Available on Chrome 84 for Android and Chrome 85 for Windows
- Requires installation on the user’s device
- Triggered via platform-specific gestures (long press on Android, right-click on Windows)
Badging API: Visual Cues for Engagement
The Badging API allows PWAs to display visual cues, such as numbers or icons, indicating updates or notifications. This feature increases user engagement and encourages them to open the app.
Key Features:
- Currently works on Windows and macOS, Chrome 81, and Edge 84 or later
- Two methods:
navigator.setAppBadgeandnavigator.clearAppBadge
Screen Wake Lock API: Preventing Screen Dimming
The Screen Wake Lock API prevents screens from dimming or going to sleep, ensuring uninterrupted user experiences. This feature is particularly useful for apps that require passive engagement, such as virtual tours or presentations.
Key Features:
- Does not require user gestures to activate
- Releases the screen lock automatically when the page or window is minimized or switched from
- Can be reacquired using the
visibilitychangeevent
These five APIs from Project Fugu are revolutionizing the PWA landscape. By leveraging these innovative features, you can build more engaging, productive, and user-friendly PWAs that rival native apps. So, what are you waiting for? Start building something amazing today!