La verdadera razón de esto, es la portabilidad y el bajo costo de obtención de los dispositivos, la facilidad de acceso a internet y la enorme cantidad de proveedores de servicio de redes móviles. Esto hace del tráfico móvil el mejor canal de distribución así como el tráfico objetivo.
Para compañías pequeñas que no tienen acceso a el capital ni el tiempo para el desarrollo de aplicaciones nativas las aplicaciones web son la solución indicada que da la oportunidad de obtención de clientes ofreciendo la mejor experiencia posible.
Si las compañías ya cuentan con desarrollos nativos para las distintas tiendas, y busca ofrecer sus servicios en un ambiente web, las PWA (Progressive Web Apps) podrá ofrecer en un navegador la experiencia más cercana a un desarrollo nativo, dando la capacidad a los usuarios de descargar e instalar la aplicación sin el uso de hardware y memoria que un desarrollo conlleva.
Si la compañía quiere obtener el máximo numero de clientes, ofreciendo la mejor experiencia de usuario las PWA´s son lo más cercano a la experiencia que una aplicación nativa ofrece.
Vamos a tomar un ejemplo de una aplicación que sabemos que conoces bien, Whatsapp. Cuando no tienes acceso a internet, puedes continuar usando l When there is no network, you can still open the app, check past messages and even reply to someone. When the phone gets the internet connection, the messages are being automatically sent in the background.
This is what PWA promises to provide in web apps. It enables web apps to load when there is no network, sync in the background and seamlessly do things while providing a native-like experience for your users.
Let’s discuss some of the core attributes which are missing from common non-progressive web applications.
All the above characteristics are possible in PWA.
A PWA is just a regular web app which attended the best university and mastered user experience🎓
Few people think that a PWA is coupled with the latest UI frameworks like ReactJs, Angular 6 or Vue.js. Well, not necessarily. PWA has nothing to do with the framework you are using, it only needs the required components.
That was exactly my first thought about PWA. How exactly can web apps open without the internet?
We all know native apps can open without an internet connection because when we download and install them, critical resources like UI components and some data are stored in the device…. well, this is exactly what happens in a PWA as well 😀
The PWA stores HTML files, CSS files and images in the browser cache and the developers can fully control the network call. All of these are being achieved by Service Workers.
PWA has some important technical components which work together and energizes the regular web app. The following components are required to develop a good PWA.
Let’s get an overview of each of them.
Our web apps talk to the network directly and if there is no network, the screen shows the famous dinosaur.
Here is an opportunity to optimize this process. For the first-time load, the service worker stores the required resources in the browser cache. And when the user visits the app next time, the service workers check the cache and returns the response to the user before even checking the network.
This can speed up the performance of your app, wheter the device is connected or not connected to the internet.
The developer have full control over the behavior of the app and how it should respond in various scenarios. The service worker has its own lifecycle events.
Once the caching is complete and ready for offline visits, you can also choose to brag about it by displaying a note saying that caching is complete and the user can visit this offline as well.
2. The manifest file
The manifest file is a config JSON file which contains the information of your application, like the icon to be displayed on the home screen when installed, the short name of the application, background color, or theme.
If the manifest file is present, the Chrome browser will automatically trigger the web app install banner, and if the user agrees, this adds the icon to the home screen and the PWA is installed. Isn’t this bossy? 😎
The following is the sample manifest file:
"name": "Fidget spinner",
Check the manifest file in action in following screenshots.
Service workers have the ability to intercept the network requests and can modify the responses. Service workers perform all the actions on the client side. Hence, PWA requires secure protocol HTTPS.
The service worker has the ability to receive push notifications and background sync, which definitely increases the user experience and keeps the customer engaged. Push notification and background sync are optional, but are recommended to provide a more native-like experience.
Today, there are many PWAs which available out there. If you want to play around with a PWA and want to see service workers in action, visit fidgetspin.xyz and switch to the Application tab in Chrome’s DevTools.
You can visit https://pwa.rocks/ which has a good collection of PWA apps.
There are few open source tools available which enhance and make it easy to develop PWA.
Google publishes the success stories of companies which implemented PWA. Visit this page to read more about how companies have solved problems to handle slow network, how they optimized the user experience and got up to 80% increase in conversions and SEO performance.
This showcases various problems faced by various companies around the globe and how they solved it using PWA. I am pretty sure you will get directions on how a PWA can prove helpful for you as well.
Please feel free to comment below with any questions or suggestions, and please consider clapping 👏 if you liked this post. Keep learning and sharing 😊