Original address: vaadin.com/blog/the-st…

Original author: vaadin.com/blog/author…

Release date: March 2021

PWAVaadin, along with major technology companies such as Microsoft and Google, has been advocating progressive web applications for years.

It was last updated on 30 March 2021.

Many changes have taken place in the PWA ecosystem over the past few months. For this reason, we decided to publish this “State of Progressive Web Applications” post, which will allow us to track and compile major developments in the field and help you decide if PWA is right for your business.

Essentially, PWA combines the simple publishing model of Web applications with the power, performance, and user experience of native applications, allowing enterprises to develop, maintain, and add functionality to a code base that can run on almost any platform.

If you are interested in learning more, we have a lot of wonderful information about PWA.

  • PWA Handbook: Introduction to PWA.
  • The business case for incremental Web applications.
  • Convert Vaadin applications to PWA.
  • The future of the Web. Executive guide

This blog post will be updated regularly as the PWA environment changes.

Google and Microsoft are working together to take PWA further

Two of the biggest proponents of progressive web apps have teamed up to give developers a new, de facto way to wrap PWA in app stores. One of the core promises of PWA is frictionless access and distribution through web browsers, however, app Store wrappers do have their uses for certain types of applications, as this distribution approach offers enhanced operating system access and greater monetization opportunities. Both companies are touting the ease of installing and uninstalling PWA on Windows 10.

Microsoft’s PWAuilder (which, by the way, uses the Vaadin router for its PWA startup project) allows developers to easily package PWA for the App Store. Google’s Bubble Rap tool can do the same for the Google Play Store.

According to a recent Medium post by Judah Gabriel Himango of Microsoft, PWAbuilder will now be using Google Chrome LABS ‘Bubblewrap under the hood. This collaboration will also bring several welcome improvements to the PWA built using PWAuilder, including.

  • Support for standard shortcuts that allow THE PWA to access application shortcuts that are deeply integrated with the operating system (for example, the Windows taskbar or the Android home screen).
  • The generation of custom Android packages enables developers to edit things like launcher names, splash screen colors, navigation bar colors, and icon urls just like native Android applications.

You can read more about PWABuilder and how it works with Vaadin in this blog post.

Worms in apples

Compared with other tech giants, Apple has chosen to limit PWA’s capabilities on its iOS and iPad OS platforms.

In the latest blow to PWA, Apple refused to implement 16 newly introduced Web apis in Safari, citing their potential for greater advertiser fingerprinting.

This means that to successfully deploy PWA on iOS or iPad OS, it needs to be packaged as a native app and distributed through Apple’s App Store. This adds an extra step for the developer. In addition, all apps submitted to apple’s App Store must comply with certain guidelines that are generally unfriendly to PWA, including that the app must be able to run fully on the device (rather than putting most of its functionality on the web).

At this stage, the best way to convert a PWA to an iOS or iPad OS app is to use Microsoft’s PWA Generator, which generates a complete XCode package for your PWA (assuming you have a Mac to run XCode).

This is still better than building a pure native application, since most of the application’s code base can be shared between pure PWA and packaged versions distributed to other platforms.

While the Mac App Store is unlikely to see PWA any time soon, it’s still easy to install and use PWA on Macs through Google Chrome and Microsoft Edge Chromium.

However, we saw some good news about the future of PWA in Apple’s latest iOS 14 update, which added support for technologies like Service workers and allowed iPhone users to set a different default browser than Safari.

Firefox has its back to the open Web

In a strange twist, Mozilla Firefox, usually a champion of the open Web, decided not to pursue support for installable Web applications on their desktop browsers. Android browsers continue to support the technology.

PWA is arguably the best choice for tying apps to the App Store, so Mozilla’s recent announcement has caused a stir in the open Web community.

Mozilla says its approach is simply a matter of priorities. They said they would focus on other features and had no plans to enable installable Web apps for their desktop browsers. The change puts Mozilla behind PWA advocates, Microsoft and, of course, Google’s browser.

This can hurt the reach of Web applications on its platform, for example the Weather Channel reported a 60% increase in activity when migrating from traditional Web applications to PWA.

Open versus closed networks

Safari and Mozilla Firefox, both included in Apple’s iOS mobile operating system, appear to have opted out of PWA in favor of security concerns. More details on this deviation are sure to emerge soon. However, popularity is on the PWA’s side, as Google Chrome and Edge, the standard browser for Windows 10, dominate the market.

Distribution and support of PWA by platform

So, that begs the question. In today’s environment, is it worth it for my business to set up a public utility administration? The answer is yes in most cases…… .

To help you better understand whether PWA is right for your project, we have compiled a list of the most up-to-date information on the various widely used platforms that support PWA.

