This project is a technical proof of concept of a Progressive Web App (PWA) made with the Lightning Web Component Open Source (LWC OSS) framework. Its purpose is to:
- Test the LWC OSS framework as a Progressive Web App, a web application that can be installed on desktop computers and mobile devices like Apple/Google store applications.
- Get and update data from the Salesforce platform in a secure way (JWT authentication).
- Emit web push notifications from the Salesforce platform when a data has been updated.
- Use the Lightning base components and the SLDS stylesheet on front end.
The record shop displays records (you cannot add some yourself). You can click on them to listen to songs and upvote the records you like. This application is not intended to be used daily and is therefore not functionally sophisticated. This is just a technical proof of concept.
There is still much work to be done to improve this application:
- Various optimization of the code. The Lightning base component npm package is still in alpha version so workaround are used to bypass bugs. The code should also facilitate the conversion of front-end component from open-source to Salesforce hosted components (use of Custom Labels to display information, use of @wire service to get contacts…).
- Security improvements, especially concerning the VAPID keys storage and front-back end communication between the three technical applications (see The applications section).
- Navigate to: https://record-shop-lwc-oss.herokuapp.com
- Install the application on your device:
- Android/iOS devices
- Desktop computers
- Subscribe notifications, accept when a message prompts to authorize notifications and like a record -> all the subscribed users will receive a notification, including you.
Three applications interacts with each others to run the Record Shop:
- Record Shop (Heroku): front-end application, hosted on Heroku.
- Record Shop (Salesforce): back-end application, hosts the data about records and triggers the notifications emission using the web-push-generator.
- Web Push Generator: Node.js utility application using the web-push npm package to send notifications to subscribed users.