Nearly 5.20 billion people are using the phone, usage of mobile phones is increasing day by day. Users are spending more time on the app than the web. It is time to convert your web app to a PWA app to give the user a native feeling. But, the question is how to make your PWA app more useful? This article will provide you a few tips to make your progressive web app more useful.
PWA app gives us the capability to create an offline app that runs on the device browser yet gives the feeling of a native app. Add to the home screen (A2HS) is the latest feature in all the latest browsers that allow the user to install the app. It adds a shortcut to the home screen. We can access the web app with a single tap.
1. Use offline capability
When a user is offline he won't be able to see the webpage. But using PWA we can show a custom page with an offline message. But if you use your device storage and syncing mechanism you can give the user an almost online experience. Now think of a scenario. Let say you created an app that collects records. The user has to go to different locations and collect data. But it may be possible that all those locations do not have internet. In that state, the user can not use the app. He then uses a notebook & pen and writes all the data. Once he is within network coverage he enters the record into the app. This limits the app's capability. Also, there is a chance of error because there is a manual process involved.
We can use the offline capability of PWA and give the user an almost online experience. First of all, whenever the device is offline, instead of showing a no connection page, show a fallback page and allow user to enter the data using the form. Once user submit the record, save it to the device memory. Once phone get internet connectivity, send all the saved records to the server and clear the occupied memory. Similalry app can store limited records to device memroy. For example: If you are creating a news website, it is better to store the latest fetched data todevice memory. Limit the no of records you store in the memory. Once user goes offline, get the data from device memory and show it to user. Once user comes online, get the data from server show the latest data to user and replace data in the device memory with the new data. The app must cache data to its internal storage. We can always cache the latest data and discard old data. Now we have data to show the user. When the user wants to collect new records he can open the app and enter the data and save it. Data will be saved in device storage instead of a database. Once the device comes online, takeout all the offline recorded data and send it to the server. The server saves the data to the database. The server sends back the success status to the app, app discards the locally saved data. This all happens in the background without the user noticing anything. Similarly, we can take all the latest data from the database and store it in the device memory. Once the device goes offline, we have data in device memory to show. Now instead of showing an offline page, we can show data saved in the device to the user.
2. Use memory wisely
Use device memory intelligently. We can use 'estimate' in navigator.storage to find the quota and usage of the memory.
let {quota, usage} = navigator.storage.estimate();
Now we can calculate the usage in percentage and alert the user if the device running out of memory.
let memoUsagePercent = (usage/quota) * 100;
We can also calculate the usage in unit Mb.
let usageInMb = usage/(1024*1024);
3. Provide a custom in-app install flow
Alert the user that your PWA is installable, and provide a button or other element to start the in-app installation flow.
window.addEventListener("beforeinstallprompt", function(e) {
// log the platforms provided as options in an install prompt
console.log(e.platforms); // e.g., ["web", "android", "windows"]
e.userChoice.then(function(choiceResult) {
console.log(choiceResult.outcome); // either "accepted" or "dismissed"
}, handleError);
});
4. User Permissions
Do not ask the user's permission for using the microphone or camera immediately after the app is installed. It is better to ask for user permission only when they try to use that feature.
5. Use Chrome Lighthouse tool to optimize your app
Google Lighthouse is a free tool that provides powerful insights to help improve the PWA. By generating a Lighthouse report, you can assess any web page's page experience and access valuable tips to improve its performance. It measures the sites on dirrerent parament and provide a performance report. Make sure your performance report is in green and your app score more than 90%.
5. Use Push Notification wisely
Push notification is a great way to engage user, however sending unnecessary information can make user feel like getting spammed. Make sure you provide important information only though push notification. Your message should be crisp and clear. It should add value to user experience.
0 Comments