Tweet
Tweet

Slide 1

Slide 1 text

Progressive Web Applications Jennifer Bland

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland 3 Truths 1 Lie •I have visited 82 countries •I did not attend college •I high five’d the Pope •My home is 400 sq ft

Slide 5

Slide 5 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland What is a Progressive Web App?

Slide 6

Slide 6 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland “Progressive Web Apps use modern web capabilities to deliver an app-like user experience.”

Slide 7

Slide 7 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland “So they are just web pages?”

Slide 8

Slide 8 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland YES!

Slide 9

Slide 9 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Four Requirements • HTTPS • Web app manifest • Service Worker • Responsive design

Slide 10

Slide 10 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland HTTPS • Hyper Text Transfer Protocol Secure • IBDB • Provides security against: • wiretapping • man-in-the-middle attacks

Slide 11

Slide 11 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Web App Manifest

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Manifest.json • short_name - name displayed on shortcut created on desktop • name - what is displayed on mobile apps • start_url - starting point of the application

Slide 14

Slide 14 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Manifest.json • display - defines the developer’s preferred display mode for the web application (standalone | fullscreen)

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Manifest.json • background_color - expected background color for the web application • theme_color - default theme color for an application • icons - an array of image objects that can serve as app icons in various contexts

Slide 17

Slide 17 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Manifest.json • orientation - can enforce a specific orientation.

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Service Worker • Background script to serve network or cached content • What distinguishes a PWA from an HTML website

Slide 20

Slide 20 text

Registration

Slide 21

Slide 21 text

Installation

Slide 22

Slide 22 text

Activation

Slide 23

Slide 23 text

Fetch

Slide 24

Slide 24 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Responsive Design • Can be installed on any device

Slide 25

Slide 25 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland PWA Checklist https://developers.google.com/web/progressive-web-apps/ checklist

Slide 26

Slide 26 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland PWA Performance • Lighthouse

Slide 27

Slide 27 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Lighthouse SEO • Mobile Friendly • Google Bot crawling • Indexing

Slide 28

Slide 28 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Lighthouse Best Practices • Framework provides limitations • Polymer.js

Slide 29

Slide 29 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Lighthouse PWA • Page Load • Service Worker

Slide 30

Slide 30 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Lighthouse Performance • First Paint • First Interactive

Slide 31

Slide 31 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Challenges We Faced • Responsive Design • Deep Linking • Multi Browser Support

Slide 32

Slide 32 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland PWA Training • https://developers.google.com/web/ilt/pwa/ Deep Linking • https://www.udacity.com/course/intro-to-progressive-web- apps--ud811

Slide 33

Slide 33 text

OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland 3 Truths 1 Lie •I have visited 82 countries •I did not attend college •I high five’d the Pope •My home is 400 sq ft

Slide 34

Slide 34 text

www.jenniferbland.com www.in5days.tech www.medium.com/@ratracegrad www.youtube.com/c/jenniferbland github.com/ratracegrad [email protected] @ratracegrad