Fix service worker (#94)

* Fix service worker

- fix service worker load by checking for process prior to usage

* - string replace logic in sw generator

* - update readme, PR template

Author: shaunmaharaj

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,11 +8,9 @@ Linting:
 
 Tests:
 <!--Have tests been run locally and passed? If manual tests run, explain what was run below-->
-- [ ] E2E tests
 - [ ] Manual tests
 - [ ] Accessibility tests (no new react-axe errors in console)
 
 Documentation:
 <!--Are documentation updates required? Include any mention of updates required below if necessary-->
 - [ ] Requires documentation updates
-- [ ] Requires Storybook component updates

README.md

@@ -39,9 +39,12 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/rostyk-kanafotskyy"><img src="https://avatars3.githubusercontent.com/u/34774987?v=4" width="100px;" alt=""/><br /><sub><b>Rostyk</b></sub></a><br /><a href="https://github.com/elasticpath/epcc-react-pwa-reference-storefront/commits?author=rostyk-kanafotskyy" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/petro97"><img src="https://avatars3.githubusercontent.com/u/34708483?v=4" width="100px;" alt=""/><br /><sub><b>Dubno Petro</b></sub></a><br /><a href="https://github.com/elasticpath/epcc-react-pwa-reference-storefront/commits?author=petro97" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/yulia-dnistrian"><img src="https://avatars3.githubusercontent.com/u/12392532?v=4" width="100px;" alt=""/><br /><sub><b>yulia-dnistrian</b></sub></a><br /><a href="https://github.com/elasticpath/epcc-react-pwa-reference-storefront/commits?author=yulia-dnistrian" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/skarpyak"><img src="https://avatars3.githubusercontent.com/u/8594755?v=4" width="100px;" alt=""/><br /><sub><b>Sergii Karpiak</b></sub></a><br /><a href="https://github.com/elasticpath/epcc-react-pwa-reference-storefront/commits?author=skarpyak" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/yasiloghmani"><img src="https://avatars0.githubusercontent.com/u/73843686?s=400&u=42ab0036a55d0b65cf4a371b0375779a64763a54&v=4" width="100px;" alt=""/><br /><sub><b>Yasaman Loghmani</b></sub></a><br /><a href="https://github.com/elasticpath/epcc-react-pwa-reference-storefront/commits?author=yasiloghmani" title="Code">💻</a></td>
   </tr>
   <tr>
+    <td align="center"><a href="https://github.com/butikden"><img src="https://avatars0.githubusercontent.com/u/33585095?s=400&u=4b005fecdd6f18d4b692fdf1bf572f0666260f41&v=4" width="100px;" alt=""/><br /><sub><b>Denys Butynskyy</b></sub></a><br /><a href="https://github.com/elasticpath/epcc-react-pwa-reference-storefront/commits?author=butikden" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/yurii-khovzun"><img src="https://avatars0.githubusercontent.com/u/68732186?s=400&v=4" width="100px;" alt=""/><br /><sub><b>Yurii Khovzun</b></sub></a><br /><a href="https://github.com/elasticpath/epcc-react-pwa-reference-storefront/commits?author=yurii-khovzun" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/skarpyak"><img src="https://avatars3.githubusercontent.com/u/8594755?v=4" width="100px;" alt=""/><br /><sub><b>Sergii Karpiak</b></sub></a><br /><a href="https://github.com/elasticpath/epcc-react-pwa-reference-storefront/commits?author=skarpyak" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/BonnieEP"><img src="https://avatars3.githubusercontent.com/u/49495842?v=4" width="100px;" alt=""/><br /><sub><b>Bonnie Bishop</b></sub></a><br /><a href="https://ui-components.elasticpath.com" title="Design">🎨</td>
     <td align="center"><a href="https://github.com/JenSmith-EP"><img src="https://avatars3.githubusercontent.com/u/58435007?v=4" width="100px;" alt=""/><br /><sub><b>Jen Smith</b></sub></a><br /><a href="https://documentation.elasticpath.com/storefront-react" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/mwan-ep"><img src="https://avatars3.githubusercontent.com/u/54115904?v=4" width="100px;" alt=""/><br /><sub><b>Michelle Wan</b></sub></a><br /><a href="https://github.com/elasticpath/epcc-react-pwa-reference-storefront/commits?author=mwan-ep" title="Code">💻</a></td>

build-sw.js

@@ -28,9 +28,12 @@ async function build() {
     swSrc: './src/sw-template.js',
     swDest: `./${outputPath}/sw-default.js`,
   }).then(_ => {
+    const swConfigString = fs.readFileSync(`./${outputPath}/sw-default.js`, 'utf8');
+    const swConfigStringMatch = configString.slice(configString.search('endpointURL'), configString.length).match(/'([^']+)'/)[1];
+    const swConfigEndpointURL = swConfigString.replace('config.endpointURL', process.env.REACT_APP_ENDPOINT_URL || swConfigStringMatch);
+    fs.writeFileSync(`./${outputPath}/sw-default.js`, swConfigEndpointURL);
     console.log('Service worker generated.')
   })
 }
 
 build();
-

src/sw-template.js

@@ -1,5 +1,4 @@
 importScripts('/workbox-sw.js');
-importScripts('/config.js');
 
 workbox.core.skipWaiting();
 workbox.core.clientsClaim();
@@ -21,7 +20,7 @@ workbox.routing.registerRoute(/https:\/\/fonts.googleapis.com\/.*/, webFontHandl
 workbox.routing.registerRoute(/https:\/\/fonts.gstatic.com\/.*/, webFontHandler);
 
 // get-urls-cache
-const API = new RegExp('https:\/\/' + config.endpointURL + '\/.*');
+const API = new RegExp('https:\/\/' + 'config.endpointURL' + '\/.*');
 const apiHandler = new workbox.strategies.NetworkFirst({
   cacheName: 'get-urls-cache'
 });