Interested in learning about Progressive Web Apps(PWAs)?
This guide will give you an overview of what PWAs are and how they can make your site better.
Imagine taking the best features from websites and native mobile apps and combining them. This is what Progressive Web Apps offer.
For example, native apps allow for easy access via a home screen or app icon. They also leverage the phone’s hardware such it’s camera or GPS with ease.
Web pages are easy to share via a link and there’s no annoying app to download from an app store.
PWAs share all of these features and more.
It’s safe to say that many users don’t like to install mobile apps on their phones. According to comScore, the majority of users (51%) do not install any new apps on a monthly basis.
Increased app storage requirements, weekly updates, and privacy concerns are all reasons why users are not downloading more apps.
PWAs help alleviate these issues.
Availability
As of iOS 11.3 update from March 2018, iOS users can enjoy most of the features that PWAs bring.
Unfortunately, some of the key features that are not available on iOS are: Push notifications, access to private data, Bluetooth, background sync or banner suggestion.
On Android, the Chrome browser supports all the main PWA features.
Microsoft Edge lists support for service workers and web app manifests as of version 17. Service Workers are just Javascript files that allow for some of the key features of Progressive Web Apps to work.
So, now that we have browser support out of the way, let’s take a look at some of the best features of PWAs.
No Need to Install
The idea here is that if you can add the app to your home screen, it will be easier to access it. Users will be more engaged as a result.
The key here is that different browsers behave differently. Let’s take a look at Chrome for Android and Safari for iOS.
Chrome for Android will allow for prompting a user to install the web app to their home screen only after the user has interacted at least 30 seconds with the site.
Before version 68, Chrome would show a banner prompting the user to install the app. After chrome 68 this banner is no longer shown and the site itself is required to indicate to the user that it can be installed to the home screen.
On iOS you can only install a PWA using Safari. You must use the add to home screen functionality.
Home Screen Icon
The home screen icon is one of the key selling points of Progressive Web Apps.
When users can access your site by tapping an icon on their home screen, it can really improve return visits.
There is no need to type in a URL or even access a bookmarks list. Just tap the icon and you and the app opens.
Keep in mind that this will most likely be a coveted position. Most users won’t accept home screen icons for just any site. Site owners will need to earn it.
To support this feature, you’ll need to include icons for your site of various sizes. They need to be referenced in your manifest file. This will let devices choose which one is right for them.
Native App Features
Making your site a Progressive Web App will will give your app the ability to access features normally found on native mobile apps.
For example:
Geolocation
Camera
Media Streaming
Accelerometer
Speech Recognition
And many more. To find out what web apps can do on your current browser, check out https://whatwebcando.today/.
As the web continues to evolve, we’ll see more and more features added to web site capabilities..
Save Bandwidth
Progressive Web Apps also make it possible to save site data on a device. This can greatly enhance user experience, especially for users that don’t have a strong wireless signal. Custom header colors and push notifications on most mobile browsers are additional benefits that PWAs provide.
Service Workers
As we mentioned, a Service Worker is basically a javascript file that defines certain features. They can be used to define what gets cached on the users browser so that it does not have to be repeatedly downloaded on every visit.
This includes checking for updates so that when content changes, PWA notices and makes a request to download the updates.
Offline Mode
Bad internet connections especially on mobile devices, can hinder user experience. Users may even blame your site for problems caused by mobile networks.
Caching commonly used resources can greatly enhance user experience on both low and high quality networks.
You can cache resources such as javascript, CSS and HTML files using the Cache API. Keep in mind that this API is not yet supported by all browsers.
There is another method for storing data called IndexedDB. This method is normally considered to be more complex to implement.
IndexedDB is supported by all browsers and generally preferred for storing more dynamic data.
However, if your site is simple enough, you could easily rely on the CacheAPI to handle your offline storage needs.
Secure
Security is required for a website to become a PWA. SSL certificates are mandatory.
This will ensure that all communications between client and server are encrypted.
Progressive Enhancement
Means that the core web page content is loaded first. Then as a user’s bandwidth allows, enhancements are downloaded and presented. This allows users with weak data connections to to view the main content without disruption.
Responsive
A responsive site is one that can be easily consumed from any device. This can be a mobile phone or desktop computer with a large LED monitor. Regardless of the device used, the content will be properly presented.
Push Notifications
If you’re not familiar with Push Notifications, check out our guide: What Are Push Notifications?
Push notifications can be controversial. Many users dislike them, calling them intrusive and distracting. With that said, if done right, they can be a great way to communicate with users.
You may think that push notifications are only for mobile apps, but with PWAs you can send push notifications to mobile, desktop and tablet users.
Most desktop browsers, including Safari, now support Web Push Notifications.
Unfortunately, iOS Safari still does not support the Web Push API. So the only way to send a push message to an iOS device is with a native app. Hopefully, Apple will add support for web push soon.
Reduce Costs – Build Once Deploy Anywhere?
While it is possible to deploy a PWA on Android and Microsoft Edge, iOS and Safari have issues.
iOS still does not support several features that allow access to OS functionality.
So, the idea that you can build once and deploy anywhere has not been fulfilled. Hopefully in the near future, Apple will add support for the necessary features.
Testing PWAs
When you have a PWA candidate, you can test it out using Google Lighthouse. This tool will inspect your site and point out any errors. It will also give you performance details and help you make your app faster.
Learn more about Lighthouse here.
Conclusion
Progressive Web Apps can be a great way to make your website more functional. Their ability to run on any platform can also save you development costs.
While full functionality is not supported across all browsers yet, over the last 2 years much progress has been made.
Apple seems to be lagging here. Hopefully they’ll catch up and make PWAs full featured on iOS Safari.