What Are Progressive Web Apps and Why Should You Care?
It's spring of 2018. This is the year where progressive web apps are expected to finally establish themselves. If you have yet to look into the topic, it's about time you do so. We'll help you with that.
The Increasing Mobile Web Usage Threatens the Open StandardsWe can't deny it. We notice it looking at ourselves and others. Usage of the web is shifting more and more towards mobile devices. Here, native apps, which mainly draw their content from the web and display it within the app, are dominant. During this process, the apps have full control over the appearance of the content. The actual provider of the information has lost most of his influence. [caption id="attachment_104237" align="aligncenter" width="1024"] Barbed wire only stings when we run out of room to move. Image by 2allmankind from Pixabay[/caption] In the long run, this results in the danger of apps with a certain range forgoing the web as a content provider altogether. Facebook is a common potential example for this. If the user should ever shift towards mobile platforms so heavily that web-based access seems redundant, Zuckerberg could decide to only work with apps and direct database connections. An already heavily private society would isolate itself from open standards even more. The web as we know it would be over. Snapchat is an application that is exclusively available as an app already, and it has no intersection points with the outside. Instagram's web access is very rudimentary as well. The app is the only way to participate in all the fun. Of course, from the perspective of the operators, this kind of situation is quite desirable. After all, the time spent on their offer remains the same or even rises. Bounce rates, search engine optimization, and other problems that operators have to deal with when competing with other providers that are just one click away are all irrelevant. For designers, consumers, and all page operators that don't have the range of Facebook or Snapchat, the development is just as dangerous as it is for the other web giant called Google. The latter is good for all of us, as Google can stop the trend by actively promoting open standards. Without the blue rival, Google might be inclined to set up a comfortable garden with a neat wall around it itself. This is a good example of competition breathing life into the business. Facebook doesn't need an open web, as everything takes place on the inside of the service. Google lives and dies with its ads business on the open web. No other business field brings profits. Because of that, Google can never risk letting the open web close.
Against the Native Web: Web Apps Stand for the Open WebAt the lowest level of a possible consensus, the web is considered everything with a linkable URL that can be accessed via that. With the strengthening of the mobile platforms, the design trend moves to mobility in design. During the process, the characteristics of a smartphone are considered in many different ways. Today, the so-called responsive design is the way of choice. This approach makes sure that a website is displayed depending on the restrictions of the device it is displayed on, without losing much of its functionality. If we're honest, this responsive design approach is a mere compromise in a majority of cases. [caption id="attachment_104236" align="aligncenter" width="1024"] PWAs are based on open web standards. Currently, React and Angular are popular choices for development. Image by Olalekan Oladipupo from Pixabay[/caption] In comparison to native apps, mobile apps were unable to keep up in terms of functionality for the longest time. While it was possible to get a well-adjusted appearance onto the mobile screen, native apps are inevitable when it comes to access-to-device features like the camera or certain sensors. Of course, the problems didn't start there. The behavior under poor internet conditions or complete connection failures leads to the web app being unusable. Progressive web apps begin right there.
Progressive Web Apps Are the Best of Both WorldsUnder the impression of the realization that Google also has to value the conservation of the open web, it seems logical that the Californians put a lot of work into the enforcement of the concept of progressive web apps. We should welcome this financially strong support. This should keep Facebook and Co's isolation tendencies at bay for a long time. The progressive web app is a concept that connects and unites the strengths of both worlds; being the native development for mobile devices, and the development based on open web standards. A progressive web app is an improved version of already existing mobile websites. In this sense, improved means that it has features and abilities that were previously only known in native development. This new generation of web apps provides many of the abilities of today's mobile apps, making these native apps redundant to some extent. Well, this is what you might say: If the new generation of web apps only provides abilities of existing native apps, why should we be using them? There are various answers to this question. For one, I already pointed out that turning away from the open web, and happily joining the walled gardens would have negative consequences for all of us. Do you remember AOL and Compuserve? We surely don't want to go back there. Looking at it this way, it is almost a question of honor or at least one of the philosophy you're willing to support. On the other hand, a web app has its very own advantages. A web app is found via Google search, and can be accessed and used. It is not required to localize it in one of the app stores, and install it from there. Web apps don't need to go through the app store process for each update, and then be reinstalled as an extensive update. Progressive web apps unite the advantages of native apps regarding the interface usage, the local data storage, the option to display notifications, and a few more details, with the uncomplicated, fast availability of web-based offers, as well as their immediate currentness that doesn't require any update processes.
The Difference Between a Web App and a Progressive Web AppThe smallest version of a web app is the optimized web view on the small screen of a mobile device. Basically, it is nothing more than a website meant to be consumed on a mobile device, while more or less looking like an app. Orientating oneself by the looks of apps is definitely recommended, remembering Steve Krug's classic "Don't make me think".
The Catch is the Browser SupportAs always, in modern web, progressive web apps don't work perfectly fine on all browsers. On Apple devices, the web app runs, but due to the lack of missing support, mainly for service workers, the experience cannot be called progressive. We probably won't see the Push API on Apple devices anytime soon. As of right now, in early March of 2018, progressive web apps are only fully functional under Android. However, since August 2017, people have been working on the implementation of service workers into WebKit. WebKit is the technology that Safari and Mobile Safari are based on. Now, apparently, Safari 11.1 is supposed to bring these changes to the desktop and mobile devices. As I said, don't expect the full implementation as a PWA. Safari 11.1 only provides service workers. Manifest, app shell, and push notifications, a good two-thirds of the PWA technology foundation, are left out. Let's get to the competition from Redmond. Microsoft has also committed to open standards, and at the beginning of February 2018, they announced, that they would take the PWA standard from the preview in the rendering engine EdgeHTML into live operation. With EdgeHTML 17, PWA is supposed to reach Windows users in the Edge browser at full power. For chronological perspective, it should be said that EdgeHTML 16 was a part of the Fall Creators Updates last autumn. As Microsoft does not have a reliable update rhythm for EdgeHTML, we could expect version 17 in April 2018, but a release during late summer of this year is possible as well. In addition to the Edge integration, the Redmonders also decided to make PWAs accessible right from the Microsoft Store, giving them the status of real Windows apps. In the future, developers can manually place PWAs in the Microsoft Store. In addition to that, the Bing crawler is supposed to be able to automatically integrate high-quality PWAs he found into the store. According to Microsoft, Bing has been practicing the indexing of PWA for about a year now. With the PWA Builder, Microsoft takes it one step further, offering a free PWA generator as an open source project. Start your way to a PWA by entering your website's URL. The generator detects the gaps that need to be filled for the definition as a PWA and supports you in the process. You can also enjoy PWA support in Chrome, Firefox, and Opera. If you want to get an impression of the current PWA supply, check out the previously-mentioned catalog PWA Rocks. [caption id="attachment_104238" align="aligncenter" width="903"] The supported features on a computer with Windows 10 Creators Update and the Firefox 58.0.2 64-Bit (Screenshot: Noupe)[/caption] For an impressive look at which browser provides what, I recommend using the website What Web Can Do Today, which is a PWA itself, by the way. You can access it from any browser on any device, receiving detailed information on which features your app could use on the respective browser/device. TLDR Progressive web apps are websites that progressively adjust to the abilities of the device and browser they're used on. Progressive means that the app becomes more performant the more performant the device, and browser it is accessed on are. For the creation, open web standards are used exclusively. Over the course of 2018, we can expect that the concept will establish itself across all platforms. Due to the known business-political considerations from Apple's side (keyword: Walled Garden), macOS and iOS should have the most restrictions, while PWA should become the standard everywhere else. Further Reading
- Progressive Web Apps | Google Developers
- Welcoming Progressive Web Apps to Microsoft Edge and Windows 10 | Edge Developer Blog
- Welcoming PWAs: Apple now supports service workers on Safari | Betanews
- An introduction to Progressive Web Apps | freeCodeCamp
- Big Overview of Usable PWA | PWA Rocks
- The 5 best tools for building progressive web apps fast | TechBeacon