Incremental Web apps for Android

Android is currently the best platform for installing programmers. Currently, you can install audiovisual devices on Android in a variety of ways.

Install audiovisual devices on Android system based on browser

  • This is probably the most common (and most convenient) way to install the PWA.

  • All major browsers, including Google Chrome, Android Webview, Mozilla Firefox, Brave, Opera, and Microsoft Edge, support PWA installation.

Certain other browsers provided by hardware and service vendors, such as Samsung Internet, also support PWA.

  • The Beta version of Mozilla’s “big Overhaul “Firefox for Android browser has recently added support for PWA installations, starting with Firefox Preview 5.0 and Beta 76. These browsers are part of Mozilla’s effort to modernize the classic Firefox browser to bring higher performance and lower resource usage to Android devices. Note that unlike Chrome, Firefox simply adds these PWA as “home screen shortcuts.”

  • With the exception of Google Chrome and Samsung Internet, all of these browsers use a2HS (Add to home screen) installations, which essentially add an icon to the app on the home screen, but don’t register the app at the system level.

  • Google Chrome and Samsung Internet support the recently launched “WebAPK “installation method, which creates a local” wrapper “application and registers the application at the system level. This has the added benefit of having the app appear on the app shelf (not just on the home screen) and allowing users to manage storage, notifications, and other Settings in Android Settings.

Distribute THE PWA through an Android-based app store

  • Advanced Web apps can be promoted to a Trusted Web Activity (TWA) and installed from within the Google Play Store.
  • TWA essentially runs in a special instance of Chrome custom Tabs (CCT), which offers more functionality than a typical Web view, such as push notifications, background synchronization, and media Source Extensions (MSE).
  • While the core promise of PWA is the ease of publishing provided by browsers, there are some use cases where TWA does offer additional benefits, such as deep integration with the platform, home screen widgets, and integration with Wear OS or Android Auto.
  • Samsung said it will be possible to install PWA using WebAPK instead of TWA in the Galaxy Store. The feedback Samsung has received seems to indicate that developers prefer this installation model to TWA.

Enterprise distribution of PWA on Android

  • Google allows businesses to securely publish PWA to employees using hosted Play Iframes via the EMM(Enterprise Mobility Management) console, relying on the WebAPK Minting service.
  • This enables enterprise IT administrators to publish private applications that are only available in their employees’ Play Store instances.

Progressive Web applications on Windows

  • Microsoft has gone all out to promote progressive web applications on Windows 10 and 10X. This was helped by the move of Microsoft Edge to Chromium.
  • Microsoft has released a preview of their new PWA platform based on Chromium Edge. Read more on PWA advocate Justin Willis’s blog.
  • At Build 2020, Microsoft announcedAs part of Project Fugu, an open-source Project of which Microsoft is a part, a series of improvements aimed at bridging the gap between native and progressive web applications are coming to Windows. These improvements include
    • Set PWA to the default values for the file type, URL, and protocol.
    • Local file system access (direct write).
    • Can run at operating system login time.
    • Improved native notifications (adding badges on ICONS to display relevant information).
    • Shortcuts to applications.
  • These features began shipping with the Edge 86, and many are now available in the Canary channel.

Browser-based PWA installation in Microsoft Windows

  • Currently, PWA can be installed through Windows 10, Windows 8, and Windows 7 browsers.
  • They can be installed using Google Chrome and Microsoft Edge (Chromium only).
  • Google Chrome and Microsoft Edge (Chromium) will soon join mainstream support to run PWA at startup. This is currently available on both browsers’ Canary channel.
  • Mozilla Firefox is working on adding PWA installation support (currently available in the Nightly channel), but without a specific release date, Mozilla seems to be prioritizing PWA support on Firefox Android first.
  • Microsoft Edge(Chromium) and Google Chrome allow any website (even those not built to the PWA specification) to be installed as PWA.

PWA in Windows App Store

  • The Microsoft Store for Windows 10 supports PWA. In addition, PWA is available as an XBox One application through the Microsoft Store.
  • While manual submission is an option, Bing crawlers can automatically index your PWA and add it to the Microsoft Store if certain criteria are met.

Progressive web apps for iOS and iPad operating systems

  • IOS does not support PWA installation through Apple’s App Store.
  • PWA can be installed starting with Safari 11.
  • Other browsers on iOS or iPad OS cannot install PWA (all third-party browsers on iOS use the WebKit engine because Apple’s App Store doesn’t allow third-party browser engines).
  • As mentioned above, delivering a high-quality PWA experience on iOS and iPad OS devices is a challenge, as Apple recently declined to implement several major Web apis, citing privacy concerns caused by advertisers’ fingerprints.

