The Progressive Web Applications they are a very interesting part of the current Android ecosystem. Recently, Google has opted for this type of apps to launch Google Maps Go, its light version of the maps app. On Android Help we tell you What are PWAs?, how do they work, What advantages do they have over native apps?, where to get them y how to create your own step by step without neglecting key aspects such as SEO, security or device compatibility.
What are Progressive Web Apps? How do they work?
The Progressive Web Applications (PWAs, which stands for Progressive Web Apps) are advanced websites who behave and feel like a native appThey are built with standard technologies such as HTML, CSS y JavaScriptbut they add an extra layer of functionality that allows them install on the deviceto work Without connection, Send push notifications and take advantage of many Browser APIs.
This means that, without reaching the level of something you can install through the Play Store like a traditional native app, PWAs offer advanced functions that differentiate them from traditional static websites. They are opened using a mobile browser and, thanks to their architecture, can offer a almost identical experience to an app installed in the classic way.
The PWA they are opened using a mobile browser. In general, they will work best with Chrome from Google, but you can also use others like Brave Browser o Firefox, what are you offering Good support for Service Workers and Web App Manifest. It will also depend on the type of browser, since others such as Firefox Focus o flyx They are not suitable for these cases because They do not implement all the necessary APIs for PWAs.
Despite being opened with a browser, PWAs can function in a offlineThis sets it apart from static websites. Thanks to a component called Service WorkerThe application caches the essential resources (HTML, CSS, JavaScript, images, and key data) when there is a connection. Afterward, even without internet access, the PWA can continue to display content and respond quickly.
This means that, for example, you'll be able to see your history of Twitter Lite offline or browse a pre-loaded product catalog. In addition, you will be able to add direct links to your home screenwhich will make them much easier to launch later. In some cases, PWAs offer you this option when you first log in through a installation bannerIn the most advanced PWAs, the icon will also appear in your app drawer and they can run in their own window, without the browser's address bar, just like any other installed app.
PWAs are also capable of displaying push notifications, program background synchronizationsupdate data periodically even when the app is not running and take advantage Modern browser APIs such as WebBluetooth, WebUSB, WebAuthn or WebAssembly, which allow them to perform tasks previously reserved for native apps, such as managing files, accessing the clipboard or working with hardware-accelerated graphics.
Advantages and disadvantages of Progressive Web Apps
Progressive Web Apps have advantages and disadvantages, both for users and for those who develop digital projects. Understanding these points is key to deciding if a PWA is the best solution for your situation.
Among its Points in favor There is the fact that they are compatible with a a large multitude of devicesSince they are launched through a mobile or desktop browser, they depend on this browser engine and not so much on the specific operating system. A well-built PWA can work on Android, iOS, Windows, macOS or Linux without needing to develop different versions.
In addition, PWAs have a lower cross-platform development cost Unlike compiled applications that require a specific and independent codebase for each platform, such as Android, iOS, and each desktop operating system, with a PWA you can use a unique codebase that is shared between you website, mobile app and desktop appThis simplifies maintenance and accelerates project evolution.
Another important advantage is that PWAs can be indexed by search engines like any website. This allows you to work on the SEO and appear in Google, something impossible with a traditional native app that is only distributed through app stores. By being able to share them through a standard linkIt's easier to increase traffic and visibility.
PWAs also stand out for their high performanceThanks to caching and Service Workers, the load times are much smaller and the data consumptionMany success stories show reductions of over 80% in mobile data compared to native versions, as in the African marketplace Jumia. This makes them particularly suitable for slow or unstable networks and for emerging markets where the cost of mobile data is relevant.
Among its points against There is the fact that they do not reach all levels of complexity and deep access to the hardware of native applications. Although there are increasingly more web APIs, there are still advanced functionalities (full integration with Bluetooth, very specific sensors, low-level access to the system or certain augmented reality capabilities) where a native app or other hybrid solution still has an advantage.
However, PWAs are very useful tools for creating light applications suitable for emerging markets and for projects that need to reach the maximum number of users with a contained budgetAs we see in the aforementioned cases of Google, Twitter, Starbucks, Trivago, Tinder, or Alibaba, which have achieved remarkable increases in conversions and retention betting on this technology.
Internal architecture of a PWA: key components
Beyond the fact that these technologies operate based on HTML, CSS and JavaScriptThe true heart of PWAs lies in several basic components that work together to deliver a smooth, fast, and secure experience.
Service Worker: is a background script which runs separately from the main page thread. It allows saving a copy of the information with an active internet connection, making it possible to use the application offline. It also handles intercept network requests, decide what is served from cache and what is requested from the server, manage push notifications and performing scheduled tasks when the PWA is not open.
Application Shell ArchitectureThis architecture defines a minimal interface skeleton (header, menu, basic navigation) that is stored in the Service Worker cache. Thanks to this structure, the PWA can quickly display the basic interface and then load the dynamic content, thus reducing the initial loading times when running the PWA. It is the root of the interface and the first thing the user sees.
Web App Manifesto or application manifest: It's a simplified JSON file that provides information about the application, such as name, description, icons, colors, screen orientation, and display modeThis file tells the browser how to to install The PWA, what icon to display on the home screen, and how to open it (full screen, with address bar, in a separate window, etc.). This is essential for the browser to offer the button. Add to home screen.
HTTPSPWAs should always be served through HTTPSSecurity is a critical aspect: browsers only allow the registration of Service Workers and the use of many advanced APIs when the site is served by a encrypted and authenticated connectionThis protects users against man-in-the-middle attacks and ensures the integrity of the application.
Where can I get Progressive Web Applications? Are there stores?
As we have already mentioned, PWAs are advanced mobile websitesThis means that each time you access one, you'll need to add it to your home screen for easy access. However, you don't need to search each site individually to find out which ones offer Progressive Web Apps.
There are repositories that group themfunctioning as a kind of PWA storesYou can enter them to search for apps by category, see community ratings, or even add them directly to your desktop to place them next to the Play Store or the taskbar on your computer:
- PWA RocksPWA Rocks is one of the leading PWA stores. It has a simple design that works very well on mobile phones. It features several categories such as Socials, Tools, News, BUSINESS…which makes it easier to find what you need. Clicking on a PWA icon will take you to its website, where you can install it. It's a project hosted on GitHub open to contributions.
- Roneet Kumar WebstoreRoneet Kumar is the name of the developer of this store. It's very similar to PWA Rocks, but features a design based on... Material Design Much more attractive. Its selection varies slightly and it has an option to submit Progressive Web Apps to add to the repository. It's also hosted on GitHub and allows for discovery productivity apps, games, educational tools and more.
- PWA DirectoryPWA Directory stands out for having a wide selection of diverse markets and for incorporating a search engine to browse their selection. Although Roneet Kumar also includes it, this selection is larger, thus increasing its relevance. You can also log in with your Google account to keep a history of the PWAs you've added. It's also hosted on GitHub and updated frequently.
- Hermit WebstoreHermit's PWA selection, a development we will discuss in the next section, offers optimized sites to become lightweight applications. From there you can explore PWAs ready to add as "lite apps" within Hermit itself.
- out webThe last one on the list offers a very well-categorized and powerful experience. You'll be able to browse through various classes of Progressive Web Apps based on their utilityIn addition to using the built-in search engine, it has a bottom menu to browse through its different categories, such as entertainment, tools, news, or games.
In addition to these repositories, many modern PWAs can install from the browser itself. Browsers like Microsoft Edge They allow PWAs to be installed from the address bar, and on systems like Windows it's even possible publish them in the Microsoft StoreFrom there, users can discover, install, and manage them just like other apps.
Compatibility between devices and closing the gap with native apps
Progressive Web Apps are compiled using code HTML, CSS and JavaScript hosted on web servers and running on browser engines. Thanks to this approach, they can be used directly in a browser, like a regular website, or installed on a device from a compatible app store or through installation feature from the browser itself.
The user experience of a PWA is adapts to the device's functionalitiesOn small screens, a mobile-optimized design is displayed, while on large desktops, it can offer more complex interfaces. On systems like Windows, with Microsoft Edge, it's possible to create highly integrated experiences with the operating system, including icons in the taskbar, system notifications, and running in a separate window.
Many features that were previously only possible through device-specific languages can now be achieved through standard web technologiesToday it is possible, for example, to manage files, share content with other applications via the API of WebShare, access Clipboard, synchronize data and capture resources in the background, access hardware such as Bluetooth and USB, store content in local databases (IndexedDB) or execute code from High performance with WebAssembly.
Thanks to this evolution, the gap between the web and native It has been reduced significantly. For many projects, a PWA can already offer everything you need without having to invest in a full native app.
Success stories of Progressive Web Apps
Using Progressive Web App technologies is an excellent way to make an application secure, recognizable, linkable, easy to install, fast and usable without being entirely dependent on the networkMany popular services have migrated part of their strategy towards PWAs with measurable results.
- StarbucksTheir PWA, designed for quick orders, has doubled the number of daily active users. Desktop orders are almost as fast as mobile orders, which has increased the use of the web channel.
- Trivago[Company Name]: has experienced a 150% increase in people adding its PWA to their home screen. This increased engagement resulted in a 97% increase in hotel deal registrations.
- tinderWith its PWA, it has reduced loading times from almost 12 seconds to less than 5, with an application 90% smaller than the Android app, which improves adoption on slow networks.
- Alibaba, Uber, Forbes or Twitter LiteThey have also reported significant improvements in conversions, dwell time and retention after adopting a PWA strategy, especially in markets where access to mobile data is limited.
Can I create my own Progressive Web Applications?
For developers, Google offers a complete tutorial regarding how to create Progressive Web AppsThe company aims to make Progressive Web Apps fast, safe and accessible experiences to everyone, so they facilitate its development with guides, codelabs and tools such as Lighthouse o Workbox.
The basic process of creating a PWA includes defining a Web App Manifesto, register a Service Worker to manage cache and notifications, serve the site under HTTPS and make sure the interface is responsive and adapts to any screen. Frameworks like React, Angular o Vue.js They include templates and tools that facilitate this work.
However, this is not the only way to create these kinds of apps, since you can Turn any website into a PWA or something very similar from your own mobile phone.
Convert websites into “mini PWAs” on Android with Hermit
To do so, you will need to install on your mobile phone Hermit, an application that captures websites, lets you optimize them and allows you to add them to the home screen as if they were Progressive Web Applications. You can download it from the Play Store:
Hermit It allows you to access a website from its application, either one you choose or one from its pre-selected list (we've already linked to its repository). Furthermore, it allows you personalize the experience and the appearance of the website, either by blocking some elements, forcing a dark modechoosing to display fullscreen...controlling whether images are loaded, activating tracker blockers, etc. There are enough options to have a kind of Unique Progressive Web Application from almost any website.
By using the free version of HermitYou'll be limited to two apps. If you pay for the paid version premium liquorsYou can create as many apps as you want. If you're a student, you might be able to get the premium version for free thanks to occasional promotions from the developer. In any case, Hermit is a simple way for those looking for lightweight apps without relying on traditional store installations.
Combining the power of the native browser PWAs With tools like Hermit and specialized repositories, today any Android user can create an application environment fast, lightweight, secure and multiplatform that take full advantage of the modern web without sacrificing the convenience of an installed app.