Jws masterclass progressive web apps

JOURNEY TO THE WEBSUMMIT
ONLINE MASTERCLASSES

About
@alexmarreiros; Digitalmindignition.com
Alexandre Marreiros
Windows Platform Development Microsoft MVP
Microsoft Windows DevCamp Trainer
Windows Insider
CTO @ Innovagency
Software Dev/Arch as Independent
Technical Trainer and Speaker as Independent
Teacher @ EDIT
Technical Writer

JavaScript and CSS Frameworks
Image from Template Toaster

Web as an Equal Citizen (Windows 8 )

Hosted Web APP’S(Windows 10)

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

Conected Phone usage
Business Insider

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

APP Lifecycle
1) Check Install
2) Use the APP
Times this is the first and last
user’s interation

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

The Main Idea
They are Sites in the Browser Context but act as Apps once in the Home Screen
https://www.washingtonpost.com/pwa/

Features of a PWA
Progressive Discoverably Linkable Responsive Secure

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.

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.

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

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

Service Worker References
https://remysharp.com/2016/03/22/the-copy--paste-guide-to-your-first-service-worker
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

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

Include the manifest
The manifest should them be linked from the index.html page of the Website.

Build the Service Worker
To install and run our Service Worker, include the file in our case sw.js on your website

http://www.Flipkart.com
https://flights.airberlin.com
http://www.theverge.com/

To Test
There also a Shell variation that we can get from GitHub https://github.com/GoogleChrome/lighthouse

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

Contacts
Alexandre Marreiros
Twitter:
@alexmarreiros
Email:
amarreiros@innovagency.com
amarreiros@gmail.com
Blog:
Digitalmindignition.com
Linkedin:
https://pt.linkedin.com/in/alexandremarreiros

Thank you!
Check out upcoming masterclasses at
http://aka.ms/jwsmasterclasses

Jws masterclass progressive web apps

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Jws masterclass progressive web apps

Semelhante a Jws masterclass progressive web apps (20)

Mais de Alexandre Marreiros

Mais de Alexandre Marreiros (20)

Último

Último (20)

Jws masterclass progressive web apps