mdinfotech.net  



In class demonstration where students will add the TV Maze Assignment and host it on Glitch.
  1. Create an account at Glitch. This is where we will be hosting all Progressive Web Apps for this course.
  2. Once you have uploaded your TV Maze Assignment to Glitch, rename the project My Name TV Maze Assignment v1. You will end up with a few versions of ths assignment on Glitch.
PWA
Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications.
  • Watch: What is a PWA?
  • For more info: Google's Intro To Progressive Web Apps
  • manifest
    Progressive Web Apps require a manifest which is a JSON file that contains information about how your app should appear when installed on a mobile device.
    icons
    App icons are crucial for branding. It is the first thing a user interacts with, even before launching your app. On mobile devices, icons are placed on the home screen. A quality graphic for the icon adds to users’ intuition to tap open the application. In PWA' (Progressive Web Apps)'s, the icons are configurable in the manifest file.

    Follow these steps to add the manifest and icons to your TV Maze Assignment:

    1. Rename the main html file index.html if it isn't already.
    2. Find, or make, a 512x512 icon for your app and put this app into an icons folder. Use this one if you like.
    3. Use one of these sites: CrawlLink PWA Icon and Manifest Generator or SimiCart PWA Icon and Manifest Generator to create additional icons and a manifest for your PWA, download the zip file.
    4. Extract the zip file. Put the icons in the icons folder (or in "Assets" on Glitch) and the manifest in the root folder.
    5. Update the locations of the icons in the manifest. For a full explanation of the manifest file: https://pwa-workshop.js.org/1-manifest/.
    6. Add the manifest to your base HTML template by putting the tag link rel="manifest" href="manifest.json" into the head.
    Watch What is a Service Worker?. For a more detailed explanation watch Introduction to Service Workers.
    1. Use this service worker code. Save it as service-worker.js in the root of the scope you used in the manifest (likely the same folder as your index.html) It precaches files and fetches to the API that have been made.
    2. Modify the cache to include all the files you want cached for offline use.
    3. Add a code block to your base js file to load the service worker. It should be something like
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js');
      }                    
                          
    1. Run a Lighthouse audit on your PWA hosted on Glitch. You will notice it passes a number of tests, but also fails a few. You can also use: An online PWA tester
    2. Read the lighthouse audit and improve where you can.
    3. Install your progressive web app on a mobile device and test it out!

    The Service Worker you were given in Unit 4 should cache all your code files, and images that are part of your interface. This allows your app to be loaded offline. The Service Worker should also cache any fetches made by the app while it is online. What this means is if the app is being used offline, and a fetch is made that was cached, then it will load the data from that fetch and appear like it is working. It a fetch is made that is not cached, your app will break. You should write code that will make your app give a message that states that you need to be online to use the app. A problem with cached fetches is, that once you install an app and make a fetch, your app will keep using the results of the cached fetch, instead of loading a new result, even if you are online. This might be fixed by:

                      self.addEventListener('fetch', function(event) {
                          event.respondWith(
                            fetch(event.request).catch(function() {
                              return caches.match(event.request);
                            })
                          );
                        });
    Note: This has not been tested yet.

    Research

    Read the following article: 3 Rules of App Design.

    The Project

    Write a Progressive Web App that uses the Open Trivia Database API. Be creative in your app design and utilize the API to make an app that users will install and use over and over again. Code that is taken from tutorials or other sources other than yourself is clearly commented with a link to the source. If credit is claimed for code that is not yours, the project will not be accepted.

    Here is a very "in development" game created using the Bored API: Ms. Wear's Bored API Game Example. This is not good enough to justify a final project, as it is too simple. However, it does demonstrate how to use the API data from the Bored API creatively. It is a much more interesting use of the data than just displaying the fetch response in the webpage.

    Milestones

    1. Tuesday Jan 9: Share your app idea (how will you use the API creatively)
    2. Thursday Jan 11: Basic responsive layout complete (not styled yet) and at least 1 piece of data from an API fetch is shown
    3. Tuesday Jan 16: Finish API related functionality
    4. Friday Jan 19: Finish layout and styling
    5. Tuesday Jan 23: In class marking of PWA and code
    6. Wednesday Jan 24 (3 hour class): In class demonstration of Final App

    Marking Rubric

    Functionality and Complexity(/10)
    1. The work you put in is justifiably worth 20% of your mark. You have written a significant amount of JavaScript, and responsive CSS/HTML on your own. Only code and functionality created by you will be assessed.
    2. Creative use of API data. Has actual original JS code that allows user interactions and creatively utilizes data from the API
    3. Is entertaining or useful enough that users will install it and use it repeatedly
    4. Works on a desktop/laptop and a mobile android device
    5. Robust (the user cannot cause it to crash) and Reliable (never crashes on its own and always works as expected)
    	10	                8	                    6	                4	            < 4	 	
    	All criteria met	Most criteria met	Some criteria met	Multiple Issues	    Incomplete		
    	All criteria met	1 -2 issues	        3-4 small issues and/or 1 big issue        4+ problems	    A static HTML/CSS website was submitted.
    
    Meets Progressive Web App Criteria (/5)
    1. Manifest is recognized and contains basic required info.
    2. Icon used with multiple required sizes for the icon to show up on splash screen and desktop icons.
    3. Manifest refers to multiple sizes of icons.
    4. Service worker that preloads cached files works and app can be used offline. Caches previous fetches so these results can be loaded if the user goes offline.
    5. Chrome's "Install App Name..." creates a working shortcut that opens to the sites homepage, with an appropriate title, in standalone mode (that is, the browser window is not visible).
    6. Lighthouse Audit: all 4 non-PWA criteria in the Green Zone, and of the PWA criteria: it is installable (green circle) and at least 5 of the 6 PWA Optimized criteria have green circles.
    	5	                4	                    3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple Issues	    Incomplete		
    	All criteria met	1 -2 issues	        3-4 small issues        4+ problems	    Minimal attempt to create PWA.
    
    Usability and Presentation (/5)
    1. easy to use
    2. applies principles of design
    3. attractive design using colors, fonts, css positioning, css effects
    4. responsive design
    5. Appropriate icon used without breaking copyright.
    6. Offline: Loads the main html, css, and js and indicates that you need to be online in order for the app to work.
    	5	                4	                    3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple Issues	    Incomplete		
    	All criteria met	1 -2 issues	        3-4 small issues        4+ problems	    Minimal attempt to create attractive, responsive, usable design.
    
    Code (/5)
    1. HTML Validates
    2. CSS Validates
    3. There is only one CSS file
    4. There is only one JS file
    5. No JS Error in console
    6. Practices separation of languages
    7. Code that is taken from tutorials or other sources other than yourself is clearly commented with a link to the source. If credit is claimed for code that is not yours, the project will not be accepted.
    	5	                4	                3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple issues	    Incomplete		
    	All criteria met	1 -2 issues	        3-4  issues	        4+ problems         Not coded to standards taught in class.