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

Super-Charging Single Page Apps

Super-Charging Single Page Apps

Transform a Single Page App to a Progressive Web App


Ademola Adegbuyi

June 18, 2017


  1. Supercharging Single Page Apps Ademola Adegbuyi

  2. - Human - Student, Yaba College of Technology - Open

    Sourcerer - Freelance Full Stack Developer - Vscode Advocate - Foodie
  3. What are Single Page Apps? Single-Page Applications (SPAs) are Web

    apps which load a single HTML page and dynamically update that page as the user interacts with the app.
  4. Progressive Web Apps Progressive Web Apps are user experiences that

    have the reach of the web, and are: - Reliable - Load instantly and never show the dinosaur, even in uncertain network conditions. - Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. - Engaging - Feel like a natural app on the device, with an immersive user experience.
  5. Codelab

  6. Main Goal Transform a Single Page App to a Progressive

    Web App - Make it work offline. - Add a manifest.json file. - Check it out with lighthouse; a cool chrome extension for checking how cool your pwa is .
  7. Getting Started > git clone https://github.com/ooade/Minidium.git > npm install >

    npm start Clone Minidium; a simple medium clone built with PreactJS and Webpack 2 Add sw-precache-webpack-plugin > npm install sw-precache-webpack-plugin --save-dev
  8. Instantiate SWPrecachePlugin > Specify a filename? <default: service-worker.js> > Precache

    Static files with staticFileGlobs option. - Here, you pass in your static files location. > Use the power of sw-toolbox to cache runtime requests. - Here, we’re passing in two handlers (fastest and networkFirst) with urlPattern(s). It can actually take more with other handlers like cacheFirst, cacheOnly and networkOnly.
  9. None
  10. Register the Service Worker

  11. None
  12. Service worker is activated and running, what’s next? > Create

    a manifest.json file just to make sure everything looks pretty nice on mobile. > Include in our html file like: <link rel="manifest" href="/static/manifest.json"> Note: Web app manifests provide the ability to save a site bookmark to a device's home screen. With Web app manifests, you could: - Add a unique icon / splash screen and name so that users can distinguish it from other sites. - Provide default display characteristics to the browser to avoid too abrupt transition when site resources become available.
  13. None
  14. Our Score on Lighthouse

  15. None
  16. None
  17. Add to Home Screen Highlights Minidium on Home Screen Splash

    Screen with Our Logo and name Our App
  18. Thank you > git checkout completed Dive into the completed

    code? @ooade on Github @_ooade on Twitter View the completed app? > https://minidium.surge.sh Connect with Me