Garbage collector

This is a POC of a PWA ... that can show and push garbage pickup information. Currently supported on Android, Windows, Linux, MacOS at least. Still missing on iOS (but Apple have now announceth their support will come in 2023)

Displaimer: it looks terrible on desktop

Simple calendar able to display when different types of garbage is scheduled to be collected and optionally push you a notification the day before so that you remember to push your bin on to the road where the garbage truck can pick it up.

Really really important topic, since people (like me) don't remember anything anymore and the garbage truck workers won't walk to your house to pick it up.

Given the backend scraper providing the data is working for an address and municipality, this web app works. I have deployed it as is on www.avfallsrute.no

The design supports limitless amounts of municipalities

So far I only have a working scraper for Stavanger.

Background

It's not that we dont have apps like this in Norway, we do have a lot actually - often one per municipality. So that brings us to the four reasons I created my own:

• The official apps' push notifications have been unreliable on Android phones for different reasons.
• They don't even let you export to your own private calendar
• If you are responsible for the garbage being collected in two different municipalities, you probably need two apps.
• The apps would be limited to Android and iOS so you can't get push notifications on any other platform.

When I figured out that web apps could do push notifications in 2018 I had a good use case. It has been extremely reliable for Android and Windows, probably since Google and Microsoft is backing this technology very heavily.

It would have been simpler if these garbage data were openly available, but I have never found them to be so, so therefore we need to do the grindy work of scraping, or try to influence politicians.

Stack

Backend

• Firebase
• NodeJs

Web client

• Lit
• Workbox

design

There are couple of endpoints in the backend:

• fetching garbage data for a given address via the scraper (if it's not already cached in firestore)
• listing municipalities
• subscribing to push notifications
• unsubscribing to push notifications
• listing a device' current subscriptions

The web client is just about looking up and displaying garbage calendar and give option to subscribe to notifications. The notifications are done through a service worker and the app is installable. On mobile phone you can swipe through the months.

Run locally and debug

Client Debugging locally also loads the serviceworker and will cache the app.

cd client
npm start

Backend must be deployed (I don't know how to run them locally)

Setup cloud

Requires knowledge of setting up a Firebase project with Firestore database and Firebase Cloud Messaging It also uses a pub/sub in Google Cloud for schedule of pushing the notifications (firebase project will also be a google cloud project)

Deploy

Firebase needed for deployment:

npm install -g firebase-tools

Client

cd client
firebase deploy

# only rules
firebase deploy --only firestore:rules

Functions

cd functions
firebase deploy