1. Navigate to the app directory via the command line:

cd pwafireapp-master

cd app

2. Run the following commands to install the project dependencies:

npm install

3. Then build and serve the app with these commands:

npm run build
npm run start

   
          │   ├── src
          │       ├── assets
          |          ├── css
          |          ├── js
          |          ├── scss
          │       ├── images
          |          ├── icons
          |          ├── others
          |       ├── pages
          │       ├── index.html
          │       ├── app.webmanifest
          │       ├── service-worker.js
    

For the images folder, make sure you have all your app icons in your project as shown above. The icons should be of sizes as in the app.webmanifest file. Atleast have an icon size of 144x144 is required for our progressive web app to install.

Generate your progressive web app icons here Unzip the icons and copy them to the icons folder of the PWA Fire App Open app.webmanifest and configure your web app name, short name and theme color (must be the same as specified in the index.html).

For the others folder; You could rename it to say team and add images to it but make sure to update that in the service-worker.js as shown below; Just an example of extra folders you may want to add to your project or your project has.

   
   /*  cache images in the e.g others folder; edit to other folders you got 
   and config in the sw-config.js file
    */
   workbox.routing.registerRoute(
    /(.*)others(.*)\.(?:png|gif|jpg)/,
    new workbox.strategies.CacheFirst({
      cacheName: 'images',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 50,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
          purgeOnQuotaError: true, // Opt-in to automatic cleanup.
        })
      ]
    })
  );
  

If you have different pages or directories for example speakers for an event Progressive Web App, then add it to the sw-config.js as shown below and or rename pages to speakers

   
     /* add url for other directories in the format 
    "directory/*.html" as shown below ; *directory*
     could be any name eg *pages* */
    "pages/*.html",
  

You could also, as an option to the above ; cache resources from a specific subdirectory. Add url for other sub-directories that a user visits depending on his or her needs "/subdirectory/" as shown below ; *subdirectory* could be any name eg *latest* if a user shows interest in *latest* category of a News App; this means all .html articles, images in the *latest* route that the user reads, get cached

   
  /* cache resources from a specific subdirectory
  -- notes --
  add url for other sub-directories that a user visits depending
  on his or her needs "/subdirectory/" as shown below ; *subdirectory*
  could be any name eg *latest* if a user shows interest in *latest* categ of a news app; 
  this means all .html articles in the *latest* route that the user reads, get cached 
 */
  workbox.routing.registerRoute(
  new RegExp('/latest/'),
  new workbox.strategies.StaleWhileRevalidate({
    // use a custom cache name
    cacheName: 'latest-cache',
    plugins: [
      new workbox.expiration.Plugin({
        // max number of items to be cached
        maxEntries: 20,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 Days
      }),
      ]
     })
   );
   

   
    /*
    -- notes --
    if you are using *NetworkFirst* cache strategy, 
    this should come first : )
     */