This project demonstrates some of the latest progressive web app features.
The functionality is quite simple: It's a Webapp thet halps you to manage ToDos.
For demo purposes I created the same App in VueJS and Preact, which uses the same syntax like React.
VueJS: https://github.com/nico-martin/todo-pwa/tree/master/vue
(P)ReactJS: https://github.com/nico-martin/todo-pwa/tree/master/preact
I'm using a quite basic Webpack setup that compiles and bundles my Vue and JSX files.
I'm then using TailwindCSS as a CSS Framework because in this case I just wantend something pretty without having to care about the architecture.
A ServiceWorker is a JavaScript file that lives in a special scope of the browser and runs even if the browser is closed.
This App uses the InjectManifest method from workbox-webpack-plugin to add generated files to the ServiceWorker so they will be precached. Additionally, it allows us to add more ServiceWorker event listeners if we need to (VueJS / PreactJS).
The ServiceWorker then needs to be registered from JavaScript (VueJS / PreactJS).
The IndexedDB is a Non-relational database (an Object Store) inside the Browser. In this example I'm using idb, a promise based wrapper around the IndexedDB API (VueJS / PreactJS). This app uses the IndexedDB to store ToDo items persistently (VueJS / PreactJS)
Please note that "peristance" is still managed by the browser. In version 52, Chrome introduced the Persistent Storage API that would assure the data won't be deleted if the app matches one or more defined criterias.
I'm using Webpack PWA Manifest to generate a Manifest File that provides all the information to make the app "installable" (VueJS / PreactJS)
Instead of using the native add to homescreen promit I added a custom "add to homescreen" button. Therefore I catched the beforeinstallprompt event and implemented my own button (VueJS / PreactJS)
The web share API allows us to share data from our web app the same way we do from our iOS and Android apps.
Therefor we only need to call the navigator.share-Method with a set of data. (VueJS / PreactJS)
The Share Target API allows your app to be registered as a share target so it appears in the share modal whenever you want to share something using the native share propmpt. (VueJS / PreactJS)
The incoming Share-Requests can then be handeled inside your application (VueJS / PreactJS)
This App uses the Notification Triggers API to display scheduled push notifications. If you click on the little bell right to the todo item you can select a time when you want to recieve a reminder.
It schedules a new notification in the app (VueJS / PreactJS). The Push Notification can then be handled inside the ServiceWorker. For example to open the app or focus an already opened window if the user clicks on the notification (VueJS / PreactJS). It's also possible for the ServiceWorker to send messages to the app using (VueJS / PreactJS) that can then be processed within the app (VueJS / PreactJS).
The Contact Picker API opens a modal that allows the user to choose one or more contacts. This information can then be used by the Webapp. (VueJS / PreactJS)