Tweet
Tweet

Slide 1

Slide 1 text

Progressive Web Apps: Make the web native! Hackschool Karlsruhe Steffen Jahr @steffenjahr [email protected]

Slide 2

Slide 2 text

Hackschool Karlsruhe Progressive Web Apps: Make the web native! Who is speaking? Steffen Jahr Software Developer @ Thinktecture AG ! [email protected] " @steffenjahr # https://steffenjahr.de

Slide 3

Slide 3 text

• Native development • One programming language per platform • Android: Java • iOS: Objective-C • Windows Phone: C# Progressive Web Apps: Make the web native! Hackschool Karlsruhe App development at the beginning (Source: https://www.ifixit.com/Device/iPhone_1st_Generation)

Slide 4

Slide 4 text

• Cross Platform Development • HTML5, JavaScript & CSS3 • Write once, run anywhere! Progressive Web Apps: Make the web native! Hackschool Karlsruhe App development today (Source: http://view.ionic.io/phones.png)

Slide 5

Slide 5 text

What’s next? Progressive Web Apps: Make the web native! Hackschool Karlsruhe App development in the future ?

Slide 6

Slide 6 text

• 669k Apps in Windows Store (phones and tablets included) • 29k Apps in Mac App Store • Native development • C# • Swift • Objective-C • Electron app • HTML5 • CCS3 • JavaScript Progressive Web Apps: Make the web native! Hackschool Karlsruhe What about desktop?

Slide 7

Slide 7 text

• No difference between website or app • Apps can be installed directly from browser • One programming language for all platforms • Access to native device resources Progressive Web Apps: Make the web native! Hackschool Karlsruhe What about the future?

Slide 8

Slide 8 text

The answer! • Defined by Google in 2015 • No new technology to develop applications • No new programming language needed • Describes a type of applications • Installable • Offline • Push Notifications • And much more… Progressive Web Apps: Make the web native! Hackschool Karlsruhe Progressive Web Apps

Slide 9

Slide 9 text

Properties Progressive Web Apps: Make the web native! Hackschool Karlsruhe Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable

Slide 10

Slide 10 text

A real world application • Twitter Lite (introduced April 2017) • Push Notifications • Responsive • Offline • Safe • Automatic Updates • https://lite.twitter.com/ Progressive Web Apps: Make the web native! Hackschool Karlsruhe Progressive Web Apps (Source: https://lite.twitter.com/)

Slide 11

Slide 11 text

A demo project • Demo Progressive Web App • Angular with Angular CLI • Responsive • Service Worker • Offline • Push Notifications • Installable • Online: https://pwa-wishlist.herokuapp.com • Repo: https://github.com/thinktecture/pwa-wishlist Progressive Web Apps: Make the web native! Hackschool Karlsruhe PWA Wishlist

Slide 12

Slide 12 text

Let’s build a foundation • Frame of the application • Cached • Fast loading time • Content is loaded dynamically • Minimal HTML, CSS and JavaScript Progressive Web Apps: Make the web native! Hackschool Karlsruhe App-Shell (Source: https://developers.google.com/web/updates/2015/11/app-shell)

Slide 13

Slide 13 text

Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo

Slide 14

Slide 14 text

• Single Page Applications = SPA • Only one page that is loaded only once • Content is replaced dynamically • No reload on links • Famous frameworks: • Angular • React • Vue.js Progressive Web Apps: Make the web native! Hackschool Karlsruhe Excursion: Single-Page Applications

Slide 15

Slide 15 text

• Lives in its own JavaScript file • Has its own thread to prevent UI blocking • Background tasks • No DOM manipulation • Can communicate with the application • Send messages with postMessage() • Proxy between app and network • Have to be installed • Available: https://jakearchibald.github.io/isserviceworkerready/ Progressive Web Apps: Make the web native! Hackschool Karlsruhe Service Worker

Slide 16

Slide 16 text

Progressive Web Apps: Make the web native! Hackschool Karlsruhe Service Worker Service Worker Internet Website HTML/JS

Slide 17

Slide 17 text

Lifecycle Progressive Web Apps: Make the web native! Hackschool Karlsruhe Service Worker Installing Parsed Error Activated Idle Terminated fetch/ message

Slide 18

Slide 18 text

Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo

Slide 19

Slide 19 text

Security first! • Progressive Web Apps require HTTPS • Only localhost is allowed for development • Security is very important because of Service Worker power • Service Worker can affect the application • Service Worker has access to network traffic Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Safe”

Slide 20

Slide 20 text

• Developing gradually • Features depending on browser support • Check for feature support: https://caniuse.com • Browser with the best support: Google Chrome • No Service Worker support (yet): Internet Explorer, Edge, Safari Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Progressive”

Slide 21

Slide 21 text

Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo

Slide 22

Slide 22 text

• One layout for all devices • Phone • Tablet • Desktop • Layout reacts on resizing • Implementation with CSS3 Media Queries or CSS frameworks (that use Media Queries) • Media Queries: https://github.com/eduardoboucas/include-media • Bootstrap • Foundation • Material Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Responsive”

Slide 23

Slide 23 text

Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo

Slide 24

Slide 24 text

• How to differ between a website and a Progressive Web App • Idea: Define Metadata for the application • Solution: Manifest.json • Requirement for more Progressive Web App features • Linked in index.html • Search machines can differ between website and app Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Discoverable”

Slide 25

Slide 25 text

Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo

Slide 26

Slide 26 text

• Usage of native APIs • Audio • Camera • Storage • Location • No reload on site navigation • Usage of app shell • Fast loading time • Dynamic content • Development: Mobile first Progressive Web Apps: Make the web native! Hackschool Karlsruhe “App-Like”

Slide 27

Slide 27 text

• Service Worker is always up-to-date • Caches will be refreshed during update • Respects max-age of the Service Worker script • Service Worker will be reloaded every 24h at least Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Fresh”

Slide 28

Slide 28 text

Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo

Slide 29

Slide 29 text

• App is available offline • Difference between app and data • App can be cached in Cache Storage through Service Worker • Data should be cached in a local storage (LocalStorage, IndexedDB) Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Connectivity Independent”

Slide 30

Slide 30 text

Offline strategies • Cache only • Network only • Cache, falling back to network • Cache & network race • Network falling back to cache • Cache then network • Generic fallback • https://jakearchibald.com/2014/offline-cookbook/ Progressive Web Apps: Make the web native! Hackschool Karlsruhe ”Connectivity Independent”

Slide 31

Slide 31 text

Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Connectivity independent” App Cache Storage Database Server Internet fetch HTTP Service Worker

Slide 32

Slide 32 text

Fetch-API • No usage of XMLHttpRequest • Fetch API is more powerful • Usage of Cache API • Promise based • No-CORS-Requests if server doesn’t support CORS • Streaming responses • Abort requests • Report progress • Helps Service Worker to act as proxy between app and network • Service Worker uses API to respond network requests from cache Progressive Web Apps: Make the web native! Hackschool Karlsruhe ”Connectivity Independent”

Slide 33

Slide 33 text

Browser storage • Used to store app data • Different types • Local Storage (only few MB) • Only key – value • Service Worker has no access to Local Storage • IndexedDB (depends on browser) • More powerful then Local Storage • Provides indexes • Has own query language • Supports transactions Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Connectivity Independent”

Slide 34

Slide 34 text

Data Sync • How is data synced with the server? • Sync in the app • Sync on interval • Sync on action • Sync within the app can crash the application Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Connectivity Independent”

Slide 35

Slide 35 text

The Progressive Web App way to sync data • Use of Sync API • Available in Service Worker • Syncs data in Service Worker instead of the application • Two types of sync: • Sync • Periodic sync • Periodic sync is not implemented yet • Sync API is only implemented in Google Chrome Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Connectivity Independent”

Slide 36

Slide 36 text

Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo

Slide 37

Slide 37 text

Please come back • Bring back users to the application • Progressive Web Apps can use notifications • Look like native app notifications • Also notifications on desktop • App needs authorization for notifications Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Re-engageable”

Slide 38

Slide 38 text

Push API • Service Worker can receive push data from the server • Supported by: • Google Chrome • Mozillla Firefox • Every Browser has its own Push Service • Chrome: Firebase Cloud Messaging • Firefox: Mozilla Push Service • Push messages only can be received from this Push services (yet) Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Re-engageable”

Slide 39

Slide 39 text

Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo

Slide 40

Slide 40 text

• Installable without App Store • Browser shows banner to install • Needs information in Manifest.json • Icon (144x144) • Name • User has visited site at least twice, with at least five minutes between visits • Installable depends on Service Worker Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Installable”

Slide 41

Slide 41 text

• App is linkable because it is a web application • State of the application is controlled by URL • https://pwa-wishlist.herokuapp.com/#/features • Very complex to implement in conventional desktop applications Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Linkable”

Slide 42

Slide 42 text

• Web Share API • Share data with other applications • Only available in Chrome Beta for Android • Web Share Target API • Make your application a share target • Payment Request API • Start payment request • Only available in Edge and Chrome for Android • Web Bluetooth API • Interact with bluetooth devices • Only available in Chrome Progressive Web Apps: Make the web native! Hackschool Karlsruhe More APIs

Slide 43

Slide 43 text

Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo

Slide 44

Slide 44 text

Advanced tools for Progressive Web Apps • sw-toolbox • Provides common caching strategies for dynamic data (API Calls) • https://github.com/GoogleChrome/sw-toolbox • sw-precache • Includes sw-toolbox • Creates Service Worker with filled caches for static files (HTML, CSS, JavaScript, images, …) • Also provides common caching strategies • https://github.com/GoogleChrome/sw-precache Progressive Web Apps: Make the web native! Hackschool Karlsruhe Tools

Slide 45

Slide 45 text

Lighthouse • Tool from Google • Chrome-Extension or Node module • Checks different indicators if your app works like a Progressive Web App • Service Worker • Performance • App-Like • HTTPS Progressive Web Apps: Make the web native! Hackschool Karlsruhe Tools

Slide 46

Slide 46 text

Progressive Web Apps with Angular • Mobile Toolkit • Not up-to-date • Alpha version • @angular/service-worker • Creates a Service Worker • Push Notifications • Caching • @angular/app-shell • Not up-to-date • Combines client and server side rendering Progressive Web Apps: Make the web native! Hackschool Karlsruhe Excursion: Angular

Slide 47

Slide 47 text

• Progressive Web Apps can be the future • Depends on support of browser companies • Especially Apple has done nothing for Service Workers • Payment has to be solved • No App Stores === No payment • Payment Request API can be the right way • Google and Microsoft are pushing hard! • New APIs are coming Progressive Web Apps: Make the web native! Hackschool Karlsruhe A glance across the border

Slide 48

Slide 48 text

• Livin’ On The Edge • Browser support is not optimal • Great way to extend current applications • Progressive Web Apps can be built for Android devices • Apple is forced to act because of Androids overwhelming market share Progressive Web Apps: Make the web native! Hackschool Karlsruhe Summary

Slide 49

Slide 49 text

Thank you! Questions? Repository https://github.com/thinktecture/pwa-wishlist https://github.com/steffenjahr/service-worker-demo Contact @steffenjahr [email protected]