O SlideShare utiliza cookies para otimizar a funcionalidade e o desempenho do site, assim como para apresentar publicidade mais relevante aos nossos usuários. Se você continuar a navegar o site, você aceita o uso de cookies. Leia nosso Contrato do Usuário e nossa Política de Privacidade.
O SlideShare utiliza cookies para otimizar a funcionalidade e o desempenho do site, assim como para apresentar publicidade mais relevante aos nossos usuários. Se você continuar a utilizar o site, você aceita o uso de cookies. Leia nossa Política de Privacidade e nosso Contrato do Usuário para obter mais detalhes.
OK - BUT *WHAT* IS IT?
• A term
• Coined by Frances Berriman and Alex Russell in 2015
• Set of Guidelines
• Technical Baseline
• Works offline, or in poor network conditions
THE TECH STACK
• Service Workers
• App Shell
• "Web App Manifest"
• Just a JSON file (woot!)
• Allows for "installable" web apps
• Controls behavior when launched
• The name (as it appears in the shortcut)
• Icons (of various sizes)
• Splash screen and colors (bg and toolbar)
• Forced Orientation
• The starting URL (handy for passing a param to note the launch)
ADDING TO HTML
• <link rel="manifest" href="/manifest.json">
(AUTO) ADD TO HOME
• AKA Web Install Banners
• *Current* criteria is:
– manifest with short_name, name, 192x192 icon (png only), start_url
– service worker
– "Meets a site engagement heuristic defined by Chrome (this is regularly being changed)."
• Event is fired: beforeinstallprompt
• Details: https://developers.google.com/web/fundamentals/app-install-banners/
• Doesn't support manifest :(
• But you can configure...
S AV E S T H E D AY ! ( U M , K I N D A )
SERVICE WORKERS - INTRO
• A script registered via a script
• Now - forget everything you know about <script>
• You load foo.html
• foo.html is all like <script src="ftw_js_is_awesome_unicorns.js"></script>
• Code executes while the tab (window) is "alive"
• Close the tab and ftw_js_is_awesome_unicorns.js goes bye bye
SERVICE WORKER JS
• Runs in parallel to pages in it's scope
• Can't actually do anything the first time it loads
• Can run when you're not even on the page
• Can intercept every single network request (to be clear, not just XHR)
• Can work with the browser cache
• Can fire off notifications while you're away (and you totally won't abuse this)
• Can respond to push notifications (and you totally won't abuse this)
• Can help you sync data
• Can't touch the DOM
MORE SERVICE WORKER
• You can (and must) check for support
• Requires https, but localhost is ok
• They have a life cycle
• Devtools will be very, very helpful
• You want to change a file
• You only want to use the cache if offline
• You want some mix of things where you use the cache first then network but then sometimes
you want to hit the network first and then cache and oh yeah maybe you want to use the
cache and that's cool but maybe you want to hit the network in the background and passively
update stuff and oh my god does this end?
GOOD NEWS/BAD NEWS
• Good News: Caching Strategies exist
• Bad News: You're responsible for figuring it out
• See "The Offline Cookbook" - https://developers.google.com/web/fundamentals/instant-and-
• See Workbox: https://developers.google.com/web/tools/workbox/
EXCEPT ROUND TWO...
• iOS - no support for Service Workers
• But officially "in development" for WebKit
S AV E S T H E D AY ! ( U M , K I N D A )
• Another ServiceWorker feature
• App js tells SW js - "hey, start syncing Foo"
• SW says - "Ok, no problem. I'll get around to it."
• SW will try to do Foo (you write the logic)
• If it fails, it will try again (and again...)
• Finally, it will try one last time and *tell* you as well
• User subscribes to push messaging (two step process)
• Your server sends a message to central Message server
• Messaging server talks to Service Worker
• Service Worker does whatever (probably Notification)
SAFARI AND PWAS
• Supported in the *released* iOS
• Only in Safari, no other browser
• Service Workers (Caching) and App Manifests (not entirely)
• No Push or Sync
• And it gets better: https://medium.com/@firt/pwas-are-coming-to-ios-11-3-cupertino-we-have-
• Email me at email@example.com
• Visit my awesome blog at raymondcamden.com
• Follow my awesome Twitter account at @raymondcamden