Web and Mobile Development - Progressive Web Apps

Activity Goals

The goals of this activity are:
  1. To implement a Progressive Web App (PWA) in JavaScript, HTML5, and CSS

The Activity

Directions

Consider the activity models and answer the questions provided. First reflect on these questions on your own briefly, before discussing and comparing your thoughts with your group. Appoint one member of your group to discuss your findings with the class, and the rest of the group should help that member prepare their response. Answer each question individually from the activity, and compare with your group to prepare for our whole-class discussion. After class, think about the questions in the reflective prompt and respond to those individually in your notebook. Report out on areas of disagreement or items for which you and your group identified alternative approaches. Write down and report out questions you encountered along the way for group discussion.

Model 1: A Static Progressive Web App for Mobile Clients

Review the example below as a class.

Questions

  1. How do we name elements in HTML5 for dynamic updating? What is the name of the main body element that we're updating?
  2. What JavaScript command is used to set the content of a web page element?
  3. How do we define each list item to be a box?
  4. How do we ensure that each box appears in a dynamically-sized grid?
  5. How do we intercept a fetch and serve the content locally, serving as a cache?
  6. Load the web page in a Chrome browser on your mobile device, if you have one. From the Chrome menu, you can add the app to your home screen. Try changing the navigation color and the home screen icon.

Embedded Code Environment

You can try out some code examples in this embedded development environment! To share this with someone else, first have one member of your group make a small change to the file, then click "Open in Repl.it". Log into your Repl.it account (or create one if needed), and click the "Share" button at the top right. Note that some embedded Repl.it projects have multiple source files; you can see those by clicking the file icon on the left navigation bar of the embedded code frame. Share the link that opens up with your group members. Remember only to do this for partner/group activities!

Model 2: A Dynamic PWA Using a Backend Web Service

Questions

  1. In script.js, where has the courses array gone?
  2. How has the service worker changed to intercept fetches and forward them to the web server if they are remote data calls?
  3. What would happen if the server side data changed? What could we do about this?

Embedded Code Environment

You can try out some code examples in this embedded development environment! To share this with someone else, first have one member of your group make a small change to the file, then click "Open in Repl.it". Log into your Repl.it account (or create one if needed), and click the "Share" button at the top right. Note that some embedded Repl.it projects have multiple source files; you can see those by clicking the file icon on the left navigation bar of the embedded code frame. Share the link that opens up with your group members. Remember only to do this for partner/group activities!


Submission

I encourage you to submit your answers to the questions (and ask your own questions!) using the Class Activity Questions discussion board. You may also respond to questions or comments made by others, or ask follow-up questions there. Answer any reflective prompt questions in the Reflective Journal section of your OneNote Classroom personal section. You can find the link to the class notebook on the syllabus.