Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

adding service worker to reactjs app

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?

like image 535
Sean Magyar Avatar asked Jul 21 '16 14:07

Sean Magyar


People also ask

Can I use PWA With React?

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.

What is service worker React js?

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.


1 Answers

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.)

like image 133
Jeff Posnick Avatar answered Sep 24 '22 08:09

Jeff Posnick