TimeSafari.app - Crowd-Funder for Time - PWA

Project setup

We have pkgx.dev set up in package.json, so you can use dev to set up the dev environment.

npm install

Compiles and hot-reloads for development

npm run serve

Lints and fixes files

npm run lint

Compiles and minifies for production

• npx prettier --write ./sw_scripts/

• Update the project.task.yaml & CHANGELOG.md & the version in package.json, run npm install, and commit.

• Tag wth the new version.

... though maybe you do that after testing and release, since that isn't used in the build (and you often increment a lot during testing).

• If production, change src/constants/app.ts DEFAULT_*_SERVER to be "PROD" and package.json to remove "_Test". Also record what version is on production.

• npm run build

...to make sure the service worker scripts are in proper form. (It's only important if you changed something in that directory.)

• cp sw_scripts/[ns]* dist/

... to copy the contents of the sw_scripts folder to the dist folder - except additional_scripts.js.

• Get on the server and back up the time-safari folder.

• rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari

• Revert src/constants/app.ts and package.json (if that was prod), edit package.json to increment version & add "-beta", npm install, and commit. Tag if you didn't before. Also record what version is on production.

Tests

Register new user on test server

On the test server, User #0 has rights to register others, so you can start playing by importing that user and registering others. Import the keys for the test User did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F by importing this seed phrase: rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage (Other test users are found here.)

Create multiple identifiers

Under the "Your Identity" screen, click "Advanced", click "Switch Identity / No Identity", then "Add Another Identity...".

Create keys with alternate tools

This page is a tool to create a JWT from a locally-generated keypair.

Web-push

For your own web-push tests, change the push server URL in Advanced settings on the account page, and install Time Safari & push server on the same domain.

Icons

To add an icon, add to main.ts and reference with fa element and icon attribute with the hyphenated name.

Manual walk-through test

• Test with a mobile user as well as a desktop user.
• Clear the browser data. (See "Reset" below.) Make sure that it's using the test API.
  • Go to the account page before visiting the home page to see that there is no ID.
  • On the home page:
    • Check that it generated an ID.
    • Check the feed without names.
    • Copy the contact URL.
  • On each page, verify the messaging, and that they cannot take action.
  • On the discovery page, check that they can see projects, and set a search area to see projects nearby.
  • On the contacts page, check that they can add User #0 even without their own ID.
• As User #0 in another browser on the test API, add a give & a project. (See User #0 details above.)
  • With the new user on the home page, see the feed that shows User #0 in network but without the name.
• As the new user on the contacts page, add User #0 as a contact.
  • On the home page, see the feed that shows User #0 with a name.
• Switch back to the generated identifier.
  • On the account page, check that they see messages on limits.
• As User #0, register the ID.
• As the new user on the home page, check that they can now record a gift.
• On the contacts page, check that they cannot register someone else yet.
• Walk through the functions on each page.
• Set and run notifications.
• Export & import, both seed and contacts & settings.
• Choose location on the search map.
• Offer, deliver a give, and confirm. Create a third user and test connections.
• Switch to "no identifier" to see that things look OK without any ID.
• Test the mobile view. (Note that Firefox mobile doesn't always show bottom icons.)

Scenarios

• Create a new identity as prompted. Go to "Your Identity" screen and copy the ID to the clipboard.

• Go back to /start and import test User #0 did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F with this this seed phrase: rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage (Other test users are found here.)

• Go to "Your Contacts" screen and add the ID you copied to the clipboard, and hit "+" to add them.

• Click on the "Registration Unknown" button and register that person to be able to make claims as them.

Clear/Reset data & restart

• Clear cache for site. (In Chrome, go to chrome://settings/cookies and "all site data and permissions"; in Firefox, go to about:preferences and search for "cache" then "Manage Data", and also manually remove the IndexedDB data if the DBs still show.)
• Clear notification permission. (In Chrome, go to chrome://settings/content/notifications; in Firefox, go to about:preferences and search for "notifications".)
• Unregister service worker. (In Chrome, go to chrome://serviceworker-internals/; in Firefox, go to about:serviceworkers.)
• Clear Cache Storage manually, possibly deleting the DB. (In Chrome, in dev tools under Application; in Firefox, in dev tools under Storage.)

(If you find more, add them to the HelpNotificationsView.vue file.)

Troubleshooting

• A problem with GET http://localhost:8080/web-push/vapid means the py-push-server is not running (and it won't work for a local app, anyway).

• Red errors everywhere with a console message like this: Error: An ID is chosen but there are no keys for it so it cannot be used to talk with the service ... has happened on account switching when the current account was erased (or maybe replaced -- once I had a duplicate and I don't know how).

Other

Reference Material

• Notifications can be type of toast (self-dismiss), info, success, warning, and danger. They are done via notiwind and set up in App.vue.

• Customize Vue configuration.

• If you are deploying in a subdirectory, add it to publicPath in vue.config.js, eg: publicPath: "/app/time-tracker/",

Kudos

Gifts make the world go 'round!

• WebStorm by JetBrains for the free open-source license
• Máximo Fernández for the 3D code and explanatory post
• Many tools & libraries such as Nodejs.org, IntelliJ Idea, Veramo.io, Vuejs.org, threejs.org
• Bush 3D model
• Forest floor image
• Time Safari logo assisted by DALL-E in ChatGPT
• DiceBear and Avataaars for human-looking identicons