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

My First Progressive Webapp

My First Progressive Webapp

Slides from Frontend Fighters, Budapest. 18th October 2017.

Daniel Furze

October 18, 2017
Tweet

More Decks by Daniel Furze

Other Decks in Technology

Transcript

  1. Daniel Furze Who!? • UK based front-end developer # •

    8 years in the industry $ • Freelance / consultancy for the last year ! • Agencies / in-house teams ⚡ • Websites / web applications • I’m on holiday! ☀ @furzeface
  2. What we’ll talk about What PWAs are Why PWA? How

    to PWA Review and audit Support Over to you! 1 2 3 4 5 6 @furzeface #FrontendFighters
  3. “It’s a wanky term Dan” What is a Progressive Web

    App? + @furzeface #FrontendFighters
  4. “It’s what Google says it is” What is a Progressive

    Web App? @furzeface #FrontendFighters - Scott, Barnaby (2017)
  5. “If you're on Android, they can do loads. iOS not

    so much” What is a Progressive Web App? @furzeface #FrontendFighters .♀
  6. “It's definitely an umbrella term. Somewhat combination of progressive enhancement

    and new specs such as Service Workers. Think the progressive is more 'works offline once you've been there' rather than 'works without JS'” What is a Progressive Web App? + @furzeface #FrontendFighters
  7. What is a Progressive Web App? A PWA IS A

    group of technologies Caching assets locally Working offline / bad connection Quick! Performant! Accessible! Set of best practises Higher engagement / revisiting @furzeface #FrontendFighters
  8. What is a Progressive Web App? A PWA ISN’T Android

    app iOS app In the app store Complex application Game / tool @furzeface #FrontendFighters
  9. Web Manifest @furzeface #FrontendFighters { "short_name": "", "name": “", "theme_color":

    "#001848", "background_color": “#FFFFFF", "start_url": "/index.html", "display": "standalone", "orientation": “portrait" "icons": [ { "src": "icon-2x.png", "sizes": "96x96", "type": "image/png" }, { "src": "icon-3x.png", "sizes": "144x144", "type": "image/png" }, { "src": "icon-4x.png", "sizes": "192x192", "type": "image/png" } ] } manifest.json
  10. Web Manifest @furzeface #FrontendFighters Step 1: Create Manifest 2 Step

    2: Declare Manifest 2 Step 3: Check Manifest! 2
  11. Web Manifest - the result @furzeface #FrontendFighters My website on

    an Android phone - top bar coloured and “Save” notification
  12. const CACHE_NAME = 'my-site-cache-v1'; const urlsToCache = [ ‘/', ‘/index.html',

    '/styles/main.css', '/script/main.js' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(urlsToCache); }) ); }); Service Workers @furzeface #FrontendFighters
  13. Service Workers @furzeface #FrontendFighters My website on an Android phone

    - all pages and assets cached and viewable offline
  14. /** * @file service-worker.js - Build a service worker to

    cache all assets * @author Daniel Furze <[email protected]> */ import swPrecache from 'sw-precache'; module.exports = function (gulp, config) { const rootDir = config.paths.build.base gulp.task('generate-service-worker', () => { swPrecache.write(`${rootDir}/sw.js`), { staticFileGlobs: [ `${rootDir}/**/*.{js,html,css,png,jpg,gif}` ], stripPrefix: rootDir }); }) } Service Workers @furzeface #FrontendFighters https://github.com/furzeface/danielfurze.co.uk/blob/master/tasks/service-worker.js
  15. In summary: What PWAs are Why PWA? How to PWA

    Review and audit Support Over to you! 1 2 3 4 5 6 @furzeface #FrontendFighters