Since Google announced that their browser would support service workers and therefore progressive web apps, website owners have been given the option to develop offline websites, add push notification functionality to websites and in general have gained the possibility to create content for the web that looks and feels almost like a native mobile application.
While Google have attempted to narrow the gap between what users experience when visiting websites and navigate mobile applications, there are still some obvious differences. But overall, the search company have done quite well in creating a seamless integration between the two. Especially with regards to how the offline vs. online experience is perceived.
In the table below, we sideline some of the main features of websites, progressive web apps and mobile applications for a quick overview.
| Features | Website | Progressive Web App | Mobile App |
| Offline mode | NO | YES | YES |
| App Stores | NO | NO | YES |
| Responsive | YES | YES | YES |
| Indexable | YES | YES | NO |
| Add To Home Screen | NO | YES | NO |
| Push notifications | NO | YES | YES |
| Hardware access | LIMITED | LIMITED | FULL |
| Performance | FAIR | BEST | GOOD |
Assuming most readers already know of websites and mobile applications, let us examine the new features and lack thereof with regards to progressive web applications.
Offline Mode
It is possible, although not a requirement to develop a progressive web app that functions completely offline. How this is achieved is by using what is known as a service worker to serve the content.
Compared to a normal website where each click on a link asks the web server for new information, the progressive web app will first ask the service worker if there is internet access, and if not it will show cached data.
If there is internet it will work just like a normal website, downloading the latest content directly from the web server.
Image modified from Google showcase
This means that we can develop a progressive web app which saves all the website data onto the visitor’s devices and pulls that data instantly if there is no internet. It is also possible to simply display an offline error message that looks much nicer than the built-in ones that browsers show.
Opera’s offline error message
This is how a sample offline message can look. Compare this to the screenshot below of how Chrome looks once a user loses internet connection.
In the example of Opera, we are shown the standard navigation menu, the Opera logo and a customized message telling the users they are without internet access.
Default Chrome Offline Window.
Especially in countries where the majority of visitors browse from 2G or 3G networks, having offline messages or browsing functionality installed means that there’s the potential of retaining a larger number of users once they go through a tunnel on their daily commute, or when the 3G network is overloaded to name a few examples.
But even in developed countries with blazing internet, having an option for browsing offline opens up for new possibilities for website owners.
App Stores
A normal mobile application usually lives it life in Google Play and the App Store, sometimes also Windows App Stores and others. However with a progressive web app there are no submissions to these sites, meaning that website owners can develop updates and new content regularly without having to wait for approval.
It also means that users will not be able to search and find the progressive web app in the various app stores. Instead, progressive web apps are discovered via search engines such as Bing and Google, since they can be indexed and crawled just like a regular web page.
Depending on the type of app and other criteria, it might make more sense for your website or business to either develop a native mobile application, or use the new concepts and develop a progressive web app. There is not one right choice here.
Responsive
While not completely necessary, all of the progressive web apps we have reviewed have had a responsive design. In fact, most PWA’s have used design principles used in mobile applications, and have been built with UI frameworks developed for mobile developers.
This means that we can emulate the look and feel of a mobile app by simply designing a similar look and feel with HTML5, CSS and JavaScript. By making use of Google’s and Apple’s guidelines for design, it is possible to create a user experience that rivals mobile applications.
A natively built mobile app will run on the device as it was meant to be run, while a progressive web app will run in the browser. This however means that there are a few cross-browser dependencies to be aware of when developing a responsive design, compared to the straightforward methods of building native apps.
Indexable
Due to how a normal mobile app works, it is not possible for Google and other search engines to find individual tabs of content and show them in search results. This means that you can have quality content locked away in a mobile app, but the world cannot find that content specifically.
They would have to download the app in one of the app stores, and then tab around in the app, until they find the information they were looking for. With progressive web apps each individual page has its own link. Just like a normal website.
This means we can even SEO optimize for keywords, and it is important to use proper HTML formatting, such as <h1> tags, meta descriptions and regular website optimizations for the progressive web apps.
Add To Home Screen
Since it is not possible for users to find a progressive web app in traditional app stores, Google have come up with a new way to become aware of the PWA’s. Once a user visits a website with a progressive web app installed, they can be prompted by the browser automatically, to install the PWA to their home screen.
Screenshot showing “Add To Home Screen” feature in Google Chrome
If a user presses the blue button they will almost instantly get an icon on their home screen, which they can access just like a regular mobile application.
Instead of going to the app store and download it from there, once a user visits the website a local copy of the website content will be cached and stored automatically. And if the user adds to the home screen, they can access it as well.
Google has been doing some testing, and found that more than 11% of website visitors end up installing the progressive web app to their home screens on average.
Image from Google study
Push Notifications
Another exciting new feature is the fact that website owners can now also take advantage of push notifications, a feature that mobile apps previously had the monopoly on. This requires the user to install the PWA to their home screen and then accept the notifications.
Once this is done, website owners can create push notifications that go out to all installed PWA’s instantly. This could very well take over e-mail marketing during the next few years, as we have seen almost 60% of users installing progressive web apps, also accepting push notifications.
Image from Google study
Hardware Access
Since progressive web apps are limited by HTML5 hardware support, there are a number of features not available yet, possibly ever. Just what hardware features are supported varies from browser to browser, and every month more and more features are added.
Still, native mobile applications have full hardware API access and will in some cases be the only true choice for certain types of apps, depending on the desired functionality. While researching what hardware is available and what is not we came across this site, which appears to be slightly outdated, but so far has provided the best overview.
Performance
Because all cached content is saved to the phone, just like a mobile app, the performance will be excellent and almost load instantaneously when users relaunch the progressive web app at any given time.
Image from Google study
Google have been doing quite a bit of benchmarking and testing, and found so far an average of 22% load time improvements for mobile users, and 30% for desktop users, compared to websites without a progressive web app.
The improved page load times and page size decreases have in turn resulted in businesses experiencing lower bounce rates, and better conversion rates, as mentioned on Google’s showcase pages.
Conclusion
Progressive web applications can do a lot of the things mobile applications can do, however there are still good reasons for developing a native mobile app. Depending on the specific project in question, the question is no longer website or mobile app, but now website owners and business managers also have to consider progressive web apps as an option.
If Safari also begins supporting service workers, we can see this technology really kick off, but for now developing native mobile apps in combination with traditional websites seems to offer the best support for the largest amount of users.
