jws masterclass progressive web apps

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: amarreiros@innovagency.comamarreiros@gmail.com

Blog:Digitalmindignition.com

Linkedin:https://pt.linkedin.com/in/alexandremarreiros

Thank you!Check out upcoming

masterclasses at http://aka.ms/jwsmasterclasses