We could define them as web pages that behave like native applications.
They are called progressive because they increase their functionality based on the capabilities of the device they are running on. They are web because they are built using web development standards (some already known such as HTML, CSS, JavaScript; and a new generation of JavaScript APIs), and finally, they are called apps because cambodia telegram Progressive Web Apps behave like native web applications, only they use web technologies.
Progressive Web Apps are a set of new standards that have made PWA a concept today.
BRIEF HISTORY
The emergence of native apps (iOS, Android, among others) brought with it a series of advantages over web pages such as local storage, offline execution, performance, etc. But the advantages of native apps over web pages have been progressively reduced.
The innovations and elements introduced by HTML5 brought the experience of web interfaces closer to that of native applications. Later, hybrid apps appeared, combining web technologies such as HTML, CSS and JavaScript, but they are neither native mobile applications nor web-based. Hybrid applications improved installation, hardware access and push notifications , but they did not provide optimal results in terms of performance, user experience and offline access.
Today, with the advancement of standards and browsers, it is possible to create web applications that manage to match the advantages of native applications. They are web applications, but for the user, using a PWA is (or should be) the same as using a native app.
MAIN OBJECTIVES OF A PWA
The goals when creating a PWA are:
Maximum performance on mobile
Instant loading speed
Interface equal to the native app interface
Icon and access from the home page
Execution and offline access
Push Notifications
To achieve these objectives, PWAs are based on the following concepts:
Service Workers: Service workers are a technology that allows services to run in the background in browsers. Service Workers can run independently of the application (they can remain running while the web application is closed). They offer advanced capabilities: communication interception, information caching, background content downloading, offline work, or the ability to send notifications (Push Notifications).
Service Workers provide a powerful feature for offline data storage. It is not strictly necessary to use Service Workers to create a PWA, but it is advisable if the web application you want to create requires advanced functionality.
App Shell: The App Shell is a model or pattern for creating web applications. It consists of separating the content and functionality in the application. On the one hand, the application is cached for offline use, optimizing the loading speed; and, on the other hand, the content can be loaded from an initial cache and then updated, or directly from the web if there is a connection. The objective is to achieve a faster user perception of the app's loading speed. By initially loading the "shell" from a cache, the user will see the app immediately.
Application manifest: This consists of creating an icon that users can pin to their home page to access the web application directly. To control the appearance of the icon, it is possible to use various techniques depending on the browser and operating system. In iOS, it is controlled through "meta" headers that can be added to the main page of the web application. In the case of Android and Chrome, a file called "Manifest" is used. Additionally, Google makes it so that when an application is added to the Android home menu, an installation banner appears just like that of a real application, all with the aim of making the experience more and more similar to that of native applications.
The biggest advantage of creating a progressive web app is that if you already have a web app, it is very easy to bring the experience of a native app. If you are thinking of converting your website into a PWA and don't know where to start, don't hesitate to contact us at Kiwop; we can help you!
