Progressive Web Apps

Level up your Web Application

Transcript

1. Progressive Web Apps Level up your Web Application von Frank Jogeleit @FrankJogeleit
2. Agenda • Introduction • Progressive Web Apps vs Native Apps • Basic Application • What makes an App to an Progressive Web App • Requirements • Manifest • Service Worker
3. Agenda • JavaScript APIs to level up your PWA • Cache and Fetch API • BackgroundSync API • Notification API • Device Features • Tools • Android Studio - Virtual Device Manager • Chrome DevTools • Chrome Audits • Workbox
4. Introduction • PWA is a technology introduced by Google in 2015 • This kind of web application makes use of latest web technologies to make a web application act and feel like an app • These technologies provide additional features based on the feature support of the device • Main features are offline capability, look and feel of native apps and speed improvements with local caching of resources • Progressive Web Apps close the gap between responsive websites and native Apps
5. Progressive Web Apps vs Native Apps Native App You need different apps for different operating systems like iOS and Android You can’t use your mobile apps on desktop computer Apps have stable environments and APIs Native apps can by placed on the Apple Store or Google’s Play Store An app by itself can not be found by search engines, only websites Progressive Web App PWA are platform independent PWA are normal websites and can be opened on every browser on every device You have to handle different browsers and devices with different API support PWAs can not be placed on the Apple Store or Google’s Play Store PWAs are websites and can be found by every search engine
6. Basic Application https://github.com/fjogeleit/pwa-example Online Version: https://pwa.webdev-jogeleit.de
7. What makes an WebApp to a PWA • Requirements • Site is served over HTTPS • Pages are responsive on tablets and mobile devices • Service Worker: All app URLs loading while offline • Manifest: Metadata provided for „Add to Home screen“
8. Manifest • manifest.json is an PWA configuration file • minimum configuration: • name: Title of the App • short_name: Name of the App Icon • icons: Array of icons with „src“ as relative path, image type like „images/png“ and size like „144x144“ • A 144x144 icon is required for the app’s home screen and splash screen • display: Look of your PWA, „standalone“ is the default app feeling without browser elements • start_url: app entry point like „/index.html“ • theme_color / background_color: home screen colors • orientation: supported app orientations
9. Manifest
10. ServiceWorker
11. „A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction.“ • Service Workers … • …are JavaScript Workers and have no direct DOM Access • … are a programmable network proxies • … have no persistent state • ServiceWorkers are event based and have their own lifecycle • install is used to cache all static files • activate is used to clear the old cache • fetch work as network proxy • message events are used to communicate 
 with the web application • they work in the background when the page
 is already closed Service Worker
12. JavaScript APIs Time to level up
13. Cache API
14. Cache API • https://developer.mozilla.org/de/docs/Web/API/Cache • The cache interface … • … provides a storage mechanism for Request / Response object pairs • … is exposed to windowed scopes as well as workers • … can cache internal and external resources like Image or CSS requests as well as requests to external CDN’s • Different Cache Strategies are possible • Cache first, Network fallback 
 (e.g. remote resources like CDN resources or images) • Network first, Cache callback (e.g. Content APIs) • Cache / network race (e.g. Content APIs) • Network only (display fresh data only) • Cache only (e.g. internal static resources like HTML, CSS, JS Files
15. Cache API • Cache size limit is managed by each Browser • The limit is shared with other storages like indexedDB, LocalStorage, SessionStorage or WebSQL • Example Limits: • Firefox: no limit (prompt after 50MB) • Mobile Safari: max. 50MB • Desktop Safari: no limit (prompt after 5MB) • Chrome / Operate: custom quota
16. Fetch Event
17. Fetch Event • https://developer.mozilla.org/de/docs/Web/API/FetchEvent • The fetch event … • … is a special event in the service worker, it works as proxy for every request fired in your application • … allows you to manipulate requests or replace a response • … is in combination with the cache interface a core feature for offline capability, it returns cached responses of static files instead of fetching them again
18. BackgroundSync Event
19. BackgroundSync Event • https://developers.google.com/web/updates/2015/12/ background-sync • The „sync“ Event… • … is a special event in the ServiceWorker • … allows you to register a new synchronization in your application with the ServiceWorker.sync.register function • … fires up when the registration is completed and your application has online connectivity
20. Notification API
21. Notification API • https://developers.google.com/web/ilt/pwa/introduction-to-push- notifications • Notification… • … is an interface to display native notifications to the user • … can be split in two core areas: • Invocation API: Representation like styling and vibrations • Interaction API: User interaction like general click, close or custom action handling • … needs the permission from the user to execute • … provides ServiceWorker support for different events to handle notification interaction like „notificationclick“ and „notificationclose“
22. Tools time to level up your development
23. Chrome DevTools • Inspect the active state of your ServiceWorker • See an Overview of your manifest.json configuration • Force installation of a new ServiceWorker Version • Clear your local cache and data storages with one click • Trigger sync tasks and push notifications for testing purposes
24. Android Studio - Virtual Devices • Emulate Android Devices like Nexus Phones or Tablets • Test your PWA install routine and manifest configuration • Test different features like Notifications • It is possible to use Chrome’s remote debugging with this emulator
25. Chrome Audit • Scoring your PWA with the Google PWA Checklist • Test PWA Requirements like HTTPS, existing ServiceWorker,
 offline capability, manifest configuration • Performing tests with and without caching lang="de"
26. Workbox • https://developers.google.com/web/tools/workbox/ • Collection of tools to integrate different caching strategies to your existing Worker or generate a completely new ServiceWorker • Available from NPM as • CLI (workbox-cli@beta) • Webpack Plugin (workbox-webpack-plugin) • Gulp Plugin (workbox-build)
27. Questions? Level completed