Super-Charging Single Page Apps

Transform a Single Page App to a Progressive Web App

Transcript

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.
10. Register the Service Worker
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.
14. Our Score on Lighthouse
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