stravid87
commented
2 months ago UPDATE SEPTEMBER 29, 2024
Description Building on the learning from the Udemy course, the goal of this task is to augment gc-web and test the limits of layer8 in the process and learn PWA best practices in the process.
The specific deliverable is to add a "Feedback" section to gc-web. To succeed, 3 of the essential elements of a PWA will need to be incorporated: 1) Installable -- Manifests 2) Offline Navigation -- Precaching of assets & dynamic caching of data 3) Background sync -- Service Workers
To accomplish this, the goal is to add a new .Vue called feedback (what the user will perceive as a new "page"). This page will allow the user to submit feedback to Globe & Citizen with the only data fields being subject and body. When the user submits, the goal will be to sync the feedback with a Firestore backend running Firebase Cloud functions and a Firestore DB. Of course, it must work offline and sync in the background when the user comes back online.
Considerations 1) You can work 100% of the develop branch (main and develop are currently identical). 2) No need to wait for anyone else. 3) Very simple CSS stylings are adequate. However CSS should be precached. 4) Layer8 will be integrated into the event listener so that when the SW that fires, layer8interceptor is invoked. 5) If any firebase / cloud costs will be incurred, I can open the account and give access.
Proposed Next Steps
1) Create the Feedback .vue "page" scaffolding
2) Add a manifest to make the app installable.
3) Add a SW to intercept fetch requests to your feedback API
4) Add your Feedback API using Cloud Functions and Firestore
5) Integrate layer8 into the service worker that intercepts the request
Acceptance Criteria 1) Users can navigate to and from the feedback form and input data offline if app is installed thanks to precaching assets. 2) Users can add feedback and see this feedback persist thanks to dynamic caching 3) All network activity transits through layer8 transparently to the user.
Bonus / Forward guidance Camera functionality is coming next...
Motivation PWAs (progressive web app technology), because it leverages a "proxy" model, presents a HUGE opportunity for us to build what look and feels like a native application while simultaneously leveraging layer8.
*Resources
Description: You will complete this course, sections 1 - 12. However, there is a twist, you must complete the course while having all network requests transit through the working Layer8 proxy.
Considerations 1) Use the current, working version of Layer8 compiled with the standard compiler. 2) Create a public repo where you can share your progress. 3) Successfully recreate the same PWA functionality but route all network requests through Layer8. 4) Use your own firebase account (free of course) 5) Use a public repo that the rest of team can learn from.
Acceptance Criteria: In short, recreate the modelled PWA Instagram clone using Layer8