need for speed
a guide to frontend optimization
muskein singh
lazy loading
cdn
caching
service worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(registration => {
console.log('Service worker registered:', registration);
})
.catch(error => {
console.error('Service worker registration failed:', error);
});
});
}
service worker
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache')
.then(cache => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/script.js',
'/image.jpg'
]);
})
);
});
service worker
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
return response;
}
return fetch(event.request);
})
);
});service worker
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
return response;
}
return fetch(event.request)
.then(response => {
return caches.open('my-cache')
.then(cache => {
cache.put(event.request, response.clone());
return response;
});
});
})
.catch(error => {
return caches.match('/offline.html');
})
);
});service worker
self.addEventListener('push', event => {
const title = 'My App';
const options = {
body: event.data.text(),
icon: '/icon.png',
badge: '/badge.png'
};
event.waitUntil(
self.registration.showNotification(title, options)
);
});service worker
if ('PushManager' in window) {
navigator.serviceWorker.ready
.then(registration => {
registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: 'my-public-key'
})
.then(subscription => {
console.log('Subscribed:', subscription);
})
.catch(error => {
console.error('Subscription failed:', error);
});
});
}thank you
Working
Issues
Issues
Tips
Animations
- Interaction Manager
- useNativeDriver
- REA2
- GPU
1
Bundle
- Hermes
- RAM Bundles
- babel for console
- Lean RN
2
Tooling
- Sentry/bugsnag
- Firebase
- Expo
- NativeBase
3
- Fabric UI
- JSI
- Turbo Modules
Future
Frontend Optimizations w/ Pesto
By muskein
Frontend Optimizations w/ Pesto
- 19