The progressive web app uses new technologies to help enhance users’ experience on mobile devices. However, because it’s relatively new, many people may not know how to access or run them properly. This post will show you how to use progressive web apps on both desktop and mobile.
Contents
How To Use Progressive Web Apps On Desktops
Progressive web apps can work well on desktops and mobile devices such as phones or tablets.
First, let’s see the steps of using progressive web apps on the computer:
Add to home screen
“Add to home screen” is one of the most useful features of PWA. This is used to install the web on your computer.
To add a PWA to your home screen, access it on your web browser (Chrome is recommended). On the top right corner of the address bar, you will see the download icon (this icon is only available for PWA). Click on it and follow the instruction. After download, you’ll see the PWA icon on the computer’s screen.
After that, every time you want to access the PWA, you can click the icon on your computer’s screen.
If you want to remove the icon, it’s very easy. Open the PWA, click the “More” icon on the top right corner of the page, then click Uninstall. The PWA is now uninstalled from your computer.
Allow push notifications
PWAs allow web owners to send push notifications to users. However, users will decide whether they want to receive these notifications.
When you access the PWA the first time, there will be a pop-up message asking if you want to allow notifications on your desktop. If you want to receive those messages, click Allow. If you do not, click the Block button.
However, these push notifications keep you updated with the latest deals, promotions or discounts, or private programs for you on your birthday. Thus, you may not want to block all the alerts.
You can always change this setting in your PWA.
Benefits of PWAs on desktops
You may think that PWAs mostly benefit people using mobile phones. But, PWAs on desktops also have some advantages for users, including:
- PWAs load fast, both on computers and mobiles. Thus, this will enhance the overall user experience.
- Easy to install. You’ve seen that with just a few steps, you finish installing a PWA on your computer.
- Easy to update. Everything you have to do is refresh your progressive web app, just like refreshing a regular web page. Then you will have the latest version of the PWA.
How To Use Progressive Web Apps On Mobiles
Add to home screen
Android OS
It’s straightforward to install a PWA on Android devices.
Users will access the PWA, then see a pop-up message asking whether they want to add the PWA to their home screen. Choose Install and the PWA icon will be added to the mobile home screen almost instantly.
To remove, open Setting, click Apps & Notifications, click See all apps. Choose the PWA you want to remove and click Uninstall.
Iphones
For iOS users, it requires a few more steps to add a PWA to their devices. After accessing the PWA, tap the Share. Then choose the “Add to home screen”. Now the PWA is installed on your device.
Android devices allow users to interact with PWAs more easily. In the past, IOS devices block users from using PWAs. However, they are letting people enjoy more features of PWAs.
Receive push notifications
Android device users can opt to receive push notifications from PWA similarly like on desktops. They only need to allow it to send the notifications when first asked.
For iOS users, Apple has yet to support this feature of PWA. So, unfortunately, they won’t receive any notifications from PWAs.
However, there’s hope. Apple is gradually developing new versions that are more PWA-friendly. By version 11.3, Safari finally supports service workers. This will improve the chance that users can enjoy more benefits of PWAs in the future.
Benefits of PWAs on mobile devices
PWAs on mobile devices bring some benefits below:
- Mobile-friendly: PWAs perform well on mobiles. With its responsive design, regardless of the device that a person uses, the elements will be reorganized so that it remains easy to read and navigate.
- Lighter than native apps: A PWA usually takes up about 100-200KB of your data storage. It is much lighter than native apps, which usually need 50-150MB from your space. Thus, you do not have to free up your space to download PWA (for Android), and your phone can run much more quickly.
- Easy to update: PWAs on mobile devices are updated by refreshing the page. It may take less than three seconds.
- Offline mode: PWA allows users to work in offline mode. This can benefit especially those who need to work often in an unstable network environment or who need to move a lot. You can still work on PWAs and everything will be updated when the network is available.
Final Words
With this simple guidance, PWAs become closer to both web owners and users with this simple guidances. They are new but they are not difficult to use. On the other hand, they present some fantastic features of a new technology era.
If you have a web and want to transform your web into a progressive web app, it is better to let the professionals handle the case. You can save time and your PWAs are more customized and personalized.
Start your journey with PWAs by checking Tigren’s Progressive Web App development service. We have built many successful PWAs, and if you reach out to us today, the next one will be yours!
Read More:
How To Convert A Website To A Progressive Web App
Pros & Cons Of Progressive Web App Features
Things You Need To Know About Progressive Web App Architecture
