feat: pwa with push notifications #337

userquin · 2022-12-04T22:02:52Z

This PR includes:

pwa with prompt for update
pwa icons for production and dev/preview modes
pwa only on dev and local build scripts: dev-pwa and build-pwa respectivelly
service worker with push notifications and notification click capabilities added: we need to check switching between multiple accounts
PWAPrompt.client.vue and NotificationPreferences.client.vue components
notification settings button and notification preferences on notifications page
i18n properties for pwa and notification preferences: for en-US and es-ES locales
pwa configuration to modules folder (like i18n configuration)
pwa prompt on app.vue and error.vue pages
current push subscription is now requested on login: added entry to UserLogin
notifications settings and notification permission only shown with process.env.VITE_DEV_PWA=true: we dont want PWA on production yet

Pending to review:

check push subscription on multiple account switching
request notification permission logic

Missing:

settings options
allow show settings with pending notification permission: right now the settings button is disabled when desktop notifications shown

To test the pwa run nr dev-pwa or nr build-pwa && nr start: on dev server you can debug the service worker and push notifications and clicks.

Video running the dev server: https://streamable.com/b4cx5i

closes #101
closes #340
closes #84

supersedes #110

stackblitz · 2022-12-04T22:02:54Z

Run & review this pull request in StackBlitz Codeflow.

netlify · 2022-12-04T22:02:57Z

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	`8e93f47`
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/639e503ee0433700098ceb25
😎 Deploy Preview	https://deploy-preview-337--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

# Conflicts: # composables/users.ts # package.json # pnpm-lock.yaml

# Conflicts: # pnpm-lock.yaml

composables/push-notifications/usePushManager.ts

sxzz · 2022-12-05T13:34:34Z

components/notification/NotificationPreferences.client.vue

+  isSupported,
+  notificationPermission,
+  subscribe,
+  unsubscribe,


we need to add ui stuff for unused stuff...

@sxzz added unused stuff logic

modules/pwa/index.ts

modules/pwa/runtime/sw.ts

…/feat-pwa # Conflicts: # modules/pwa/runtime/sw.ts

danielroe · 2022-12-14T23:48:16Z

Some UI thoughts:

This should have a primary-coloured button with 'Save' or 'Close' something below it otherwise the most obvious thing to click is actually to disable notifications

On FF, after enabling notifications the 'Enable notifications' CTA didn't disappear until I refreshed the page. But notifications don't seem to be working there. (Possibly a FF issue?)

Reworked the pr to hopefully remove the runtime/sw.ts workaround with nitro, but entirely possible I've missed some key step, so please test and let me know if there's anything I missed.

danielroe · 2022-12-14T23:53:14Z

