Eme03. Mobilise your Applications as Progressive Web Apps

Size: px

Start display at page:

Download "Eme03. Mobilise your Applications as Progressive Web Apps"

Jacob Baldwin
5 years ago
Views:

1 Eme03. Mobilise your Applications as Progressive Web Apps Paul Harrison (Eight Dot Knut Herrman (Leonso 22nd May 2018 #engageug 1

2 Paul Harrison Consultant at own Company, Eight Dot Three Ltd Domino Administration, Infrastructure & Migrations Web and Native App Developer Skype: edt.paul 2

3 Knut Herrmann Senior Software Architect Leonso GmbH Notes Domino developer since version 2 Web application developer StackOverflow contributor IBM Champion knut.herrmann@leonso.de Skype: knut.herrmann 3

4 Agenda Introduction Key Components Service Worker Lifecycle Events and Storage Development Tools Demo #engageug 4

5 Introduction 5

6 Who is developing Progressive Web Apps? Fun fact: Gartner projects, by 2020, progressive web apps will have replaced 50% of general-purpose, consumer-facing mobile apps. 6

7 What are Progressive Web Apps (PWAs)? Regular web apps, that meet specific criteria, to provide a native-like experience They are platform independent on supported Browsers Native javascript - no Framework required Write once work everywhere, mobile and desktop No need for App Store review and publishing - perfect for Business environments Leverage and enhance your existing Web Development Skills 7

8 PWA Key Characteristics Credit: Microsoft Build

9 Browser Support Credit: Google IO

10 Key Components 10

11 Web App Manifest A simple JSON formatted text file Application configuration options, including: Icon title Icon Launch screen background colour Colour theme Browser chrome (navigation controls) Orientation 11

12 Web App Manifest - Registration Registered in index.html <head> tag using: <link rel="manifest" href="manifest.json"> 12

13 Web App Manifest - Basic Example { "name": "Engage PWA Demo", "short_name": "Engage PWA", "description": "Progressive Web App Demo for Engage 2018", "orientation" : "portrait", "start_url": "index.html", "display": "standalone", "icons": [{ "src": "icon/engage-icon.png", "sizes": "512x512", "type": "image/png" }], "background_color": "#4e8ef7", "theme_color": "#FF7F00" } 13

14 Web App Manifest - Apple Specific Issues Whilst Apple now supports Web App Manifests with the recent introduction of ios 11.3, not all functions have yet been completely implemented, for example icon and launch screen support, as well as Add to Home Screen. Workarounds are available for many of these issues, for example, by using Apple specific metadata entries in index.html - a useful link to a in-depth web articles on this topic in our references. 14

15 Service Workers A Service Worker is a type of web worker. It is essentially a JavaScript file that runs separately from the main browser thread. Intercepts network requests, and either responds with cached data, or fetches requested data from the network It can also respond to other events or messages, such as for example push messages No direct DOM Access If the Service Worker is byte-different, it is considered to be a new version, and it s install event is fired 15

16 Service Worker - Registration Registered in index.html (or index.js): <script> if ('serviceworker' in navigator) { navigator.serviceworker.register('sw.js').then(function(sw) { console.log('service worker installed. Scope is "+ sw.scope)'); }).catch(function(err) { console.error('error', err); }); } </script> 16

17 Service Worker Lifecycle Events and Storage 17

18 Service Worker - Lifecycle 18

19 Service Worker - Lifecycle Events Service Workers have their own lifecycles, and are eventbased: Install - used to cache all required files Activate - can be used to clear stale cache data Idle waiting for an event (fetch / message etc.) Fetch - works as proxy for every network requests Allows you to manipulate requests, or replace a response In combination with the Cache API, provides the core feature for offline capability, where it returns cached responses instead of fetching them again 19

20 Service Worker - Additional Events Message - used to communicate with the web application (can be 2-way) Push - used for push notifications (where supported) 20

21 Service Worker - Example (1/2) self.addeventlistener('install', function(e) { e.waituntil( caches.open('engage-pwa-v1').then(function(cache) { return cache.addall([ '/', 'sw.js', 'index.html','index.js', 'style.css', 'images/kitten1.jpeg','images/kitten2.jpeg', 'images/kitten3.jpeg','images/kitten4.jpeg' ]); }) ); }); 21

22 Service Worker - Example (2/2) self.addeventlistener('activate', function(e) { console.log('now tidy any stale previous cache etc if required'); }); self.addeventlistener('fetch', function(e) { // Example of cache first, network fallback console.log("sw.js fetch request: " + e.request.url); e.respondwith( caches.match(e.request).then(function(response) { return response fetch(e.request); }) ); }); 22

23 Storage Browser storage for PWA s is shared between Cache and IndexedDB General storage recommendation is to use Cache API for static items (URL-addressable), and IndexedDB for everything else Storage amounts differ between browsers 23

24 Storage Limits Credit: 24

25 Cache API Provides a storage mechanism for Request / Response object pairs (similar to Local Storage) Exposed to the app itself, as well as service workers Cached items persist until you delete or overwrite them Provides for flexible cache strategies (BYO): Cache first, Network fallback (e.g. data) Network first, Cache fallback (e.g. data) Cache / network race (e.g. data) Network only (e.g. fresh data only) Cache only (e.g. internal static resources like HTML, CSS, JS Files, etc) 25

26 Service Worker - Additional APIs Notifications API Push API Background Sync API - Chrome only Credential Management API - Chrome only Payment Request API - Chrome and Safari (partial) 26

27 Development Tools 27

28 Chrome Development Tools Inspect the current Web App Manifest Force Add to Home Screen Inspect the active state of your Service Worker Options to: Force refresh of Service Worker on reload Bypass Service Worker for network requests Disable network access Clear local cache and data storage with single click Force installation of an updated Service Worker version Trigger test sync tasks and push notifications 28

29 Chrome Audit (Lighthouse) Validate PWA Requirements: Web App Manifest Service Worker HTTPS Scores your PWA against the Google PWA Checklist 29

30 Demo 30

31 Demo React + Domino 31

32 32

33 Initial Application PWA Audit with Lighthouse 33

34 34

35 + SSL on Domino Server + hint into index.html <noscript> You need to enable JavaScript to run this app. </noscript> 35

36 + https + hint to enable JavaScript PWA Audit with Lighthouse 36

37 37

38 + manifest.json + icons + to index.html <meta name="theme-color" content="#9b0000"> <link rel="manifest" href="%public_url%/manifest.json"> { "name": "Theater React Demo", "short_name": "Theater", "theme_color": "#9b0000", "background_color": "#fffafa", "display": "standalone", "start_url": "./index.html", "icons": [ { "src": "icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" },... 38

39 + manifest PWA Audit with Lighthouse 39

40 40

+ Service Worker with service-worker.js importscripts("https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js"); workbox.precaching.

41 + Service Worker with service-worker.js importscripts(" workbox.precaching.precacheandroute([]); [ ] gets automatically filled with list of static files like *.js, *.html, *.css for precache during build index.js if ('serviceworker' in navigator) { navigator.serviceworker.register('./service-worker.js').then(registration => { console.log(`service Worker registered! Scope: ${registration.scope}`); }).catch(err => { console.log(`service Worker registration failed: ${err}`); }); } 41

42 + Service Worker PWA Audit with Lighthouse 42

43 Offline? 43

44 Offline? JS/HTML/CSS Data 44

45 + Service Worker - live data caching workbox.routing.registerroute( /(.*)data\.xsp\/data\/(.*)/, workbox.strategies.networkfirst({ cachename: 'theater-cache' }) ); 45

46 + Background sync + notifications const bgsyncplugin = new workbox.backgroundsync.plugin( 'theater-queue', { callbacks: { requestwillenqueue: shownotificationenqueue, queuedidreplay: shownotificationsuccess, } } ); const networkwithbackgroundsync = new workbox.strategies.networkonly({ plugins: [bgsyncplugin], }); workbox.routing.registerroute( /(.*)data\.xsp\/data\/(.*)/, networkwithbackgroundsync, 'POST' ); 46

47 Service Worker - Notifications offline back online 47

48 Demo Code: 48

49 Summary PWA s are very easy to implement - range of sample Service Worker scripts available, including Google's excellent WorkBox Cross-Platform - single base code across all devices, mobile and desktop alike Ideal for Business environments - no App Stores Future proof - due to their Progressive nature, PWA s can make use of new Browser capabilities as and when they become available Leverage and enhance your existing Web Development Skills 49

50 Thank You 50

51 Questions? 51

52 References (1/2)

53 References (2/2) US/docs/Web/API/Service_Worker_API

Building Mobile Apps with the ArcGIS API for JavaScript. Andy Gup, Lloyd Heberlie, Thomas Other

Building Mobile Apps with the ArcGIS API for JavaScript Andy Gup, Lloyd Heberlie, Thomas Other Agenda Capabilities Managing app life-cycle Working with locally hosted builds Working from JS frameworks