Introduction
PWAs are designed to provide users with the same experience as native programs, with an easy installation process and the ability to operate offline.
On the home screen of a mobile device or in the application menus of a desktop operating system, they appear to be conventional applications. A PWA requires certain metadata, like name, description, and icon, which the operating system uses to show details about the program.
TypeScript must be used to provide the offline views in order to support offline use. The framework for creating client-side views is Hilla.
Progressive web applications concepts
The following fundamental elements are shared by all PWAs and allow for native-app-like functionality:
manifest for web applications
The Information about an application, such as its name, theme, icon, and description, is provided in the manifest. for creating an installable version of the web application, these details are required.
Service Worker
An example of a JavaScript program that operates in the background is a service worker. It can serve files directly from the browser's cache and generate a full application experience even if there is no network connection because of its capacity to intercept network requests.
It is basically a JavaScript file that:
- operates independently of the main browser thread;
- catches requests from the network;
- caches resources and gets them from the cache;
- sends Push notifications.
Creating PWA with the flow
When you use the @PWA annotation in the Application Shell, Vaadin Flow automatically offers the necessary resources for a PWA. The Application Shell class is where the @PWA annotation should be included.
The following are some examples of how you can deliver PWA resources automatically using the @PWA annotation:
@PWA(name = "Coding Ninjas",
shortName = "CN")
public class AppShell implements AppShellConfigurator {
}The Vaadin server automatically serves the application header additions, offline experience, service worker, icons, and manifest.
12 characters are the maximum length for the shortName argument. A list of the @PWA annotation parameters you can utilize is available in the PWA Web Application Manifest.
Application Installation Requirements
The following features are needed to support installation on devices. These are dependent on the system and browser being used:
Icons
In order to accommodate various devices, multiple icon sizes are required. Images for the splash screen are also necessary to improve the experience.
Offline assistance
If a network is unavailable, the service provider must still be able to respond and assist the client.
heading details
The header of the program must contain theming and icon data specific to the browser and/or the device. In addition to the manifest file, this exists.
HTTPs
HTTPS is necessary for many modern browser features, including those needed for PWAs. Even though your PWA now functions without HTTPS in some settings (such as Android), this is likely to change, and PWAs that do not support HTTPS will likely experience issues in the future.
Progressive Web Applications manifest
Vaadin automatically creates a web application manifest file called manifest.webmanifest when it discovers the @PWA annotation.
The file's customizable characteristics are listed below. All properties, with the exception of scope, can be set in the @PWA annotation.
name
the title of the program. Set this property in the @PWA annotation's name parameter.
short name
It shouldn't be more than 12 characters. It is utilized on the device's home screen because there isn't much room there. Set this property in the @PWA annotation's short name parameter.
description
The application's explanation. The empty string serves as the default value. In the @PWA annotation, set this property in the description argument.
Display
Specifies the application's preferred display mode. The sole value is the default. In the @PWA annotation, set this attribute in the display argument.
background-color
The color of the application's background. The standard setting is #f2f2f2 (gray). Set this property in the @PWA annotation's backgroundColor parameter.
theme color
The color scheme for the application. The standard setting is #ffffff (white). Set this property in the @PWA annotation's backgroundColor parameter.
scope Specifies the context of the website's navigation. As a result, only certain web pages can be visited while the manifest is active. The application context path has been set as the value. This property in the @PWA annotation is not editable.
start URL
The start page that is visited when an installed program launches a new application (home screen). The application's default route target, denoted by @Route(“ “), is pointed to by the empty string " " that serves as the default value. Set this property in the @PWA annotation's start path parameter.
Icon
icons are generated automatically from icon resources.
Renaming the manifest
Using the manifest path argument in the @PWA annotation, you can change the web application manifest's default name (manifest.webmanifest).
The example given below demonstrates how to do this:
@PWA(name = "Coding ninjas",
shortName = "CN",
manifestPath = "manifest.json")Overriding the Generated Manifest
The produced manifest file can be replaced with a customised manifest.
To modify the web application manifest file that was generated:
- Create a custom manifest file and give it a name that corresponds to the file name specified in the @PWA annotation's manifestPath parameter, for example, manifest.webmanifest.
- The file should be placed in the src/main/webapp/ subdirectory.
Progressive Web Applications Service worker
When an application starts, Vaadin automatically creates a straightforward service worker if the @PWA annotation is present.
The service agent created:
- caches offline resources, such as the offline page, icons, and user-defined (custom) offline resources, as well as TypeScript views;
- serves the TypeScript views offline or a separate offline page to manage the offline experience.
To cache resources, the service worker makes advantage of Google Workbox.
Defining Custom Cache Resources
Using the offline resources argument in the @PWA annotation, you can specify unique resources that should be automatically cached by the service worker.
As examples of offline resources for caching, styles/offline.css, img/offline.jpg, and js/jquery.js could be defined as follows:
@PWA(name = "Coding ninjas",
shortName = "CN",
offlineResources = {
"styles/offline.css", "js/jquery.js", "img/offline.jpg" })Overriding the generated Service Worker
A custom service worker can replace the generated service worker.
Create a file called sw.ts in the frontend folder to replace the produced service worker file.
Progressive web Applications Icons
PWAs require a minimum of three icons: a favicon for the browser tab, a device icon for the installed app, and an icon for the app's splash screen.
Utilizing Custom Icons
Vaadin serves and automatically uses the default PWA icons, but you can use your own.
Using a unique icon image
- Make an icon with the filename icon.png. It must be a PNG file for the icon.
- Add the image to icons/ in your static web resources (src/main/webapp/icons for non-Spring projects, src/main/resources/META-INF/resources/icons for Spring projects).
Vaadin performs an automatic search for the file icon.png in the web app resources folder's /icons subdirectory. It makes use of this image to produce images that are correctly scaled for various devices. The default image is used as a backup if no icon is detected.
Use an image that is at least 512 x 512 pixels in size to guarantee that all scaled photos are attractive. This can only be scaled up to a certain point because scaling down could result in pixelation.
Overriding Generated Icons
The icon-[width]x[height].png format is used to label all created pictures, for instance, icon-1125x2436.png.
replacing a produced image
- To create a custom high-resolution splash screen picture for iOS devices, create an image of the size you want to override and give it the name icon-1125x2436.png using the notation stated above.
- In your static web resources (src/main/webapp/icons for non-Spring projects, src/main/resources/META-INF/resources/icons for Spring projects), add the picture to icons/.
Renaming icons
Using the icon path argument in the @PWA annotation, you can replace the standard icon path with a custom one.
The @PWA annotation's icon path parameter allows for the definition of a specific path, as demonstrated in the example below:
@PWA(name = "Coding Ninjas",
shortName = "CN",
iconPath = "img/icons/logo.png")Progressive web Applications Offline Experience
Vaadin offers two additional methods for creating offline experiences:
- TypeScript client-side views (default)
- an independent offline page
The service worker offers TypeScript routes and views offline support for PWAs created with Vaadin. This makes it possible to create unique view logic in offline mode. By default, it caches the HTML for the application shell, the front-end bundles that have been built, and any additional resources that are required before serving them offline.
If creating offline-compatible application views is not necessary (for instance, if displaying a static content page is sufficient), you can rather use a separate offline page in place of TypeScript views (offlinePath attribute in @PWA annotation).
Offline typescript views
Your application shell class needs to have the @PWA annotation to enable the service worker, which automatically serves the client-side views offline.
All of the dependencies that were imported into TypeScript views using import are also cached and served offline by the service worker.
Creating a Custom Offline Page
Making an Individual Offline Page
- Use an independent offline page:
- Make an offline.html file and save it.
- Place the file in your static web resources directory (src/main/webapp/ for non-Spring projects, src/main/resources/META-INF/resources/ for Spring projects).
- OfflinePath="offline.html" should be specified in the @PWA annotation.
The offline path argument allows you to change the name of the offline page file that is given.
Only resources that are cached can be used by the offline page. Only the offline page, manifest, and icons are stored in the cache by default. If your page requires external resources (such as CSS, pictures, or Web Components), you can specify them using the
@PWA annotation's offline resources argument.
@PWA(name = "Coding Ninjas",
shortName = "CN",
offlinePath = "offline.html")
public class AppShell implements AppShellConfigurator {
}Generated Offline Page
PWAs created with earlier versions of Vaadin are compatible with the generated offline page. Use a custom offline page or TypeScript offline views.
A built-in offline.html generated offline page is available in Vaadin. It's a straightforward page that:
- includes the icon and name of the application,
- informs the user that the application is unavailable due to a lost network connection.
Install Ability of Progressive Web Applications
The beauty of progressive web applications is that they run in their own standalone window instead of a browser tab. Users can place the application on their home screens and access it directly from there giving a feel of an ‘application’ rather than a website in their browsers.
Flipkart
When it comes to e-commerce who has not heard of the giant Flipkart? A recent update to their mobile application which is now known as ‘Flipkart Lite’ boomed the number of users and the user experience.
Users spent an average of 3.5 minutes on Flipkart Lite whereas on mobile applications the average was as low as 70 seconds. The re-engagement was increased to 40% and the data usage was decreased to three folds.
One of the premier social media applications is also a progressive web application. Did you ever notice how you get new posts and notifications without you refreshing the page? That is an added benefit of utilizing progressive web applications as it uses fewer data.
There was a 75% increase in the number of tweets that were tweeted by the users, a 20% increase in Twitter’s bounce rate, and a whopping 65% increase in pages per session.
BookMyShow
You must be familiar with this one. One stop shop for all your entertainment needs. The BookMyShow website had lots of images and information on it available at the user’s disposal however due to a heavy multimedia integration, people had to have comparatively tremendous amounts of data to visit the website and make their booking.
The conversion of BookMyShow from a website to a progressive web application made it save the user’s storage and memory and eventually increase the number of users that visit the website and offer the user a faster experience.
Forbes
The ultimate news source for a business minded user, Forbes. The magazine is considered a benchmark for all news stories related to finance, stocks, marketing and the industry. Upon its transformation from a website to a progressive web application, the engagement rates shot up and the users also got an option to get push notifications for their favorite topics.
Talking about statistics, engagement rate increased 100%! That is the beauty of improvising on the technology you have with you.
OLX
For everything used and second-hand, OLX is the online marketplace for buyers and sellers. OLX identified that their users were mostly operating from mobile devices and decided to switch their mobile websites to a progressive web application.
The result of this decision was astonishing! There was a whopping 250% increase in re-engagement and the profits OLX earned by running advertisements was increased by 146%.
When it comes to finding the perfect aesthetic, Pinterest is the only considerable option. When Pinterest made a switch to progressive web application, the user engagement, the amount of time the users spent on the application increased which ultimately increased the revenue Pinterest generated from advertisements.
Lancome
Lancome is a widely acclaimed luxury cosmetic brand based in France. To strengthen their roots in the e-commerce market, Lancome decided to switch to progressive web applications so as to offer their mobile users a wholesome experience.
After the conversion to a progressive web application, Lancome saw 17% increase in conversions and 51% increase in mobile sessions.
MakeMyTrip
MakeMyTrip is a humongous online firm for travel and accommodation needs. It offers cheap and comfortable travel to its users and while it makes their holidays better, MakeMyTrip also decided to give a cheap on user data and a comfortable web experience to its users with the help of progressive web applications.
Conversion rates increased 3x, page load time increased by 38% and user sessions increased by 160%.
Settled
Settled is a real-estate organisation. Like a lot of the above cases, Settled also realised that most of its users access its website from mobile and they need to carefully curate the experience for its mobile users. And hence, Settled moved onto creating a progressive web application.
After its conversion to a progressive web application, Settled observed 23% increase in conversions which is a huge milestone to be achieved.
Pure Formulas
Pure formulas is a healthcare supplies company based in the United States. After converting to a progressive web application, there was a 23% increase in the revenue they generated from their application and a 9% increase in their AOV.
Frequently Asked Questions
Why do we use a progressive web applications (PWA)?
Users can benefit from PWAs' installability, progressive enhancement, responsive design, re-engagement, linkability, discoverability, network independence, and security.
What is a manifest for a web application?
In order for a web application to be downloaded and presented to the user similarly to a native app, a web application manifest, as defined in the Web Application Manifest specification, gives the information about a web application in a JSON text file.
Are PWAs superior to native apps?
The advantages of a progressive web applications over a native app include a quicker time to market and lower development costs. PWA offers a good alternative for companies that don't have the budget to develop native Android & iOS apps but still want to provide their users a mobile experience.
Conclusion
In this article, we have extensively discussed the introduction to Progressive Web Applications, its concepts, creating PWAs with flow, Application installation requirements, PWA Web Application Manifest, and Renaming the manifest, Overriding the generated manifest.
After reading about the Progressive web applications, are you not feeling excited to read/explore more articles on the topic of file systems? Don't worry; Coding Ninjas has you covered. If you want to check out articles related to Vaadin refer to these links
Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But suppose you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problems, interview experiences, and interview bundle for placement preparations.
Nevertheless, you may consider our paid courses to give your career an edge over others!
Do upvote our blogs if you find them helpful and engaging!
Happy Learning!
