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 create a PWA style application, experiment with packaging our app and as always focus as much on performance optimization as we possibly can.

Using either the vanilla JavaScript or the library version of HW3 we now aim to make our SoundBoard app a progressive Web application (PWA) using the ServiceWorker API. As a PWA your application should work offline including having an offline indication some place, have a splash screen, a home screen icon and other aspects common to PWAs. You should verify your conformance using the Lighthouse Tool. Also you must test this technology using your Android device as iOS is lagging in support.

Note: Lighthouse and PWA style thinking may force you to refactor or adjust things to address accessibility and other concerns such as security.

Because your SoundBoard will likely suffer from download delays mostly from images and sounds you may have to refactor your application to use an app shell pattern for maximum performance. Furthermore, you may find that you have to add code or use some service to deliver varying images to different devices to improve load speed (example: imgix.com)

We are only doing one version of this version of our app so consider it your final turn-in and polish it greatly. For performance, aim to shave every byte possible using minification, bundling, caching, lazy loading, etc. Run your final tests thru your hardware and record your performance data and your Lighthouse score for your final report.

Next explore the possibility of using JavaScript everywhere by taking your app and porting it to run as an Electron Application for desktop as well as a packaged iOS or Android application (your choice) using Cordova or PhoneGap.

Warning: You may run into issues where you need to add, remove or modify things to run in these containers. Tutorials for these containers may make things look deceptively easy, but they may a demo illusion if your unlucky so don’t wait to the very last minute to look into this portion of the homework.

Finally, 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


  • 20pts PWA Execution
  • 10pts Electron Execution
  • 10pts Phone App 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