Date post: | 21-Jan-2018 |
Category: |
Technology |
Upload: | abhinav-rastogi |
View: | 1,322 times |
Download: | 0 times |
Modern Web Summit
‣ performance as a feature‣ immersive experience‣ security‣ solve for flaky networks‣ engagement‣ always up-to-date
What we needed to do
Modern Web Summit
How we achieved it
‣ service workers‣ push notifications‣ add to home screen, splash screen‣ smooth animations (RAIL, FLIP)‣ security (HTTPS, CSP)
Modern Web Summit
self.addEventListener('install', event => {
event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});
Modern Web Summit
various network strategiescache first, network first, fastest,
cache only, network only
Modern Web Summit
Our learnings
‣ cache busting (one version behind)‣ avoid dynamic content in shells‣ skipWaiting so that new SW can override existing SW
immediately‣ 301s are currently dangerous
Modern Web Summit
Our learnings
‣ important for perf consideration‣ be wary of automatic UI hooks‣ tracking library file size‣ queue events before library loads?‣ CSP can cause havoc with beacons!
Modern Web Summit
CORS
‣ api might be on different domain/hostname‣ especially on dev/staging envs‣ API server needs to understand OPTIONS request‣ respond with correct access-control headers‣ browser plugins for debugging on dev machine
Modern Web Summit
Performance
‣ treat performance as a feature‣ RAIL: Response, Animation, Idle, Load‣ animate the right properties: transform and opacity‣ DevTools is your friend!‣ trace on the device