Progressive Web Apps: A Great Mobile App Alternative6 min read
April 22, 2016For those who look at this and wonder, what a Progressive Web App (PWA) is, here is the definition from Google:
Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the App over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen and loads as top-level, full screen experience.
Before we look at this any further, let quick go over the layer of technology behind this called a “Service Worker” that works at the network level. Unlike traditional web code, a service worker will continue to run even when you are no longer on the website, waiting for either a command from your phone/computer, or a command from your network connection. This command will then trigger the service worker to run the relevant feature that is enabled on that Progressive Web App.
That is great and all, but what does that actually entail, and what are the benefits right?
Security
First off, using a PWA requires that the domain is served via HTTPS to prevent network snooping, and ensure that the content has not been tampered with. An obvious importance to this is for the use of push notifications. It would be a serious concern if another person could either get your notifications to your information, or if they could even intercept the data and then override it with their own custom notification with malicious content. So to stop this from even becoming a possibility, a secure HTTPS is required for all Progressive Web Apps, and the service worker will not even load correctly if that security is not implemented.
App-Like Features
The most obvious feature may be native web based push notifications. If you use Facebook enough, you likely have already seen this. Awhile back now, the Facebook website requested permissions to deliver notifications to your computer/phone, while not using the official Facebook App. This technology, if you enabled permissions to it, allows the remote server to send out important information directly to your device in the form of a notification. On a desktop it will appear in the corner of your screen, while on mobile it will appear in the tray with your other notifications. And as stated before, the service worker does all this at the network level, so your browser can be closed and still receive important updates. This is a great feature, as it helps to remove the line that separates native apps from web apps.
Another benefit the service worker is the ability to cache resource for offline usage, which used to be a limitation of web based tools. Through the code, each asset which needs to be available offline can be defined, and then the technology will take care of it all behind the scenes. When working this way, the items typically cached are the “frame” of the site, such as the functionality and interface. The content is most often not cached, since that is the information that is being dynamically loaded, and should always stay fresh.
There are other benefits to traditional apps though right, like being able to place it on your home screen? This is not a problem, as PWAs can also place icons to your app on your home screen. This can work across mobile devices and even on your desktop computer as well, so you are not limited to how you or your uses chooses to use your app. Chrome, on your behalf, will even ask a user, who is continuously coming back to your app if they would like to add an icon to their home-screen to make it more accessible to them!
Other Thoughts
Since PWAs are built on the standard functionality of a website, with extra features added in, anything that you would expect a website is able to accomplish already, will also be just as easily implemented by the app as well. Many have already chosen to forgo the need for an app, and just use their web-presence to present the tools, functionality, and content. However, due to the rise of PWAs, and the service workers that control them, an app with all the expected functionality can be created, without sacrificing features, or large amounts time to implement them.
There is really only one current drawback to using this method, and it is that not all the major browsers support the technology yet, only about half. Here is the current list of browser support. http://caniuse.com/#feat=serviceworkers While not all browsers support it, the majority of the half that do not are considering and researching the implementation of it. This means, that even if it were to be used now, once those browsers to update to support it, the app will work for them right away, with all the features as intended.
To sum up the benefits, this overview information from Google explains the benefits of a Progressive Web App:
- Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
- Responsive – Fit any form factor: desktop, mobile, tablet, or whatever is next.
- Connectivity independent – Enhanced with service workers to work offline or on low quality networks.
- App-like – Feel like an app to the user with app-style interactions and navigation because it’s built on the app shell model.
- Fresh – Always up-to-date thanks to the service worker update process.
- Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
- Discoverable – Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
- Re-engageable – Make re-engagement easy through features like push notifications.
- Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
- Linkable – Easily share via URL and not require complex installation.
Get Started
Looking to get started on your next app, and interested in implementing it as a PWA? Reach out to us to get a conversation started!