Lightning Talk - PWA's

A 5min lightning talk on the three pieces that cover Progressive Web Applications - the App Shell, the App Manifest and Service Workers.

Transcript

1. PWAs
2. App Shell App Manifest Service Workers
3. App Shell
4. App Manifest {
 “name”: “Citii”,
 “short_name”: “Citii”,
 “icons”: [
 { “src”: “icons/android-chrome-192x192.png”,
 “sizes”: “192x192”,
 “type”: “image/png” },
 { “src”: “icons/android-chrome-512x512.png”,
 “sizes”: “512x512”,
 “type”: “image/png” }
 ],
 “theme_color”: “#2c3338”,
 “background_color”: “#2c3338”,
 “display”: “standalone”,
 “orientation”: “portrait” }
5. App Manifest
6. Service Workers It's essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages. - Progressive Web Apps Introduction to Service Worker
7. Service Workers sw-precache-config.js module.exports = { stripPrefix: ‘build/’,
 staticFileGlobs: [
 ‘build/*.html’,
 ‘build/**/*.{js, html, css, png, jpg, gif, svg, eot, ico}’,
 ],
 swFilePath: ‘build/service-worker.js,
 navigateFallback: ‘/index.html’,
 runtimeCaching: [ urlPattern: /api\.teleport\.org/,
 handler: 'networkFirst'
 ]
 }