Progressive Web Apps in 2024

here's the thing I'm really really lazy and just like any lazy developer I hate writing unnecessary code this is especially true when building mobile apps where I have to dedicate double the effort to have my code break natively in multiple environments this is why Progressive web apps are so appealing for many of us with them you can build your web app once and then use the same code base to offer a native experience on mobile devices So in theory you can have your cake and eat it too you can build apps fast without wasting too much money on development and with good end results the number of progressive web app features has increased quite a lot in recent years so let's spend the next few minutes building a progressive web app from scratch and see if this is actually a viable solution these days we'll start by initializing and running a really basic solid JS project this results in an index.html page where a single page app is loaded into an app shell the app itself is just a basic counter based on this script the Dom is rendered and event listeners are attached to the interactive elements easy stuff to convert this web app into a progressive one we need to follow three easy steps first let's create a manifest file which is essential for providing a native applike experience on the web it allows users to install your app on their devices home screens ensures a consistent look and feel and provides a full screen immersive experience we'll have to define a name the start URL the preferred display mode and at least one icon for the app to be installable additionally we can optionally add a short name used when there's not enough space to display the full name and some theme options quick side note the Manifest file can contain a variety of other fields to find in your app for the purpose of this example we'll stick with the bare minimum the second step in this process is to register the Manifest file in our app header now we can jump back into the browser and you'll see the install app option present in the navigation bar once you go through the installation process you should see your web app behaving just like a native app on your device now for the fun part let's define and register a service worker this is what is going to allow us to add Progressive functionalities such as offline support background sync or push notifications back in the index.html file we add a small script in the header where the worker is loaded if the browser supports this feature service worker code runs in the background separate from the web page enabling features that don't need a web page or user interaction we'll take the easy route and use Google's workbox to address resource caching this is mandatory when offering offline support I'm loading the library from the CDN and this will give us access to a workbox routing object in our scope then we can register routes and identify what type of resource our app is fetching since images are not likely to change very often we could use a cach first strategy in this case if there is a response in the cache we'll use it directly without making a network call otherwise we'll fall back to the network and then cach the response for any subsequent request scripts might be updated more often so we'll use a network first strategy and try to fetch from the network first we'll only fall back to the cash if the network fails okay but the real question remains what exactly can you do with Progressive web apps what you might not realize is that you can achieve a lot of interesting things thanks to the various web apis these days and this website showcases all these capabilities pretty well while features like media capture or geolocation are fairly common on the web these days you'll be surprised to find out that your plain old web browser has access to the device native position and orientation and can also handle quite complex tasks such as password list authentication or speech recognition if you are still not convinced that Progressive web apps are worth it let me show you two really interesting success stories Twitter's Progressive App led to a 65% increase in pages per session 75% more tweets and a 20% decrease in bounce rate all while reducing the size of their app by over 97% Hulu also replace their platform specific desktop experience with a pwa and saw a 27% increase in return visits if this video was useful you should watch one of these ones next until next time thank you for watching

Channel: Awesome

Views: 36,637

Keywords:

Id: 3ODP6tTpjqA

Length: 4min 6sec (246 seconds)

Published: Fri Jun 07 2024