5 Features to Enhance your Progressive Web App
Today we will try & understand what PWAs are?
We will also talk about some features that can enhance your PWA's user experience.
Let's dive into it.
The advent of smartphones back in 2008, brought with it a slew of new features such as push notifications, geolocation, camera, & offline mode, and websites were nothing more than a platform to view information. However, websites today are quite powerful, and progressive web apps features are indistinguishable from native mobile apps.
When the dot com revolution began, Microsoft’s Internet Explorer powered the world wide web and it wasn’t possible to access any in-device features. Fast forward to today, things are completely different. Websites now are as powerful as native apps and many consider it to be even better when it comes to performance & reach. Let’s talk about a few features that will make your PWA as good as a native app. Or even better.
Related: Why make Progressive Web Apps?
Best Progressive Web Apps Features
Just like native apps, PWA’s can be installed on your mobile device. This allows you to put an app icon on the screen, while also adding a shortcut to that app. Every progressive web app has a Manifest.json file, which contains metadata about the app such as the name and the icons. Native devices use this information to install the application. However, the users might not directly want to go directly to the home screen, every time they tap the app icon.
Shortcuts give you an option to reach a popular screen with the app and the shortcut feature is quite easy to implement as well. In the Manifest file, add a shortcuts array and then add some data about each shortcut you want to add like a name, icon, or link. That’s all it takes to integrate your PWA with this feature.
In HTML, we have a button that when clicked will bring up the user’s contact list and it’s all JS from there. It will require specifying the exact attributes we want to access from the user’s contacts.
Now, we will write an Async function called getContacts and if the feature is supported, we’ll get the contacts by awaiting a call to navigator.contact.select along with the properties we desire to view. This will prompt the user to grant access to their contacts. A pretty simple way to enhance your progressive web apps’ features.
Geolocation & Device Motion
Many mobile app features rely on the device’s geolocation and movement. You might be aware of the fact that PWAs can easily access a device’s GPS via the geolocation API because most websites implement this feature when they ask you to allows access to your current location.
For instance; calling get current position tells us about the latitude and longitude location of a particular device. That’s not all though. You can also access device sensors. It provides you information about its acceleration & rotation.
Accessing this data is quite easy and one that will help to enhance your progressive web apps features and feel more native. To access the motion data, all you have to do is addeventlistener on the devicemotion event. When the device owner is in motion in the physical world, this event will come into play multiple times in a second. We can then use a callback function to make calculations with this data and update the UI.
Quick tip: When using the device Geolocation & Motion features, enable the sensors option in Chrome Dev Tools.
Bluetooth and other External Devices
What if your app needs external devices such as Bluetooth, USB, or NFC to operate?
Well, before progressive web apps features were available or not so popular, you had to build an iOS or Android-specific app and each with a dedicated codebase. Today, you can opt for progressive web app development and reach users with a single codebase, while exporting external device action.
Implementing this feature is useful if your PWA is related to for example health & fitness and you require heart rate monitoring or a travel app that needs a location.
IDLE status detection
One of the most important progressive web apps features to implement is IDLE detection. Why is it so important? Well, consider a scenario where you are working from home due to the COVID-19 pandemic and you are using Google Meet. Now, if you are taking a break and the app is unable to figure out if you are idle, it will keep showing you online and make your co-workers believe that you are available. That can lead to confusion at work.
The IDLE detection API can allow you to get rid of this issue. It tells you whether the user has been idle for a certain amount of time or if the screen is locked. When the status goes to idle, you update the database like Firestore, so everyone else in the Google Meet app knows that a user is offline. Quite a useful progressive web app feature.
Are you working on the next big PWA and looking for some of the best progressive web app developers in Canada to implement these and other useful progressive web apps features, get in touch with InvoZone.