ReactJS

Name: Transcodes
Availability: InStock
Author: Bigstrider Inc.

This example assumes you’re using Create React App (CRA) to scaffold your project.

react-js-image-1

Steps

1. Open `public/index.html` and replace the default manifest config. Update the `<head>` section with your Transcodes PWA configuration

sw.js


  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      Please Remove Pre-existed manifest.json setting
    -->
    <link
      rel="manifest"
      href="https://transcodes_cdn_url/01JWW55QK8Z4MFK9S0RG6527C6/manifest.json"
    />
    <script
      type="module"
      src="https://transcodes_cdn_url/01JWW55QK8Z4MFK9S0RG6527C6/webworker.js"
    ></script>
 
    <title>React App</title>
  </head>

2. Get `sw.js` and place it inside the `public/` directory

sw.js


importScripts(
  'https://transcodes_cdn_url/01JWW55QK8Z4MFK9S0RG6527C6/serviceworker.js'
);

3. React file directory should look like this

react-js-image-2

4. Now, you can Transcodes PWA is activated successfully

react-js-image-3 react-js-image-4