LP2 PA1A Scoring Guide – Class Selected Project – SmoothieTime
Link to Project:
https://smoothie-time-pwa.firebaseapp.com/
OR
https://app.christianmccreary.com/
The latter link may not work as Google and GoDaddy may take additional hours to verify DNS settings before the redirect goes through. According to Firebase:
You employ responsive design for desktop and mobile.
The tutorial I had followed used the Materialize CSS framework, based on the Material Design language popularized by Google. This framework contains media queries that adjust the elements on the page to display properly on both mobile and desktop platforms, as well as enable functionality that works exclusively on mobile platforms. In my app, you can swipe from the left to bring up the form, or from the right to bring up the navigation. But this function only exists when viewing on mobile; on desktop the menus will not appear using the same gesture even when using a touchscreen laptop.
You employ a service worker to precache the app resources (HTML, CSS, JavaScript, images) needed to run and to cache the data at runtime to improve performance.
The service worker employed not only is able to cache data for online use and better performance online, but the tutorial I followed enabled me to take it to it’s fullest potential and allow the application to cache the necessary resources for online/offline functionality. This is done using the assets array defined at the top; this is an outline of the important files that the application needs to store locally to be able to function offline/function more efficiently.
You employ a web app manifest and the beforeinstallprompt event to notify the user it’s installable.
When viewing on Android through an emulator, I have been able to receive the prompt to install the application to the homescreen successfully. Also, in Microsoft Edge Chromium, the address bar provides me with the option to install the web application.
You employ techniques that creates the ability to run project in a browser tab at a 100% functionality in devices of choice.
For this criteria, the devices I used were as follows:
- Microsoft Surface Book 2 (Tablet/Laptop)
- iPhone X (iOS 14)
- Nexus 6 Virtual Device (Android Oreo)
Is search engine optimized for page titles, meta tags, body text, headings, images, internal links, and navigation.
For this, I enlisted the assistance of the WAVE tool submitted by another student in the weekly discussion, as well as Edge (Chromium) Lighthouse audit. This mostly adhered to the tutorial in order to ensure functionality with the final product. Accessibility seems to be spot-on however, likely since there are very few images and elements needing alt-tags, and the classes for elements like forms are very descriptive. Best Practices scores lower due to the app serving low-res images but this is because mobile is targeted as the desired platform of use. I adjusted some elements in the main HTML to raise the SEO to from 75 to 83.
Resources:
Learner synthesizes information from a variety of sources.
- https://wave.webaim.org/report#/https://smoothie-time-pwa.firebaseapp.com/
- https://nz.godaddy.com/help/create-a-subdomain-4080
- https://www.w3schools.com/tags/tag_meta.asp
- https://firebase.google.com/docs/hosting/custom-domain
Tutorial Used/Referenced:
Reflection Statement:
This was really the most challenging learning plan for me. I believe I came out the other end of it with flying colors of learning to navigate database storage, offline usage, and basically making a fully functioning web app with the help of the tutorial video series. The 31 videos immensely helped me get a greater understanding of what’s going on in the JavaScript of the web app, where the real magic of offline storage and database retrieval happens. The focus on this LP was the construction of the PWA itself, and I like that this video series focused on that by utilizing an existing CSS framework and not lingering on the configuration for responsive web design too much. It really let you dive in headfirst into making the actual core functionality of the app and explaining to you what each bit of code does along the way. I certainly will feel a lot more confidence going into Dom’s class next week in that instead of just copying and pasting code snippets together hoping they work, I’ll actually have a better understanding of what the code block is asking of the user and what it is doing with that data. The feedback I had gotten from peers was unfortunately unavailable because I was late to the discussion, but I asked some friends I know in the web development community what they had thought and they had tested out the app to find that there were some elements I had yet to change from the tutorial. The icon sizes weren’t all changed to my icon, the form still had inputs from the general recipes (tofu, garlic, and mushroom ingredients isn’t an appropriate placeholder for smoothies) and that the database just wasn’t working the way it was intended. Fortunately they helped me troubleshoot and narrow down the causes to find the solutions I needed to get back on track.
About The Author
