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 take notes for the group, and appoint another member to discuss your findings with the class. After class, think about the questions in the reflective prompt and respond to those individually. 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

Submit your answers to the questions using the Collaborative Spaces section of OneNote. You can add a page with your name and your group members' names, and today's date, as the title. Under the appropriate section (i.e., "Class Notes", "Collaborative Spaces", "Reflective Prompts") that you can select on the left side of the screen, you can click "Add Page" on the right side. You can answer any reflective prompt questions in the Reflective Journal section of your OneNote Classroom personal section.