Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adamansubtractm/scoopers-newsletter-demo-app
https://github.com/adamansubtractm/scoopers-newsletter-demo-app
Last synced: 24 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/adamansubtractm/scoopers-newsletter-demo-app
- Owner: AdamAnSubtractM
- Created: 2021-09-06T21:25:37.000Z (over 3 years ago)
- Default Branch: feature/add-custom-server
- Last Pushed: 2021-09-29T14:50:44.000Z (over 3 years ago)
- Last Synced: 2024-12-19T08:02:51.557Z (30 days ago)
- Language: JavaScript
- Homepage: scoopers-newsletter-demo-app.vercel.app
- Size: 68.7 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Scoopers' Newsletter
This app is intended to be a demo app that is used to demonstrate different features of a PWA. With this first round of commits, we will be demostration push notifications. The idea is that we will expand on this app and keep adding more and more PWA features.
## Live Version
[https://scoopers-newsletter-demo-app-soycm.ondigitalocean.app/](https://scoopers-newsletter-demo-app-soycm.ondigitalocean.app/)
* The GitHub admins have locked us down from being able to add integrations like Vercel for deployment. The workaround was to host this repo on my personal GitHub and hook up Vercel to that repository. The downside is that now I have to push to two repos to keep them in sync.
## Prerequisites
### Install latest node
This project requires the LTS version of Node. If you have another version installed, you can best manage them using Node Version Manager (nvm) or n. This is well documented in confluence.
Read [Installing NodeJS and managing multiple versions.](https://anixter.atlassian.net/wiki/spaces/NEW/pages/2745466916/Installing+NodeJS+and+managing+multiple+versions.)
### Getting the project locally
```sh
git clone https://github.com/AdamAnSubtractM/scoopers-newsletter-demo-app
cd scoopers-newsletter-demo-app
```
### Installing dependencies
The dependency for entire project can be downloaded using the following command
```sh
npm i
```
### Generate a vapid public/private key pair. This is important for the app to work locally
* In the root directory of this project run `./node_modules/.bin/web-push generate-vapid-keys`
* Copy these keys to a safe place as we will need them in the following steps
* Copy the `sampleenv.local` file and rename it to `.env.local`. This is ignored by git for security reasons
* Update `NEXT_PUBLIC_VAPID_PUBLIC_KEY` to have a value of the public key we generated in the previous steps
* Update `VAPID_PRIVATE_KEY` to have a value of the private key we generated in the previous steps
### Some general notes about the push notifications in this demo
* The app intentionally only allows the user to reserve one icecream at a time because I don't want to bog down my $10 server with uneccessary load. In a real app, ideally, you'd be able to handle multiple notifications
* If you pull this down locally, you may notice that at times, the push notifications don't always send. This is because we're checking the notification queue every thirty seconds and after a while, the browser may throttle the notifications so that you're not abusing them. Simply shut off the server, completely exit the browser, and restart the browser & server to resolve this
### Start the App
Once installed, you can start the app with the following command
```sh
npm start
```
This will start the app at [localhost:3000](http://localhost:3000).
### References
Use [Notification Generator](https://serviceworke.rs/push-get-payload_demo.html) demo to test the client notification subscription workflow
[Customize the Notification `options` object](https://developer.mozilla.org/en-US/docs/Web/API/notification/Notification#Syntax)
[API documentation of `Clients` interface](https://developer.mozilla.org/en-US/docs/Web/API/Clients)
[API documentation for `clients.openWindow`](https://developer.mozilla.org/en-US/docs/Web/API/Clients/openWindow)
[API documentation on `clients.matchAll`](https://developer.mozilla.org/en-US/docs/Web/API/Clients/matchAll)
[API documentation for `PushManager.subscribe`](https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe)
[API documentation of Service Worker `getNotifications`](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/getNotifications)
[API documentation of Service Worker `showNotifications`](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification)
[API documentation of `ServiceWorkerRegistration`](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration)
[API Reference for `webPush.sendNotification`](https://github.com/web-push-libs/web-push#api-reference)
[Usage Example for FakerJS `helpers.createTransaction`](https://rawgit.com/Marak/faker.js/master/examples/browser/index.html#helpers)
[W3 Spec on Service Worker `event.waitUntil`](https://www.w3.org/TR/service-workers/#wait-until-method)
[W3 Spec on Page Visibility](https://www.w3.org/TR/page-visibility/#dom-document-visibilitystate)