(FF was my error - it's working fine.)

userquin · 2022-12-15T00:09:53Z

@danielroe

About the settings panel, we need to review it.

I just add the checks to test masto api (beware, on change will go to the server) and disable button to test unsubscribe from push notifications.

Push notifications works also on Safari 16, cyberalien did some tests.

userquin · 2022-12-15T00:10:30Z

(FF was my error - it's working fine.)

Thx ❤️

userquin · 2022-12-15T20:41:23Z

@danielroe latest changes:

added push notifications policy to settings: masto push notifications seems to omit the policy on the update response!
added form with save and undo buttons: both buttons disabled when there are no changes
added form for disable push notifications button
added CommonRadio (type=radio)
added hover styles and focus styles to CommonRadio and CommonCheckbox
added animation for susbcribe, disable and save changes

locales/en-US.json

locales/es-ES.json

userquin · 2022-12-16T12:07:52Z

composables/push-notifications/createPushSubscription.ts

+        }
+        else {
+          // Something went wrong, try to subscribe again
+          return unsubscribe({ registration, subscription }).then(


we should:

unscrubscribe/remove push subscription from backend: useMasto().pushSubscriptions.remove()

do the push subscription and send back to the backend OR just call sendSubscriptionToBackend once removed

On unsubscribe/logout, we also need to check if we can remove sw push manager subscription (there are no more subscribed accounts): I'll rewrite the logic later

would you come up with some issues to describe the outstanding tasks so we don't forget?

# Conflicts: # .eslintignore # app.vue # nuxt.config.ts # types/index.ts

danielroe · 2022-12-17T18:26:54Z

I'm getting this error at the moment when I try to enable push notifications):

TypeError: can't assign to property "daniel@roe.dev" on false: not an object

(This is also happening with the default elk dev team mock.)

I'm assuming an upstream change has caused this.

userquin · 2022-12-17T19:16:15Z

Clear local storage: to support hide notification per account the type was changed from boolean to Record<string, boolean>, maybe we need to prepend also the server to the acct as the key.

The entry to remove from local storage is called elk-notification.

feat: pwa with push notifications

61742fe

userquin requested a review from danielroe December 4, 2022 22:03

userquin added 5 commits December 4, 2022 23:16

Merge branch 'main' into userquin/feat-pwa

d3eadd8

# Conflicts: # composables/users.ts # package.json # pnpm-lock.yaml

chore: add push subscription with latest changes

4334fdd

chore: add hint about push subscription

d1c8b15

cleanup: comment console log

7206f96

chore: update pnpm lock

798a673

userquin mentioned this pull request Dec 4, 2022

feat: add basic pwa #110

Closed

userquin added 4 commits December 5, 2022 00:02

chore: hide notification setting button and warning with NO PWA

25596dc

chore: prefix DEV_PWA with VITE_ for import.meta.env usage

a2664e2

Merge branch 'main' into userquin/feat-pwa

2ff3391

# Conflicts: # pnpm-lock.yaml

chore: update pnpm lock file

f4229f6

Shinigami92 added the c: feature Request for new feature label Dec 5, 2022

Shinigami92 assigned userquin Dec 5, 2022

userquin added 4 commits December 5, 2022 12:38

chore: change request notification to use query

3f1c9f6

fix: test:typecheck script

172ffab

fix: update request not. logic

5869780

chore: update some ui stuff

5b7ed1c

userquin marked this pull request as ready for review December 5, 2022 12:49

sxzz reviewed Dec 5, 2022

View reviewed changes

composables/push-notifications/usePushManager.ts Outdated Show resolved Hide resolved

sxzz reviewed Dec 5, 2022

View reviewed changes

userquin added 2 commits December 5, 2022 23:38

chore: exclude hook and handler (netlify will handle webmanifest)

58b1837

chore: use event.node.res instead res

da37831

userquin commented Dec 5, 2022

View reviewed changes

modules/pwa/index.ts Outdated Show resolved Hide resolved

userquin commented Dec 5, 2022

View reviewed changes

modules/pwa/runtime/sw.ts Outdated Show resolved Hide resolved

chore: use h3 utils

0a451ff

danielroe reviewed Dec 5, 2022

View reviewed changes

modules/pwa/runtime/sw.ts Outdated Show resolved Hide resolved

Merge remote-tracking branch 'origin/userquin/feat-pwa' into userquin…

38f90d2

…/feat-pwa # Conflicts: # modules/pwa/runtime/sw.ts

danielroe added 3 commits December 14, 2022 21:48

chore: push vapid key to mock user

4a24877

refactor: use nitro dir to set outDir

9bf5189

refactor: rework nitro integration

8b0afea

chore: update vapid key again

0cafda4

userquin added 3 commits December 15, 2022 21:07

chore: update push subscription settings logic

28b1c9f

Merge branch 'main' into userquin/feat-pwa

c141627

chore: hover on settings + form for disable desktop settings

b96adc5

userquin requested a review from danielroe December 15, 2022 20:36

userquin commented Dec 16, 2022

View reviewed changes

locales/en-US.json Outdated Show resolved Hide resolved

userquin commented Dec 16, 2022

View reviewed changes

locales/es-ES.json Outdated Show resolved Hide resolved

userquin commented Dec 16, 2022

View reviewed changes

userquin added 5 commits December 16, 2022 16:04

chore: np setting poll should be plural

602f1fa

chore: update push subscription logic

65fe304

Merge branch 'main' into userquin/feat-pwa

2a7d661

Merge branch 'main' into userquin/feat-pwa

4a9e3a9

Merge branch 'main' into userquin/feat-pwa

de2f9fc

# Conflicts: # .eslintignore # app.vue # nuxt.config.ts # types/index.ts

Merge branch 'main' into userquin/feat-pwa

b953a74

danielroe approved these changes Dec 17, 2022

View reviewed changes

danielroe added 2 commits December 17, 2022 23:10

Merge branch 'main' into userquin/feat-pwa

7e49b02

feat: enable in production

8e93f47

danielroe merged commit f0c91a3 into main Dec 17, 2022

danielroe deleted the userquin/feat-pwa branch December 17, 2022 23:29

userquin mentioned this pull request Apr 4, 2024

Module does nothing ? (EDIT: No Firefox support ?) vite-pwa/nuxt#126

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: pwa with push notifications #337

feat: pwa with push notifications #337

userquin commented Dec 4, 2022 •

edited

Loading

stackblitz bot commented Dec 4, 2022

netlify bot commented Dec 4, 2022 •

edited

Loading

sxzz Dec 5, 2022

userquin Dec 5, 2022

userquin Dec 13, 2022 •

edited

Loading

danielroe commented Dec 14, 2022

danielroe commented Dec 14, 2022

userquin commented Dec 15, 2022

userquin commented Dec 15, 2022

userquin commented Dec 15, 2022 •

edited

Loading

userquin Dec 16, 2022 •

edited

Loading

danielroe Dec 17, 2022

danielroe commented Dec 17, 2022 •

edited

Loading

userquin commented Dec 17, 2022 •

edited

Loading

feat: pwa with push notifications #337

feat: pwa with push notifications #337

Conversation

userquin commented Dec 4, 2022 • edited Loading

stackblitz bot commented Dec 4, 2022

netlify bot commented Dec 4, 2022 • edited Loading

✅ Deploy Preview for elk-zone ready!

sxzz Dec 5, 2022

Choose a reason for hiding this comment

userquin Dec 5, 2022

Choose a reason for hiding this comment

userquin Dec 13, 2022 • edited Loading

Choose a reason for hiding this comment

danielroe commented Dec 14, 2022

danielroe commented Dec 14, 2022

userquin commented Dec 15, 2022

userquin commented Dec 15, 2022

userquin commented Dec 15, 2022 • edited Loading

userquin Dec 16, 2022 • edited Loading

Choose a reason for hiding this comment

danielroe Dec 17, 2022

Choose a reason for hiding this comment

danielroe commented Dec 17, 2022 • edited Loading

userquin commented Dec 17, 2022 • edited Loading

userquin commented Dec 4, 2022 •

edited

Loading

netlify bot commented Dec 4, 2022 •

edited

Loading

userquin Dec 13, 2022 •

edited

Loading

userquin commented Dec 15, 2022 •

edited

Loading

userquin Dec 16, 2022 •

edited

Loading

danielroe commented Dec 17, 2022 •

edited

Loading

userquin commented Dec 17, 2022 •

edited

Loading