Recommended
Recommended
More Related Content
What's hot
What's hot (18)
Similar to Increasing Access Through Service Workers
Similar to Increasing Access Through Service Workers (20)
Recently uploaded
Recently uploaded (20)
Increasing Access Through Service Workers
- 1. INCREASING ACCESS THROUGH SERVICE WORKERS NECOLINE HUBNER
- 3. Photo credit: Lutheran World Federation
- 7. CONSIDERATIONS ▸ Performance ▸ Battery usage ▸ Responsive design ▸ Offline capabilities
- 8. ARE SERVICE WORKERS RIGHT FOR YOU?
- 9. UNDERSTAND THE USER BASE ▸ Users in infrastructure low environments require offline access ▸ However… ▸ Devices used may dictate the ability to access service workers
- 13. LET’S TALK ABOUT PROGRESSIVE ENHANCEMENTS
- 14. DEVELOPMENT APPROACH, NOT A TECHNOLOGY CHOICE PROGRESSIVE ENHANCEMENTS:
- 15. A DEVELOPMENT APPROACH PROGRESSIVE ENHANCEMENT Baseline of Support Core Functionality
- 16. PROGRESSIVE ENHANCEMENT ITERATION AND IMPROVEMENT pre-fetched content push notifications
- 17. BUILDING FOR ALL OF YOUR USERS PROGRESSIVE ENHANCEMENT
- 18. SERVICE WORKERS
- 19. APPCACHE ▸ Declarative API ▸ Ability to cache specified assets ▸ Assumptive and brittle
- 20. SERVICE WORKERS
- 21. MUCH MORE THAN JUST OFFLINE ▸ Push Notifications ▸ Background syncs ▸ Local downloads ▸ Load balancer ▸ Create a virtual server ▸ Conduct API Analytics
- 23. PARSING & REGISTRATION The browser meets the requirements Service worker is not registered The service worker has changed (bytes) LIFE CYCLE OF A SERVICE WORKER
- 24. INSTALLING LIFE CYCLE OF A SERVICE WORKER Carefully cache your assets
- 25. INSTALLED / WAITING Only one service worker should run at a time Not recommended to force activation LIFE CYCLE OF A SERVICE WORKER
- 26. ACTIVATING No current Service Worker self.skipWaiting() was called LIFE CYCLE OF A SERVICE WORKER User navigation Service Worker timed-out
- 27. ACTIVATED Service worker can now control the client LIFE CYCLE OF A SERVICE WORKER
- 28. REDUNDANCY Installing event failed Activating event failed A new Service Worker replaces it LIFE CYCLE OF A SERVICE WORKER
- 29. FULL CYCLE LIFE CYCLE OF A SERVICE WORKER
- 30. GET INTO THE BROWSER Set default (update on reload) Inspect service worker BEGINNER TIPS Error handling Debugging
- 31. LEARN TO LOVE A GOOD PROMISE And if you can, upgrade to async/await BEGINNER TIPS Helps with clean code Error handling Conditionals Much more
- 32. DON’T GET STUCK ON THE SAME SCREEN Develop a cache invalidation strategy BEGINNER TIPS Add feature flag to control unregistration Have a no-op Service Worker at the ready Force Update for version control
- 33. GET A HELPING HAND ▸ Service worker generator tools ▸ Workbox ▸ sw-precache + sw-toolbox ▸ generate-service-worker BEGINNER TIPS ▸ Cookbooks ▸ Jake Archibald’s Offline Cookbook ▸ Mozilla’s Service Worker Cookbook
- 34. OFF(LINE) WE GO! Necoline Hubner @neco-rising@necolinehubner
- 35. We accept donations and will soon accept open source contributions
- 36. RESOURCES ▸ Progressive Enhancements ▸ MDN ▸ Lifecycle ▸ Cache Management ▸ Workbox ▸ Workbox with Webpack ▸ Browser Compatibility ▸ Offline Cookbook ▸ Mozilla Cookbook