PWA | Part 01 : Introduction
So you might hear about a mobile first approach, it consists basically of thinking about the rendered version of your website in a mobile device, So it’s going to be either Responsive or Fluid, It depends on your vision and the way you see things when it comes to CSS.
And to be frank, it’s about it, and it’s nothing new we’ve used such approach since the appearance of Smartphone back in 2007 after the iPhone showed up and took the world by storm, but now in a world where most of people depend on their mobile devices to get things done, is it enough just to have a Website that just looks good over a phone?
Another urgent matter is the forums definitive question, would I create a Mobile App or a Website? For almost a decade picking Mobile was the answer, we had and have amazing functionalities, awesome hardware options, and even more pluggable platform and it’s great, but for now things are moving again and since last year’s summer a new term and a new approach started to see the light and I’m talking basically about the: Progressive Web Applications or PWA for short
In this Series, I will going to talk, showcase how things are done using nothing but plain JavaScript, we will talk about the what, how and where to start and how we can use the awesome tools so we can have more fun and more pleasure while writing our upcoming Web Apps !
Definition :
According to Google Developers :
Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They’re reliable, fast, and engaging.
Now, that looks promising, let’s digest that !
- “Bring the best of mobile sites and native applications” : I want to focus on the Native Part of the definition, Native Apps have many great functionalities, they are just great, they are secure, dependable and again great functionalities, I’m talking about: Push Notification, Offline presence and more.
- “They’re reliable” : Native Apps are reliable, and dependable, you can open them, work with them and use them no matters how hard were the conditions.
- “Fast, Engaging” : Native Apps are built to offer just that because they use the device full capabilities and resources in order to run and that’s obvious.
So yeah, Native Apps are powerful, and we can do and implement every possible scenario using them, but what about modern Web Apps?
Crossover:
I don’t want to exaggerate and say that we can in fact abandon our Native Apps for a modern, well built Web App using nothing but Javascript, it’s easy, engaging and feels just great after doing it in the right and suitable manner.
Now let’s discuss what we can do and the capabilities we have while choosing a PWA Approach.
- Offline Presence: Offline experience is not strange in the Modern Web, but now using a new kind of technology called: Service Workers caching things inside a browser is very intuitive.
- Push Notification: Using the Web Notification API and Push API to do so inside a Service worker is one of major added value in today's Web Scene and it’s fairly easy, i’m talking about roughly a dozen of lines of code which is impressive plus a rendering part that looks like this in a Desktop :
And in a phone the rendering will look like so :
If you notice, the rendering of a Web Push Notification over a mobile device looks exactly like a native one, which is GREAT! Knowing that a Web Page generated such thing.
3. App like presence :
Such thing is represented in two main things : the first one is “Home Presence” which means that we can have our application present over a Home Screen, and the second one : Generally Native Application Have : “Icons” “Splash Screens” “Starting Point” and such thing is highly an undoubtedly available in a modern PWA.
Conclusion
Things now are clearer and more appealing — I Guess — and in the next articles I will start to show we can do just that and build a PWA that have all given options mentioned above.
Till Then PEACE ;)