Progressive web applications on macOS

  • Apple does not support PWA installation through its App Store. Critics say this is because the PWA is able to circumvent the notorious “Apple tax” that requires developers to pay a significant percentage of their app revenues to Apple.

Install browser-based PWA on macOS

  • You can still install PWA on macOS using Google Chrome and Microsoft Edge (Chromium) based browsers.
  • Google Chrome will soon allow PWA to start on macOS. This flag is already in the Canary channel build.
  • Currently, you can’t install PWA using Apple’s Safari, Opera, or Microsoft’s Firefox.

Progressive web applications on ChromeOS

  • ChromeOS now allows you to install progressive web apps (along with Android apps) using the Play Store.
  • Progressive web apps now function on ChromeOS as native citizens for Android apps. Users will soon have the option to start the PWA at startup.
  • Youtube TV and Twitter are two of the big names that hit the Play Store earlier this year. They are now the default option on the Play Store for anyone using ChromeOS. Google seems to see PWA as a more high-performance, user-friendly alternative to running Android apps on ChromeOS.
  • Browser-based PWAs can also be installed on ChromeOS (starting with ChromeOS 67).

Progressive web applications on Linux

  • PWA can be installed on Linux using Google Chrome starting with version 72. PWA can be started using Google Chrome at startup time. This feature is currently in development and is provided through a flag built for Chrome’s Canary.
  • Microsoft Edge Chromium is coming to Linux soon and will probably support PWA installations as well.

The rise of PWA among gamers

Amazon Luna announced

Amazon announced its new cloud gaming service Luna, which will expand its Prime video subscription model. Users can sign up for early access to the service and use the new low-latency gamepads on Fire TV, PC, Mac and iOS. Android support is being developed and should be available soon. More significantly, the service operates as a PWA, bypassing Apple’s App Store and its 30% microtransaction installation commission.

Epic Games has taken a bite out of Apple.

Amazon isn’t the only gaming platform protesting the App Store, though. Epic Games, the gaming giant behind Games such as Fortnite and the Unreal Engine used in a number of Games, has filed a civil lawsuit against Apple over exclusive payments on iOS devices.

Facebook’s Move into Games (again)

People have been playing browser-based games on Facebook for years. In an effort to become the first advertising-based cloud gaming network, Facebook recently announced that several free mobile games will be available on their upcoming platform. According to game design veteran Jason Rubin, offering games in the form of PWA is a possible solution to this goal. Just like Epic Games, they are pressuring Apple to comply, rather than adapt to the PWAs restrictions on their Games.

Games on a Chromebook

Stadia, Google’s cloud-based console, has slowly but surely made its way into Google’s console market. The Stadia platform can be installed on Chrome as a PWA, turning its Chromebook into an effective gaming machine. Google has reported that the introduction of Stadia games has led to a threefold increase in the number of games installed on Chromebooks in the past few months.

Progressive Web Applications and Vaadin inc

Converting a Web application built using Vaadin 14+ to PWA is easy, simply by adding @PWA annotations to the root layout of the application. The server automatically provides the required resources for the PWA. Without an Internet connection, applications built using Java component apis default to customizable “offline screens.”

Vaadin also supports building offline experiences using typescript-based client views in PWA. You can use both Java-based and typescript-based views in the same Vaadin application, which means you can add offline views to your existing Vaadin application.

Vaadin Fusion brings offline capabilities to PWA.

Our latest feature release, Vaadin 19, brings offline capabilities to your typescript-based Vaadin applications. It works by keeping data locally and then synchronizing it with the server once the connection is re-established. Learn how to use Fusion in Marcus Hellberg’s video, or learn how to operate Fusion through our new in-depth tutorial.

Not sure which Vaadin version is best for you? Read our introduction to Vaadin Flow and Fusion to learn more.

A new series of guidelines for building PWA in Vaadin and publishing it to major app stores.

We also provide tutorials for each step of the PWA development process. Our comprehensive modern Networking Applications with Spring Boot and Vaadin ebook explains how to build a fully functional PWA from start to finish.

In addition, we have extensive content to help you deploy PWA to all major cloud hosting providers and app stores.

  • The Cloud Deployment tutorial series provides step-by-step instructions for deploying any Vaadin application, including PWA, to the cloud provider of your choice. The family currently covers AWS, Azure cloud, Google Cloud, Heroku Cloud, IBM Cloud, and Oracle Cloud.
  • App Store submission tutorials, featuring the PWA Generator and Bubble Rap CLI, including instructions for the Apple App Store, Microsoft Store, and Google Play Store.

Translation via www.DeepL.com/Translator (free version)