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!
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.
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
If you've ever created a Create React App project before you've probably seen the term
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.
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).
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