What are Progressive Web Apps?

Transcript

1. What are progressive web apps?
2. Mirosław ciastek twitter.com/@mciastek front-end developer Socials: medium.com/@mciastek github.com/mciastek
3. AGENDA 1. what are PWA? 2. why should you use it? 3. who uses it? 4. how can you do it? 5. Where i can see demo? 6. which articles i should read?
4. What are pwa? Progressive Web Applications Progressive Web Applications (PWA) are applications which use the latest web technologies to bring the quality of browser based applications to the next level. requires HTTPS! check browser support: https://jakearchibald.github.io/isserviceworkerready/
5. Load instantly and never show the downasaur, even in uncertain network conditions reliable Respond quickly to user interactions with silky smooth animations and no janky scrolling fast Feel like a natural app on the device, with an immersive user experience engaging
6. why should you use it? - Make your app load faster - Make it mobile-friendly - Use Push Notifications - Make your app installable - Use it as an alternative for native apps
7. Who uses it? PWA on production - Washington Post - Superbowl - Konga - Via - FlipKart - Lyft - CNet Tech Today - Fandango - AliExpress - Weather Channel - BaBe - Housing
8. 8 washington post aliexpress Housing Flipkart
9. how can you do it? Application’s manifest helps to customise Add to Homescreen experience. add manifest Service worker simply cache all application’s assets, so they can be fetched instantly. setup service worker To make your application fully support offline, you need to store application state locally. add offline support Push notifications are simple messages that engage users in an effective way. Enable push notifications
10. Add manifest.json { "name": "Todo - PWA", "short_name": "Todo", "start_url": "./?utm_source=web_app_manifest", "display": "standalone", "orientation": "portrait", "background_color": "#f5f5f5", "theme_color": "#AF2F2F", "icons": [ { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }, { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" } ] } Allows to: - Set application name - Display app in fullscreen - Set splash screen with icon and background - Add icons for application - Make app install on Home Screen https://developer.chrome.com/ extensions/manifest
11. Setup Service Worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function() { console.log('Service worker registered'); }); } else { console.warn('Service worker is not supported in this browser'); } Use sw-precache, offline-plugin or other library to work with Service Worker. Allows to: - Cache static assets - Intercept requests - Use notification API - Use background sync API https://developer.mozilla.org/ en-US/docs/Web/API/ Service_Worker_API
12. Add offline support /*** store.js ***/ import { persistentStore } from 'redux-pouchdb'; import PouchDB from 'pouchdb/dist/pouchdb'; const db = new PouchDB('dbname'); // setup reducer const createStoreWithMiddleware = compose( applyMiddlewares, persistentStore(db) )(createStore); /*** reducers/todos.js ***/ import { persistentReducer } from 'redux-pouchdb'; // todos reducer code export default persistentReducer(todos); Use any library for IndexedDB / WebSQL DBs. For Redux try redux-pouchdb. Allows to: - Store application state locally - Sync application state with local DB https://pouchdb.com/
13. Enable Push Notifications 1/2 /*** utils/service-worker.js ***/ // subscribe for notifications navigator.serviceWorker.ready.then((registration) => { registration.pushManager .subscribe({ userVisibleOnly: true, applicationServerKey: vapidDecoder( process.env.REACT_APP_VAPID_PUBLIC_KEY ) // decode VAPID public key }); }); // send notification navigator.serviceWorker.ready .then((serviceWorkerRegistration) => { serviceWorkerRegistration.pushManager.getSubscription() .then((subscription) => { axios.post('/notification', { subscription: subscription.toJSON(), message: JSON.stringify(message), // add message object }); }); }); Allows to: - Make notifications’ subscription - Send notification with custom payload To send custom payload you need to setup up VAPID keys. See how to do it here.
14. Enable Push Notifications /*** notifications.js ***/ // handle "push" event in service worker self.addEventListener('push', (event) => { var defaultData = { title: 'You have completed a todo!', text: 'Nice one ;)' }; var data = (event.data && event.data.json()) || defaultData; var title = data.title; var body = data.text; var tag = 'todo-react-pwa-notification'; var icon = 'icon-192.png'; event.waitUntil( self.registration.showNotification(title, { body, icon, tag }) ); }); 2/2 Allows to: - Respond to notification - Show notification with payload and app’s icon You can also respond to user’s click on notification. https://developer.mozilla.org/ en-US/docs/Web/API/ NotificationEvent
15. where i can see Todo PWA React app demo? todo-react-pwa.herokuapp.com see online: github.com/mciastek/todo-react-pwa source code:
16. test it with lighthouse https://github.com/GoogleChrome/lighthouse
17. which articles i should read? - Progressive Web Apps with React.js series by Addy Osmani - Your First Progressive Web App by Pete LePage - Progressive Web Apps by Google - Using Web Push Notifcations with VAPID - How to Make Your App a PWA by me
18. thank you!