Progressive Web Apps in 100 Seconds // Build a PWA from Scratch

[Music] progressive web apps build websites that deliver an experience indistinguishable from native mobile apps when smartphones first hit the scene back in 2008 they brought with them all kinds of new features that weren't available on the web like offline mode push notifications cameras geolocation and more internet explorer powered the web back then and web developers had no way to access most in-device features in the 2020s though the game has changed the web platform has reached near feature parity with native apps notice how the twitter pwa can be installed just like a native app it works without a connection it can interact with the device camera and receive push notifications and on top of that the web offers much better distribution than app stores and doesn't take a 30 cut of your revenue not to mention your app will work on ios android and the web from a single code base if you own a website turning it into a progressive web app is easier than you might think first open up the lighthouse tool in chrome dev tools to run an audit on your site it'll tell you how well your site performs and what needs to change to qualify as a pwa at a bare minimum the site needs to load quickly and be accessible on mobile most sites already check this box the more difficult requirement is making the app work offline normally a website runs on a single thread while the tab is open however modern websites can now register a service worker which is just a script that runs in the background it can perform caching background sync and listen to push notifications among other things the implementation is actually very simple we just check if the browser supports this feature then register a javascript file as the worker once registered you'll find it activated in the application tab in chrome devtools from there you can write your own code in the worker file or use a library like workbox to do everything for you most importantly you'll want to cache the urls in your app so they can be viewed offline you can inspect the cache and other background services here in the application tab the final step is to create a manifest.json file which contains icons and other metadata about the app once the requirements have been met you'll unlock the pwa achievement and lighthouse at which point your app can be installed on most native devices and can even be listed on google play or the microsoft store this has been progressive web apps in 100 seconds if you want to learn more hang out for a minute while we go beyond 100 seconds to learn a bunch of cool things that you'll definitely want to know about pwas first of all make sure to like and subscribe because it really helps out the short videos what i want to do now is just rattle off a bunch of cool things you should know about when it comes to pwas first you'll definitely want to get familiar with the chrome lighthouse tool it analyzes performance accessibility seo and determines whether or not your app is installable as a pwa you can run this tool on any site you want and should be available under the lighthouse tab in chrome devtools even if you're not building a pwa it can be useful to run an audit on your site and while we're here you'll also want to know about the application tab which allows you to analyze and debug information related to your app every pwa has a manifest file which defines metadata about the app and you can view that here such as the app name and icons but more importantly it tells you whether or not a service worker is up and running you can also manually trigger events here to test things like push notifications and background sync your service worker will likely cache pages and you can view the cache from this tab as well now when you hear me talk about service workers and caching that may sound like a lot of code that you have to write but that's actually not the case most of these jobs fall into very common use cases and can be implemented with minimal code if you use a library like workbox as the name implies it's a collection of different libraries to help you build pwas quickly and reliably and it even has a cli tool to automatically generate the files and assets that you need if you're using a front-end framework like react or angular you can install it as an npm package or you can import it directly into your service worker over a cdn using the import scripts function but an awesome new feature in workbox is recipes it allows you to implement features very quickly often with just a single line of code want to add offline fallback to your app it's just a single function call and the same goes for an image cache google fonts cache and many others workbox is awesome but there are other libraries out there as well if you use a framework like angular it has a service worker module built into it and when you use the create react app tool it automatically generates a service worker for you and speaking of frameworks if you want to see how pwas are implemented in a variety of different frameworks check out the hacker news pwa site it's a showcase of different framework implementations and how well they perform compared to each other if you're learning to code a great project is implementing your own version of a hacker news pwa or if you want to start with something easier let's go ahead and build a pwa right now we only need four files an index.html for our main webpage a logo a manifest.json to describe our app and then a serviceworker.js file the html needs to reference the manifest and load the service worker we can reference the manifest with a link tag just like we would with a css file then we can add a script above the closing body tag and if the service worker is supported in this browser or in its navigator then we'll go ahead and register our service worker file now if we open up the manifest.json file we can add some information about our app which is mostly self-explanatory but notice this icons array it's looking for icons or images of different sizes that can be used as the home screen icon for our app we could create all of them manually but that would take forever a better option is to use the pwa asset generator we'll go ahead and run npx pwa asset generator then point it to the logo file in our project and tell it to output the results in the icons directory that creates a bunch of images for us in no time and if you look at the terminal output it'll even give you the json that you need to paste into your manifest.json file now we just need to write a little bit of code in our serviceworker.js file to enable caching we'll import workbox from a cdn by adding a link to the file inside of this import scripts function that'll give us access to workbox then we can use the routing module to register a route that matches all the image files in our project then once we've matched all the files we need to decide on a caching strategy in this case we'll use cache first which means the pwa will attempt to read from the cache instead of going over the network if there's something available in the cache that's great for files that don't change often like images but if you have something that does change often you might want to use a network for a strategy which will use the network if the app is connected to the internet or if it's offline it will fall back to the cache now let's go ahead and serve the app by running npx serve and then open the browser to localhost 5000 once there hit ctrl shift j to open up the chrome dev tools let's start by going to the application tab and making sure that we have all the icons appearing in our manifest that looks good now let's check out the service worker and make sure that it's up and running that looks good as well now we can go to the lighthouse tab and run an audit on the app as you can see we get a score of 100 on pretty much every metric and we get the pwa achievement badge meaning this app is installable on most mobile devices if you already have a website that's optimized for mobile it's incredibly easy to turn it into a pwa from that point you might consider adding an install button to your site in different locations to prompt the user to install the app and there's a number of different ux strategies to do that successfully now that you know how to build a pwa from scratch i want to leave you with a few other resources that you might use to go further first of all i'm working on a new video called 7 things you didn't know the web could do it'll cover advanced implementations of lesser-known browser apis like bluetooth device motion idle detection and a bunch of others i expect to have that out early next week so stay tuned another awesome resource is web.dev this contains basically everything you would ever want to know about pwas as well as new and upcoming browser apis if you want to make your app available on other platforms beyond the web you might want to do some research on trusted web activities or twas which allow you to market your app on the google play store alongside android apps and you can also market pwas in the microsoft store so check out the official documentation for that i'm gonna go ahead and wrap things up there if this video helped you please like and subscribe thanks for watching and i will see you in the next one

Channel: Fireship

Views: 515,425

Keywords: webdev, app development, lesson, tutorial, pwa, progressive web app, 100 seconds of code, web development, learn to code, pwa basics, android, ios

Id: sFsRylCQblw

Length: 8min 9sec (489 seconds)

Published: Wed Dec 16 2020