CSE 134B: Client-Side Web Languages

Summer 2017 | University of California, San Diego CSE Department

Homework #4 - PWA and Packaging Experiments

In this homework we pick any version of Homework #3 to start the process of moving towards a PWA style application and polish the quality to be appropriate for such a style of application.

Modified HW 4 Below - Original here for the more adventurous

Given that many projects did not meet the goal of HW3 completely given our shortened schedule we are taking another attempt to make our Soundboards really shine. In order hit the quality we should aim for we must use modern JavaScript practice, defensive coding and networking aware design as much as we can. To that end make sure your application addresses the following issues:

  • Do not use global variables excessively - this includes functions. Use wrapper object, closures, or even ES6 modules if you like to avoid JavaScript global name space pollution
  • Avoid using string constants and hardcoded values. If you need such values make them constants or in some configuration object
  • Attempt to use modern JavaScript - "use strict"; is a good idea and you can take this though far into ES6 if you like
  • Name your variables and functions well, consider "hungarian notation" to address type issues in JavaScript
  • Write your code defensively if a function requires a particular type or number of parameter make sure you check for that using ideas like ===, typeof, and try/catch blocks
  • When you go to network using Ajax address the following concerns:
    • Timeouts Make sure to offer some way for user to retry or do that automatically at first and if continue to fail involve the user
    • 404 requests - alert the user gracefully
    • 500 requests - alert the user gracefully
    • JSON packet returned is not correctly formed - alert the user gracefully
    • Having a loading message or image for the images or board
    • Other things are possible this is just the minimum
  • You have comments in your code
  • You have a consistent style of formatting and coding and do not have commented out dead code or other junk in your file

Your user interface also should be well considered and the soundboard a real example of what might be used. Please make sure that your examples are realistic and that you use unique sounds and images for your boards instead of just duplicating values over and over.

As our most important new feature we aim to make our SoundBoard app a progressive Web application (PWA) using the ServiceWorker API. As a PWA your application it really should work offline including having an offline indication some place, a splash screen, a home screen icon and other aspects common to PWAs. A minimum solution will have just an offline warning page and a manifest.json file. However, a good solution will work fully offline and may use ServiceWorkers to massively accelerate Soundboard loading on subsequent views.

You should verify your PWA quality using the Lighthouse Tool. Also you must test this technology using your Android device as iOS is lagging in support. Important: Test this feature for ServiceWorker in Chrome only. Make sure your SoundBoard continues to work in Firefox or other browsers, but the PWA features are only required to work for Chrome Desktop or Chrome Android.

Note: Lighthouse and PWA style thinking may force you to refactor or adjust things to address accessibility and other concerns such as security. For example, you will be forced to use SSL for this portion of the assignment, so host accordingly at firebase or learn how to do development locally.

Finally, to put our continuing efforts in perspective you must summarize your experience with this project (HW1 - 4) in terms of what problems you encountered, what performance results you achieved and any lessons you learned in terms of technology choice, application, and iterative approach. Your write up should not exceed two printed pages in length and should be easily scannable by the graders for important points. Make sure you name your project report “TeamNameSummary” Note: If you have logistic information you need to tell the graders keep such information in your comments or a readme file as the summary should focus on important takeaways you feel you uncovered during this process.

Back to CSE134B


  • 30pts HW3 Refactor and Polish
  • 10pts PWA Execution
  • 10pts Final Report

Total: 50pts

You should provide a link to your PWA site, your report and download links to your packaged versions to the TAs by Wednesday Aug 2nd @ midnight. Further logistics will be provided via Slack