Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
Link to today's deployed app: Link
Link to the repo: github
I feel like I've been building over the course of my entire development journey just to be able to make a PWA or Progressive Web App. This is sort of the new standard of actual website development, where to meet user's needs a website should be to some degree operable even when offline, like a mobile app.
For today's project I followed along with this great tutorial on the Javascript Mastery Youtube channel (link here). It was so easy I'm debating making all of my webapps PWAs from now on.
Methodology - Creating a PWA
At the heart of a PWA is just the fact that there is an online presence and an offline presence. The easiest way to accomplish this is that, like normal, online traffic is routed to your index.html page. This is the case on standard websites and in React. The difference in a PWA is that offline traffic is routed to a special file for an improved offline experience which I called offline.html. In React this is placed in your public folder alongside index.html.
If you've ever created a Create React App project before you've probably seen the term service worker bandied about in the extra-long index.html file. There's also a serviceworker file in the default public folder that we often delete at the beginning of a project. The service worker is a Javascript file which tells the browser is just three simple functions to cache both the online and offline files on a fresh pageload.
The Three Service Worker Functions:
self.addEventListener('install', ... );self.addEventListener('fetch', ... );self.addEventListener('activate', ... );
When both online and offline files are cached, that means if the user heads offline and opens the site, an offline page is opened instead of the usual one. So- not so useful for a chat app- but maybe you'd like to display something other than an offline error, or if you have a static page you could still display it.
Passing the Lighthouse Tests
Lighthouse was once a standalone application that was acquired by Google and incorporated into DevTools. It measures your website or webapp against a number of checkmarks that Google has determined provide a good offline user experience.
While creating a serviceworker and caching the offline file are a good start, several more checkboxes will be left incomplete with just these steps. That's where manifest.json comes in.
In React, a manifest.json file is placed in your public folder. It's a simple JSON object which tells your browser some important information. To name a few, it tells your browser what your logo should be and your app store icon in case the user installs it on their homepage. It also tells your browser the name of your app and colors it needs to render a nice looking page if you're offline or on certain kinds of mobile browsers.
Importantly, the standard for passing all Lighthouse tests has increased since this video was made last spring, and you're now required to create a "maskable" icon. You can read more about these here link but in essence- Android has a lot of different of devices running its OS and many of them have different icon styles, so this requirement ensures your icon will look good on all Android devices (no matter how tyrannical and weird their shapes become).
The cacophony of Android icon shapes
The Point of PWAs
In the late 2000's Steve Jobs unveiled the iPhone and the App Store, and apps. The app store soon took off. As far as usability is concerned, there is essentially before this moment and after this moment for browser experiences. Sometime around 2015 mobile traffic overtook desktop traffic. Today it's essential to bridge the gap between the mobile browser experience and the native mobile experience- for now, PWAs are what does that job.
5/5 stars. Would code again.
Please follow my dev Twitter - www.twitter.com/jwhubert91
Also a special shoutout to Javascript Mastery for this exceptional course.
Top comments (0)