DEV Community

Discussion on: Turning a React app into an installable PWA with offline detection, service workers and theming.

View post

Replies for: What if i started my project without using the template for pwa. Should i install every packages and configure them manually? or there are other ways?

Collapse
 
stradivario profile image
Kristiqn Tachev •

When you install C language is it writing everything automatically to create a complex application or you need to create it :D ?

What falls from a waterfall ?

U need to install everything automatically.
There is a tool called workbox this is the easiest way that i found

import {  precacheAndRoute } from 'workbox-precaching';
import {
  googleFontsCache,
  imageCache,
  offlineFallback,
  pageCache,
  staticResourceCache,
} from 'workbox-recipes';

precacheAndRoute(self.__WB_MANIFEST || []);

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();
Enter fullscreen mode Exit fullscreen mode

Then you need to add registrator script inside index.html

  <script async>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
       navigator.serviceWorker.register('/service-worker.js');
      });
    }
  </script>
Enter fullscreen mode Exit fullscreen mode

Cheers

Collapse
 
alexgurr profile image
Alex Gurr •

Using the pre built create react app scripts is probably better, as they contain code that will handle your web pack bundle files specifically with caching, whereas the above is kind of generic. The use of a script in the html also is kind of pointless in React land.

Your suggestion is good for vanilla html/js sites though 👍

Thread Thread
 
stradivario profile image
Kristiqn Tachev • • Edited

Oh thanks man i didnt know that i am more like Vanilla, Angular, WebComponents, LitHTML developer.

Sorry if i intrude somehow the topic.

You can check one starter that i have created

github.com/rxdi/starter-client-sid...

Cheers!