In this blog series we’ll create together a “Car Deals” website.
You can preview the site demo over here https://bstavroulakis.com/pluralsight/courses/progressive-web-apps/app/ .
And the Github page over here => https://github.com/bstavroulakis/progressive-web-apps/tree/master/car-deals
However, this site is not your average webpage, but can be considered a Progressive Web App. But, what series of technologies and practices does a site need to become a “Progressive Web App”? Also, what are the benefits in applying these practices?
We will answer this question during the blog series.
Web VS Native
On the mobile, native apps won the fight right? A user spends 85% of his time using Native applications and 15% on the Web. Also, who can forget the infamous quote by Mark Zuckerberg that ‘The biggest mistake we’ve made as a company is betting on HTML5 over native.’, ouch!
And this totally makes sense, native apps are awesome! They have numerous advantages
- They work offline
- Exhaust hardware capabilities (bluetooth, nfc, battery, sensors, camera, …)
- Exhaust software capabilities (contacts, calendar, email, photos, videos, gallery, …)
- Better memory management
- Consistent frame rates (scrolling, tapping, dragging, …)
- Home screen Icon
- Push Notifications
How could a web page ever compete running on a browser? Why would I even care?
There are a new series of Web APIs hitting the road such as Service Workers, Cache API, Push API, Web Bluetooth API, Geolocation API, …
For a full list of features you can use in the browser that you are running you can check out this site => https://whatwebcando.today/
I see, so the Web community is progressively releasing new standards. But why should I care?
Well developers and users love the Web.
Developers because they have:
- Cross-platform compatibility
- Leverage technologies they already know and use to create a web app.
- Least effort using a more standardized platform than 2-3 different ones.
- Cheaper to maintain
- Instant Updates
- No Store Approval
- They don’t need to download an application
- Seamless interaction between devices and desktop
- Links and interaction between websites
To make more rich mobile and desktop experiences though we need
- More reliability concerning offline usage
- Faster more fluid 60fps interaction
- Better hardware capabilities
- Better software capabilities
- Home screen installation
- Engaging with push notifications and background sync
Progressive Web Apps represent an experience that is good enough for the user to interact and satisfy his goals on the desktop and the mobile as well.
Why Native VS Web may be the wrong question?
When you have a hammer every problem looks like a nail. The technologies that we’ll go over don’t necessarily mean that every web application you’ll create from here on will be a progressive web app that will replace all of the other technologies you’re using for your mobile strategy.
However, it is generally a good idea to have a full scope of what tools you have in your disposal. And with the ones that we’ll go over, you as a web developer will have more capabilities to create amazing mobile experiences and faster more engaging websites on the desktop as well. These tools and practices can provide a better experience for everyone regardless of the device or browser they are using.
See you in the next blog post where we’ll create the App Shell of our application.