Topcoder - Make Community App a PWA

Challenge Objectives

• Convert community-app into a PWA (Progressive Web App).

Project Background

We are in the process of improving the performance of the Community App by converting it into a PWA (progressive web app).

Technology Stack

• Node.js

• JavaScript

• React.js

Code Access

The work is to be done in the Community App repo, out of the latest commit in mm-feature-experiment branch.

Reports:

• https://github.com/topcoder-platform/community-app/issues/1078

• https://github.com/topcoder-platform/community-app/issues/1138

Scope

Although the conversion to a PWA will happen at the very top level of our app, we are currently only interested in improving the following pages.

1. https://www.topcoder.com/challenges

2. https://www.topcoder.com/challenges/{id}

Individual requirements

1. For API support use https://api.topcoder-dev.com/v4/

2. Use lighthouse to audit the before and after implementation results. The reviewers will look at lighthouse max score for Progressive Web App criteria.

With this throttling profile:: Simulated Fast 3G, 4x CPU Slowdown

3. Convert the existing application into PWA using Workbox library

   1. Caching Strategies

      1. Cache all the font files using cacheFirst strategy

      2. Cache JS, CSS, images using staleWhileRevalidate strategy

      3. CacheAPIi call networkFirst strategy(for offline data support)

   2. Offline support for recently visited listing and challenges

   3. Add manifest.json for “Add to screen” feature, use default topcoder logo and white splash screen.

4. PWA implementation should be configured with the existing build process, for both development and production builds. As community app uses webpack for build workflow, use webpack-workbox-plugin

5. Add kill switch for clearing a cache and installing new service worker.

Important Notes

• Follow all the above guidelines.

• Do not break any of the existing functionality or build workflow.

Review Criteria

Although we will use the standard Code scorecards, the performance will be a major requirement and the evaluation will be done using lighthouse audit tool, higher the score the better it is.

 

Should you have any doubts, do not hesitate to ask for clarifications in the challenge forum!

Final Submission Guidelines

Submit a git patch for the latest commit in the mm-feature-experiment branch.

The winner of the challenge must create a Pull Request in our Github repo.