Our #FrontendatBytex series has continued with an Introduction to Progressive Web Apps, where our colleague Alex Raescu walks you through what PWAs are, when you should use them, and what sets them apart. Below you will find the entire video script. Have fun!
‘Hey, I’m Alex, welcome to another episode of Frontend at Bytex! Today we’re going to talk about progressive web apps – what they are, what they are helpful for, and some pros and cons when it comes to using them.
Progressive web apps (PWAs) are a type of application that combines the capabilities of a website with the benefits of a native app. They are designed to provide users with a seamless and reliable experience, regardless of the device or platform they are using.
PWAs are built using web technologies such as HTML, CSS, and JavaScript, and can be accessed through a web browser like any other website. However, they also have the ability to be installed on a user’s device, just like a native app. Once installed, they can be launched from the home screen and run offline as well.
One of the main benefits is their ability to work across a wide range of devices and platforms. Since they are built using web technologies, they can be accessed on any device with a modern web browser, including smartphones, tablets, and laptops. This makes them an attractive option for developers, as they only have to build one version of the app that can be accessed by a wide range of users.
Another benefit of PWAs is their ability to deliver a high-quality user experience. They are designed to be fast and responsive, and can be used offline or in low connectivity environments. This makes them ideal for use in areas with poor or intermittent internet connectivity.
In addition to their technical capabilities, PWAs also offer a number of benefits for businesses. They can be easily discovered through search engines, and can be easily shared through links. This makes them an effective way to reach new users and drive traffic to a business website or app.
Despite their many benefits, PWAs are still relatively new and are not yet widely supported by all browsers and devices. However, as more businesses and developers begin to adopt this technology, it is likely that support will continue to grow and they will become an increasingly important part of the mobile app landscape.
Some key features include:
- Responsive design: the apps are designed to work on any device, including desktop computers, tablets, and smartphones. They adapt their layout and functionality to the device they are being used on, providing a consistent experience across devices.
- Offline functionality: they are built to work even when the user is offline, using caching and other techniques to ensure that the app can continue to function without an internet connection and I think this is the most challenging part because there are so many things that can go wrong here. Let’s dive in on this aspect. There are several techniques that can be used to achieve offline functionality in a progressive web app (PWA). Some of the most commonly used methods include:
- Service Workers: A service worker is a script that runs in the background of a web page, separate from the main JavaScript thread. It can intercept network requests and respond with cached resources, allowing the app to continue functioning even when the user is offline.
- Cache API: The Cache API allows an app to store resources, such as HTML, CSS, and JavaScript files, in the browser’s cache. These resources can then be retrieved and used even when the user is offline.
- IndexedDB: IndexedDB is a JavaScript-based, NoSQL database that can be used to store data in the browser. It can be used to store data that the app needs to access when offline, such as user data or app state.
- App Shell Architecture: App Shell architecture is a design pattern that separates the core UI of this type of app from the dynamic content. By caching the shell of the app, it will load quickly and look good even when the user is offline.
When implementing offline functionality, it is important to also consider how the app will handle transitioning between online and offline states. For example, the app should display an appropriate message to the user when offline and gracefully handle any errors that may occur as a result of being offline.
Some other key features include:
- Fast loading times: these apps are designed to load quickly, even on slow internet connections, using techniques such as lazy loading and code splitting on top of the above mentioned technical aspects to ensure that only the necessary resources are loaded at any given time. Also this can be achieved through the use of technologies such as web assembly and web workers, which allow for efficient and high-performance code execution.
- Native app-like features: PWAs can include features such as push notifications and home screen icons, making them feel more like native apps to users.
- Easy installation: they can be installed directly from the web, without the need to go through app stores or install additional software.
PWAs are becoming increasingly popular as a way to provide a native-like experience to users without the need to develop and maintain separate native apps for different platforms. They are particularly useful for businesses and organizations that want to provide a convenient and seamless experience to users on a variety of devices.
In conclusion, PWAs are a powerful and flexible solution for creating web-based apps that provide a user experience similar to that of native mobile apps and as a result, they are a cost-effective and accessible alternative to native apps that can provide a great experience to a wide range of users.’
If you liked what you saw, you can always enjoy the other episodes from this series and, as always, make sure to share and stay in touch!
