I'm about the create a small single page reactjs app that fetches data from 3rd API (let's say youtube videos, so those will be displayed). So I don't need any backend at all, but I'd like to make it offline first with service workers, so if there is no connection it will still display some cached data by default. For this I will use service workers, but don't really know if I have to add any other library or I can just use it right away.
Could somebody tell me what the best way is to implement this small offline-first react app?
With your PWA app running using React, you've successfully built your first PWA React application! From here, you can test many PWA features, such as installation, offline viewing, and Lighthouse audit testing. If you hit the '+' symbol on the right side of the URL ba,r you can install your PWA, just as done here.
Service workers allow engineers and developers end-to-end control over the user's interactions with the app. A service worker enables you to run JavaScript before a page even exists, creates a faster site, and allows the ability to display content even if there is no internet connection.
If you're looking for a self-contained starting point, https://github.com/localnerve/react-pwa-reference looks promising.
If you're looking for a functional web app to draw some inspiration from, there's https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, which fetches information from the iFixit API, and is conceptually similar to a web app that would fetch information from the YouTube API.
(Just note that YouTube embedded video playback won't work offline, even with service workers.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With