What are Progressive Web Apps?

Asked

Viewed 1,870 times

22

Hello, I’ve read references around, and to complement our community, follow the questions.

  • What exactly is Progressive Web App (PWA) or Web Application Progressive?
  • What advantages there are compared to native and hybrid applications?

4 answers

18


Progressive Web Apps are experiences that combine the best of the Web and the best of the apps. They are useful for users since the first visit in a browser guide without requiring installations. As the user develops a relationship with the application throughout the time, it becomes more and more effective. It is loaded quickly, even in unstable networks, sends relevant push notifications, has a icon on the home screen and is loaded as a screen experience high-level whole.

What is a Progressive Web App?

A Progressive Web App is:

  • Progressive - Works for any user, regardless of the browser chosen, as it is created with progressive enhancement as a fundamental principle.
  • Responsive - Fits any format: desktop, mobile phone, tablet or whatever is invented below.
  • Connectivity independent - Enhanced with Workers service to work offline or on low-quality networks.
  • Application-like - Looks like apps for users, with app-style interactions and navigation because is compiled in application shell model.
  • Current - Always updated thanks to the service worker update process.
  • Secure - Provided via HTTPS to prevent intrusions and ensure that content is not tampered with.
  • Discoverable - It can be identified as "application" thanks to W3C manifests and the service worker registration scope, which
    allow search engines to find them.
  • Reenvolement - Facilitates reengagement with features like push notifications.
  • Installable - Allows users to "store" the most useful apps on their home screen without having to access a apps.
  • Linkable - Easily share by URL, no complex installation required.

Reference: https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/

What advantages there are compared to native and hybrid applications?

I believe that the advantage in choosing to develop a PWA is that it is accessible in cross-platform (Android, iOS, etc.) and that it will also be accessible in multi-device (smartphones, tablets and desktops). The downside is that some Features are currently impossible to implement because PWA does not have access to components like Bluetooth, NFC, Fingerprint etc.

inserir a descrição da imagem aqui

I also recommend reading a tableless article: https://medium.com/tableless/introdu%C3%A7%C3%A3o-aos-Progressive-web-apps-ad47ba24cddb#. 58g85rpyw

8

Large companies and technology enthusiasts already realize that the number of mobile app downloads has been decreasing each year and in the face of this situation emerged the Progressive web apps. The Progressive Web Apps are a set of techniques to develop web applications, adding features that were previously only possible in native apps.

inserir a descrição da imagem aqui

The following characteristics, created by Google, define what is expected of a Progressive Web App:

  • Progressive: for any user, regardless of browser
  • Responsive: made for any device: desktop, tablet and mobile
  • Connection: works even if the user is offline
  • App-like: user feels in a native application
  • Updated: no need to download app updates, the browser will simply detect and update automatically if necessary.
  • Secure: only with https
  • Engadable: through push Notifications, the user can be constantly engaged.
  • Installable: You can add an icon to the smartphone’s main screen with just one click.

If before only native applications had: push Notifications, offline operation, geolocation and icon on home screen, with the Progressive web apps we can have these features on the web.

Some benefits that can be cited in relation to Pwas:

  • Retention: A user who wants to try an application, needs to go through several steps like searching the application, install, open, free mobile permissions, etc. When we talk about Progressive Web Apps, the user just access the link and is already using the application. That is, the user does not need to commit, and waste time, in installing an app to only later be able to evaluate whether this app was worth it or not.
  • Economics: If you really need a native app, the expenses needed to hire a specialized team of iOS/Android developers will certainly be well invested. But if you don’t need a native app in your case, a PWA might very well meet your business requirements. If this is the case, the savings generated by this decision will be immense.

Some disadvantages that can be cited in relation to Pwas:

  • Limiting: A Progressive Web App cannot currently reproduce all the features that a native application can produce, such as bluetooth, contact list and NFC, are some examples of Web sites that cannot be accessed by Progressive Web Apps.

Fonts - Content adapted from websites:

7

What exactly is Progressive Web App (PWA) or Progressive Web Application?

This part you find in documentation:

Progressive Apps for the Web

They are experiences that combine the best of the Web and the best of apps. They are useful for users from the first access to a browser, no installation required. As the user builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even in unstable networks, sends relevant push notifications, has a home screen icon and is loaded as a high-level full screen experience.

Technical Advantages

  • Progressive: work for all users regardless of browser choice as they are created with enhancement progressive as a central principle;
  • Responsive: fit any format: computer, mobile device, tablet or whatever is to come;
  • Connectivity independent: enhanced to use service workers to work offline or on low-quality networks;
  • Similar to an app: user feels they are using an app, with interactions and navigation in the same style of apps, as they are created in the app shell template;
  • Up-to-date: always up to date, thanks to the updating process of service worker;
  • Insurances: carried by HTTPS to prevent tracking and ensure that content has not been tampered with;
  • Detectable: are identifiable as "applications" thanks to the registration scope of service worker and W3C manifests, allowing what search engines find them;
  • Reengageable: facilitate reengagement through features such as notifications push;
  • Installable: allow users to "save" the apps they find most useful on their home screen without the inconvenience of having that use an app store;
  • Linkable by link: easy sharing through URL, without requiring complex installations.


What advantages there are compared to native and hybrid applications?

In order to use an app you need to download it. What the PWA bring as great advantage is that the user does not need to download the application, because, they run directly in the browser.

PWA "is different from a hybrid app, which uses an HTML5 application wrapped in a native shell, but still needs to be installed by the App Store". (source).

Another great advantage of PWA you need to know basically HTML, CSS, Javascript and Chrome Devtools.


References:

5

PWA are experience Features that a web application can provide to the user so that it is similar to a native application.

The fact that the application is Progressive is that as the user is using the application as Web, it will increasingly integrate itself to the device, assuming a more native form, so to speak.

Among these bodies, there are:

  • Push Notification;
  • Usability offline;
  • Access to mobile services a native application has (camera, Geolocation, vibrations, etc);
  • Access the application by the device homescreen.

The main advantage is usability; for example: a user may not want to download the application in the App Store just to use in a specific case or some other few times. In this case the application becomes hybrid in matters of use, so to speak; it will be able to have use both by the browser’s Auncher and an icon on the device’s home.

In addition, the performace is also remarkable, because the application runs on the device’s browser without needing any Tweaking (such as hybrid applications and the Cordova of life) to be able to run as native and, through Serviceworkers (Feature that a PWA has) the user may have the application data cached and have its navigation as (or more) performative as a native application.

I recommend listening to this podcast to learn more about: http://hipsters.tech/progressive-web-apps-hipsters-03/

Browser other questions tagged

You are not signed in. Login or sign up in order to post.