PWA Share

Transcript

1. PWA Share
3. 1, Component is first rendered on server side 2, Component is then hydrated on the client side
5. Server side Client side hydrate
6. https://photos.expediapartnercentral.com.lisqa7.sb.karmalab.net/photos/gallery/component/home?htid=6606
7. Pros and cons of server side rendering Better SEO support as web crawler will see the fully rendered HTML page Pros Performance benefits as we can fine tune what gets render on server side Cons Increase server-side load One codebase, render everywhere Increase complexity of build and deployment processes. some development constrains, browser-specific code need special handling
8. Avoid blank page Reduce the amount of work rendering on mobile devices
9. Universal Rendering Server side Client side hydrate
10. Server side rendering common issues
11. Browser-specific API does not work natively in Node runtime
12. BOM, DOM don't work on server
13. AMD module doesn't work natively
14. Nodejs runtime does not recognize JSX
17. JSX on server side TS compiler Webpack Ease to setup Can’t run AMD module More effort to setup Can run AMD module more control at build time
18. Avoid using too much renderToNodeString() in prod
19. performance issue with rendertonodestring it is synchronous and single-threaded performing tasks not necessary on the server (such as keeping track of the Virtual DOM and Synthetic Events) Facebook is not using ‘renderToString()’ in production,
20. renderToNodeStream()
21. browserRouter/hashRouter does not work well with SSR
22. Location attribute have to be passed dynamically
25. Server need to inject state to window object for browser hydration
30. • Add to home screen • Offline storage • IndexDB • push notification • Service worker • Cache API • background sync
31. https://www.youtube.com/watch?v=huK3QDCaAws PWA demo
32. Browser support is getting better, but fallback should always be implemented.
34. HTTP cache, memory cache, browser cache
35. Service worker works like a proxy intercepting all network requests (almost all) and provides programatic access for devs to decide what resources to put into cache
37. Feature detection to apply PWA features ONLY on those devices that actually support them
40. Installing service worker
45. HTTPS && A separate JS file
47. Demo
48. Caching strategy
49. What to cache? • Application shell • BFF API • Static images
54. Application shell cache will take effect from second visit, anything else, third visit.
55. Background update
56. Service worker gotcha moments Implement version number to update cache Expect to see more request from network tab Clean up the cache Consider using workbox