jws masterclass progressive web apps
TRANSCRIPT
JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
From Modern WebStandards to Progressive Web APPS
Alexandre Marreiros
Questions?
#MicrosoftJWS
About
@alexmarreiros; Digitalmindignition.com
Alexandre Marreiros
Windows Platform Development Microsoft MVPMicrosoft Windows DevCamp TrainerWindows InsiderCTO @ InnovagencySoftware Dev/Arch as IndependentTechnical Trainer and Speaker as IndependentTeacher @ EDITTechnical Writer
JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
From Modern WebStandards to Progressive Web APPS
JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
Foundations
Web Foundations
Cross Plataform Technologies
Standards
JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
Web Experiences Web Adaption to Embrace Experience
Different sizes, Experiences
Responsive Web Design
Grids
CSS
JavaScript and CSS Frameworks
Image from Template Toaster
JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
Using Web to build APP’s
Cordova
WIN JS
Web as an Equal Citizen (Windows 8 )
Hosted Web APP’S(Windows 10)
JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
“Distribute Native Software is Hard”Alex Russel
JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
Mobile Web Vs Mobile Apps
Web Mobile Vs Mobile AppsWeb 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 integrtionEasy to Search Store DistributionBrowser dependent Can’t Control user’s upgrades
Store Dependent
Web Mobile Vs Mobile Apps
Conected Phone usage
Business Insider
APP Lifecycle
1) User Search for an APP on the Store, ask to download
2) User Install the APP3) User navigate to a Website where is
sugested to download an APP4) Users go to the store
APP Lifecycle1) Check Install
2) Use the APP
Times this is the first and last user’s interation
APP vs Web Mobile Reach
APP vs Web Mobile Reach
JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
Fixing Mobile Web
The Problem
The Fix
The Problem
The Fix
JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
Progressive Web APPS(PWA)
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
Who’s Behind this
Progressive Web APPS Goal
The Main IdeaThey are Sites in the Browser Context but act as Apps once in the Home Screen
https://www.washingtonpost.com/pwa/
The Main Idea
Features of a PWA
Progressive Discoverably Linkable Responsive Secure
Features of a PWAApp-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 Referenceshttps://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
JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
Let´s see how to build a PWA
PWA For a Ticket Website
PWA ManifestA 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
PWA Manifest
Include the manifest
The manifest should them be linked from the index.html page of the Website.
Build the Service Worker
Build the Service Worker
To install and run our Service Worker, include the file in our case sw.js on your website
JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
We had seen the needed Code Let’s see some real examples
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
JOURNEY TO THE WEBSUMMIT ONLINE MASTERCLASSES
Keep the journeyStart today to build your progressive Web APP
ContactsAlexandre Marreiros
Twitter: @alexmarreiros
Email: [email protected]@gmail.com
Blog:Digitalmindignition.com
Linkedin:https://pt.linkedin.com/in/alexandremarreiros
Thank you!Check out upcoming
masterclasses at http://aka.ms/jwsmasterclasses