Service worker: show the update's size before asking for a reload

Open
#538 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
82/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
next.js, typescript
Domain
devtools, frontend

Research direction

Start with components/layout/pwa-register.tsx and trace how the update toast receives messages from scripts/service-worker-source.mjs, especially keptRoutes and rekeep. Then read tests/e2e/service-worker-update.spec.ts and run the update end-to-end test. Done means the toast shows the kept-studio count, preserves the old text when the count is zero, all four translations are updated, and docs/troubleshooting.md mentions the behavior.

Written by the indexing model from the issue text.

Description

area: ui difficulty: medium enhancement help wanted v2.0.0

Summary

The Update available toast says to reload, but a person on a slow connection or offline soon after wants to know what the update downloads and whether their kept studios will be ready. The worker knows how many studios it will download again.

Part of the 2.0.0 plan: fewer, better and fully tested studios, on a calmer and faster site.

Where to look

  • components/layout/pwa-register.tsx
  • scripts/service-worker-source.mjs (keptRoutes, rekeep)
  • tests/e2e/service-worker-update.spec.ts

Behaviour

  • Have the new worker count the kept studios before it takes over, and show that in the toast text.
  • Keep the reload button as it is and never block the update.
  • Translate the text in all four languages.

Acceptance criteria

  • The update end-to-end test sees the count in the toast.
  • A person with no kept studios sees the old text.
  • docs/troubleshooting.md mentions it.

Getting started: fork the repo, then pnpm install and pnpm dev (Node 22+, pnpm 11, no API keys). Before opening a PR, run pnpm typecheck && pnpm test && pnpm lint && pnpm format:check && pnpm check:dashes && pnpm build (CI fails on unformatted files, so pnpm format first). See CONTRIBUTING.md and the first contribution walkthrough.

Everything needed is in the repository. This doesn't need maintainer access, secrets or paid services. Comment below to claim it, and ask questions here any time.

Dominant language
TypeScript
Stars
11
Forks
3
Avg merge
6h 9m
Merged PRs (30d)
73

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from yakew7/DesignHub

All issues in yakew7/DesignHub

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.