Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What are Progressive Web Apps?

mciastek
March 16, 2017

What are Progressive Web Apps?

mciastek

March 16, 2017
Tweet

More Decks by mciastek

Other Decks in Technology

Transcript

  1. 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?
  2. 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/
  3. 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
  4. 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
  5. Who uses it? PWA on production - Washington Post -

    Superbowl - Konga - Via - FlipKart - Lyft - CNet Tech Today - Fandango - AliExpress - Weather Channel - BaBe - Housing
  6. 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
  7. 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
  8. 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
  9. 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/
  10. 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.
  11. 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
  12. where i can see Todo PWA React app demo? todo-react-pwa.herokuapp.com

    see online: github.com/mciastek/todo-react-pwa source code:
  13. 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