Progressive Web Apps isn’t a Google-only thing
Progressive Web Apps isn’t a technology, but a terminology which describes rich website in a way of quality and ability to progress as an application to user’s device.
Today, most people know about iOS’s “Add to Home Screen”. It has been there since iOS was introduced, it worked then and works now (some times not so much ;-)). Even though it still works, nothing good happens with it for years, only new bugs appeared.
Yet, nobody cares and cared back then that you lost the URL bar when using it. iOS literally reinvented the native apps and since then, everyone wanted to have apps. This isn’t bad, this is what mobile devices are about.
Anyone can add a website to the home screen on iOS, but the browser won’t prompt you to do so, and you have to do it manually using a button inside the share menu. But, as with Progressive Web Apps, the idea is that web apps have to progress to the home screen as native apps do. At a point in time, building web apps on iOS also required some effort; icons, splashscreen, prompt UI and of course a great app, as users won’t add a webapp to the home screen if they do not like it.
Although everything above was great, Apple gave up on pursuing web apps on iOS, left them in the state they built, and didn’t promote them at all, as Google does now with Progressive Web Apps.
For many years, Apple believes only in natives apps (don’t be confused with the web, WebKit team does a lot for the web, but Apple doesn’t believe in web apps anymore), Google on the other hand pushes web apps forward, and of course, Google does it on Android, as Apple was doing Home Screen web apps on iOS. But this doesn’t mean Google owns some magic technology behind web apps or invented web apps and called them “Progressive Web Apps”. Today many vendors demonstrate growing interest for such use cases; Opera and Samsung now supports PWAs in their browsers, Firefox and Microsoft already have implemented many building blocks of modern PWAs.
Meet the IE9 of yesteryear
Right, that old, bad, Internet Explorer. IE9 has some kind of Progressive Web Apps support, and in fact, with quite good functionality. Of course, they are not called PWAs and do not require special functionality to “progress”. First it was called “Site mode” and later “Pinned websites”. But as you’ll see in the following demo, it’s essentially the same concept.
In IE, user can add a website to the taskbar by dragging & dropping it. After that, the website gets access to additional features:
- Branding. Window controls are themed with brand color and website’s icon is displayed near them.
- Define different entry points for the app, so called “Jump lists” (similar to “Force touch” home screen icons on iOS)
- Implement badge notifications via icon overlays
- Highlighting the app in taskbar to bring user’s attention to it
- Implement thumbnail buttons in app-preview window
- From Windows 8.1, a website can be pinned to the Start Screen and display live tiles (notifications)
These all are great features and good indications of Progressive Web Apps. Even if you don’t need this features, your website still can progress to become a pinned icon on the user’s taskbar.
Of course, IE’s implementation has its share of problems. Microsoft team thought that “drag & drop”ing things from the browser was more natural to the users than prompting them to pin the website.
The recommended user experience is drag-and-drop. Your users are not likely to click a button or link if they do not know what to expect. By comparison, pinning a site to the taskbar with a drag-and-drop operation seems more natural. This is the experience you should optimize for.
— https://msdn.microsoft.com/en-us/library/gg491729(v=vs.85).aspx
I never saw people “drag & drop”ing things from browser to desktop, this inherently rarely works and so people taught themselves to not use it.
More confusingly, IE has an API to prompt user to add a website to the “Start menu” (Windows button -> Programs list), which isn’t the place where developers would want their apps to appear.
After being added to the “Start menu”, a PWA is opened and user has a chance to pin it to the taskbar, so Microsoft suggests to explicitly ask users about two actions instead of one. Not optimal way to progress to taskbar. Developers won’t bother creating such PWAs if they won’t be able to easily engage people to install them.
Another problem, of course, is the IE itself. Most of the time devs build things they enjoy, and for browsers they use — very few developers enjoyed IE and rarely used it as their primary browser, I believe.
Firefox
Firefox also had a concept of installable web apps. Besides having Firefox OS, they had WebRT — runtime for Windows, Linux, Mac and Android which allows installation of web apps to the system. Interesting thing is that on Android (and maybe on other platforms), web apps were installed alongside with native apps, i.e. they were added not only to the home screen, but to the app-drawer too. All of this was done directly from Firefox by creating APKs on the fly. Chrome team is planning to do implement something similar.
WebRT never hit production, as far as I know. Or maybe it just was very unpopular, but I remember having a few such apps, including Twitter, on my old Galaxy Nexus. Unfortunately, Mozilla was as bad with promoting the web apps as Microsoft was with their “Pinned websites”.
Hosted Web Apps
Hosted Web Apps have been here for a while and are somewhat known by developers.
Basically, it’s the same website running on a server but in a tiny (or not so much) native container, typically it’s built-in WebView. Advantages of HWA are:
- Small package. User has to download only icons, potentially fallback HTML and in some cases (when platform doesn’t support HWA natively) small pieces of native code to bridge native functionality to a web app.
- Your entire app logic lives on a server, this means that you can update it in any time and push update to users nearly immediately.
- Access to native functionality. Even though your app lives on a server, you may have full (or partial) access to native functionality as normal packaged app.
These concepts are pretty similar to Progressive Web Apps concepts. Website progresses to users’ Home Screen / Device through AppStore. It doesn’t actually matter how.
Android and iOS doesn’t officially support Hosted Web Apps, but you can easily polyfill them with Cordova, add required native APIs and provide these APIs to your website. If you don’t want bothering with all of it, there are couple of great tools to help you with it:
- Manifold JS, by Microsoft. It allows you easily build and package websites as HWAs for many different platforms, including iOS, Android, Windows and more.
- Crosswalk Project by Intel. For some time, it was very hard to properly build hosted and packaged web apps for old Android versions, which is why Crosswalk Project was created and can now be used either as a WebView for Cordova or as a standalone tool to build web apps for different platforms such as Android, Tizen, Linux and others.
Both Crosswalk Project and Manifold JS use W3C Web App Manifest to define web app’s config and behavior.
On the other hand, some platforms natively supports Hosted Web Apps. These platform are Chrome, Firefox OS and Windows 10. While with Chrome and Firefox everything is simple and HWA has limited access to platform APIs, with Windows 10 and Universal Windows Platform everything is much interesting.
With Universal Windows Platform you can officially build and deploy HWA to Microsoft Store. Such web app will have full access to the UWP native API. Typical size of such app’s package is around 100kb or less. UWP Hosted Web Apps can be easily built with the Windows Apps Studio website or again, you can just use Manifold JS to package cross platform HWAs.
Another great news is that Service Workers are already in development in Microsoft Edge and will be available for both UWP Hosted Web Apps/WebView and packaged UWP JavaScript apps.
Conclusion
So this is it, Progressive Web Apps, isn’t a Google-only thing. Progressive Web Apps is a terminology, it means a web app which can be added to user’s home screen, taskbar or desktop. Google wants this web apps to be great, this is why not everyone web app can progress to the Home Screen from the Chrome. This adds new meaning to PWAs, modern meaning which wasn’t available with previous attempts to introduce PWAs, and this is the right way to go.
Google doesn’t own the Web and neither owns web apps. This all is about web apps. No matter how one or another vendor would name them, Pinned sites, Hosted Web Apps, Installable Web Apps or Progressive Web Apps. This all is about the same and all vendors tried to achieve it. Some vendors gave up on it, some not, but today…
No one other vendor prioritizes web apps as Google does today, so I would accept any naming, just to have them done right.
Many thanks to @kennethrohde for reviewing and helping me with this article!
