This Slide Deck Was used on my Masterclass abut PWA in my Masterclass about PWA and Web Standards. Thia was an introduction to PWA and his basic stone Path.
22. Web Mobile Vs Mobile Apps
Web Mobile Mobile APPS
Interoperability Performance
Vendor Independent Reliable
Streamined Mantenance and Upgrade Pathways Seamless User Interface
Based on Open Standards OS Embracement
Increased Security Options Easy Offline Support
Shorter Time To Market Push Notifications
Leverage Existing Web Skills Experience and Evolution Native APIS and device features integrtion
Easy to Search Store Distribution
Browser dependent Can’t Control user’s upgrades
Store Dependent
25. APP Lifecycle
1) User Search for an APP on the Store, ask to
download
2) User Install the APP
3) User navigate to a Website where is
sugested to download an APP
4) Users go to the store
26. APP Lifecycle
1) Check Install
2) Use the APP
Times this is the first and last
user’s interation
35. The Main Idea
“Taking Advantage of the latest Web Technologies and Web development
Skills and Experience, to combine the best of Web and Mobile APPS”
Kevin Farrugia, Incredible Web
“This kind of Aplications are almost equal to the APPS on the Store, but
They are just Websites who had take Vitamins.”
Fabricio Teixeira, BlogAI
40. Features of a PWA
Progressive Discoverably Linkable Responsive Secure
41. Features of a PWA
App-like:
A progressive web app should look like a
native app and be built on the
application shell model, with minimal
page refreshes.
Re-engageable:
Mobile app users are more likely to
reuse their apps, and progressive web
apps are intended to achieve the same
goals through features such as push
notifications.
Installable:
A progressive web app can be
installed on the device’s
home screen, making it
readily available.
Fresh:
When new content is
published that content
should be made
available in the app.
42. Before Start- Understand Service Worker
Service workers are programmable
proxies that sit between the user’s tab
and the wider Internet. They intercept
and rewrite or fabricate network
requests to allow very granular caching
and offline support.
The service worker’s function is to
simplify the process of bringing an app
offline; it also lays the foundation for
future app-like features, such as push
notifications and background sync.
43. Before Start – Understand Service Worker
Service workers are Independent from
the WebPage Doom.
Are a Browser Feature
Most supported on:
Chrome, Firefox, opera
Almost suported on Edge
44. Before Start – Understand Service Worker
To help you build your first service Worker:
https://remysharp.com/2016/03/22/the-copy--paste-guide-to-your-first-service-worker
48. PWA Manifest
A web app manifest file is a simple JSON file that follows the W3C’specification.
This metadata file in essence says to the OS that the WebSite as a APP
Behavior. I case of using an Android Phone when you enter a Website that as a
Manifest The browser will present a installation banner
56. To Test
There also a Shell variation that we can get from GitHub https://github.com/GoogleChrome/lighthouse
57.
58. Challenge For Progressive Web APPS
• Few browser support is available till now, hence are efforts to be made by
the browsers to integrate features like Service Workers.
• Engagement with the user to use the web page more and more for better
performance during offline mode or slow internet speeds.
• Native Apps that work completely offline cannot be converted into
Progressive apps.
• Progressive Web APPs are a Challenger but this is not a battle, so it is
necessary to understand what’s the role of PWA and Native APPS