[PR #4344] [MERGED] fix: preemptly update pwa settings to avoid missing files in the service worker cache #4762

New issue

Closed

opened 2026-03-17 02:16:13 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:16:13 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/4344
Author: @amk-dev
Created: 9/13/2024
Status: ✅ Merged
Merged: 9/19/2024
Merged by: @AndrewBastin

Base: patch ← Head: fix/empty-screen-on-update

📝 Commits (2)

c9b0e93 chore: update vite-plugin-pwa
bd9b2e6 chore: revert version bump and apply higher max cache file size

📊 Changes

3 files changed (+132 additions, -33 deletions)

View changed files

📝 packages/hoppscotch-selfhost-web/package.json (+2 -2)
📝 packages/hoppscotch-selfhost-web/vite.config.ts (+1 -1)
📝 pnpm-lock.yaml (+129 -30)

📄 Description

Recently we had the below issue on our cloud instance, this PR adds the necessery changes required to preemptively fix this.

Before

Whenever a release is out, our webapp seems to get an empty screen. this is happening due to a resource going above the max file size for getting cached and being left out from the precache.

so this is happening,

the initial service worker is built, but the oversized file is not included in the service worker cache
so when we load the app for the first time, the browser will go and fetch the oversized file from the server, no issues
but when a new release is rolled out, the server doesnt have the old oversized file, its hash might have changed, so when the browser tries to go and fetch it, it will get a 404 ( or a redirect to index.html based on the server config ).
this happens untill the new release's service worker gets activated, but once its activated, it has the new filename for the oversized file, it fetches it from the server, not a 404.
but on the next release the same cycle continues.

After

In our cloud instance, I've increased the max cache size to 10MB using maximumFileSizeToCacheInBytes option in workbox. but here i'm not doing that because it hasn't happened yet. but incase any file hits that limit. the build will fail and we'll know exactly what change causing it, and we can make whatever change is appropriate then.

On the newer versions of vite-plugin-pwa, it will throw an error instead of a warning if a file goes above the cachable limit. so we'll know before we ship it. so i've updated the vite-plugin-pwa to the latest version.

NB: although we have a cached app, and people might have good internet, we should look into factors affecting our bundle size as a lower priority thing.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/4344 **Author:** [@amk-dev](https://github.com/amk-dev) **Created:** 9/13/2024 **Status:** ✅ Merged **Merged:** 9/19/2024 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `patch` ← **Head:** `fix/empty-screen-on-update` --- ### 📝 Commits (2) - [`c9b0e93`](https://github.com/hoppscotch/hoppscotch/commit/c9b0e93263eab185d513ad0a0699f3b27ceeb3b7) chore: update vite-plugin-pwa - [`bd9b2e6`](https://github.com/hoppscotch/hoppscotch/commit/bd9b2e6dc994d2c39adbdfcc2b0f67c312be7a79) chore: revert version bump and apply higher max cache file size ### 📊 Changes **3 files changed** (+132 additions, -33 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-selfhost-web/package.json` (+2 -2) 📝 `packages/hoppscotch-selfhost-web/vite.config.ts` (+1 -1) 📝 `pnpm-lock.yaml` (+129 -30) </details> ### 📄 Description Recently we had the below issue on our cloud instance, this PR adds the necessery changes required to preemptively fix this. **Before** Whenever a release is out, our webapp seems to get an empty screen. this is happening due to a resource going above the max file size for getting cached and being left out from the precache. so this is happening, 1. the initial service worker is built, but the oversized file is not included in the service worker cache 2. so when we load the app for the first time, the browser will go and fetch the oversized file from the server, no issues 3. but when a new release is rolled out, the server doesnt have the old oversized file, its hash might have changed, so when the browser tries to go and fetch it, it will get a 404 ( or a redirect to index.html based on the server config ). 4. this happens untill the new release's service worker gets activated, but once its activated, it has the new filename for the oversized file, it fetches it from the server, not a 404. 5. but on the next release the same cycle continues. **After** In our cloud instance, I've increased the max cache size to 10MB using `maximumFileSizeToCacheInBytes` option in workbox. but here i'm not doing that because it hasn't happened yet. but incase any file hits that limit. the build will fail and we'll know exactly what change causing it, and we can make whatever change is appropriate then. 1. On the newer versions of `vite-plugin-pwa`, it will throw an error instead of a warning if a file goes above the cachable limit. so we'll know before we ship it. so i've updated the `vite-plugin-pwa` to the latest version. NB: although we have a cached app, and people might have good internet, we should look into factors affecting our bundle size as a lower priority thing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>