remix-pwa/monorepo

Remix PWA v4

Remix PWA

Remix PWA is a PWA framework that seamlessly integrates Progressive Web App (PWA) features into Remix including offline support, caching, installability on Native devices and more.

Check out the new documentation for the full list of features and more!

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

monorepo's Issues

Getting started not working properly

Hey there,

I'm attempting to upgrade to remix/[email protected]. However, after running:

npx remix-pwa sw

I encounter the following error:

`
Generating TypeScript service worker file...
node:internal/process/promises:289
triggerUncaughtException(err, true /* fromPromise */);
^

[Error: ENOENT: no such file or directory, open '/home/canic/remix-echarge/templates/entry.worker.ts'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/home/canic/remix-echarge/templates/entry.worker.ts'
}

Node.js v20.10.0
`

Additionally, I noticed that the entry.worker.js file hasn't been updated and still refers to old dependencies, as per the upgrade documentation:
https://github.com/remix-pwa/monorepo/blob/main/templates/app/entry.worker.ts

Am I missing something here?

how to setup Offline Page using remix-pwa

Hello,

I am looking for a solution to setup Offline Page in PWA in my Remix App and I was looking around on Google and I came across your remix-pwa package, but in the documentation I wasn't able to find how to setup Offline Page in Remix App using remix-pwa.

can you please help me how to setup a offline page in Remix App using remix-pwa?

cacheFirst crash on Safari 17

Given this cache handler

cacheFirst({
	cache: assetCache,
	cacheQueryOptions: {
		ignoreSearch: true,
		ignoreVary: true,
	},
})

In a defaultFetchHandler

export const defaultFetchHandler: DefaultFetchHandler = ({
	context,
	request,
}) => {
	const type = matchRequest(request);

	if (type === "asset") {
		return assetsHandler(context.event.request);
	}

	if (type === "loader") {
		return dataHandler(context.event.request);
	}

	return context.fetchFromServer();
};

This crash on Safari 17 (beta and developper preview) on macOS.

Packages: @remix-pwa/strategy, @remix-pwa/cache

Throw on this line:

monorepo/packages/cache/src/cache.ts

Line 301 in a65e6a1

data = await response.clone().json();

I'm trying to find why.

Failed to load resource: FetchEvent.respondWith received an error: SyntaxError: The string did not match the expected pattern.
FetchEvent.respondWith received an error: SyntaxError: The string did not match the expected pattern.

The automated release is failing 🚨

🚨 The automated release from the dev branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the dev branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Server is crashing, no service worker being built, redeclaration of variable.

Hey @ShafSpecs, I was installing remix-pwa, I went through all the steps on the getting started page but when i start the server I get this error. I ran the two npm commands, put the couple of lines in the vite config file and created the service worker. I did it a couple of time to make I'd done it right. Let me know if you need any more info to help fix this. Thanks

sw: Asset cache in precache handler not initialised correctly

In packages/sw/src/message/precacheHandler.ts

The assetCache is not initialized, resulting in a cache named rp-undefined being created.

Unlike dataCache and documentCache the corresponding asset variable is not initialized with this.assetCacheName.
Then this.assetCacheName is checked if it's a string, but the always undefined assetCache variable is used to open the cache.

For some reason there is a @ts-expect-error which hides this error.

Consider Remix v2 during `remix-pwa init` run

Weird bugs from not finding config file: what's going on?

remix-pwa/remix-pwa#121

Trying to build project throws error on [vite-plugin-remix-pwa:virtual-entry-sw]

Hey there!

After installing this in an epic-web project to make it a pwa, I run into the following issue during build:

Error during worker build: SyntaxError: [vite-plugin-remix-pwa:virtual-entry-sw] Could not load virtual:entry-sw (imported by ../../node_modules/@remix-pwa/worker-runtime/dist/src/service-worker.internal.js): Unexpected token, expected "}" (7:16)

Any ideas on how to go about fixing it? For reference, here are the versions I'm using:

"dependencies": {
    "@remix-pwa/dev": "^3.0.2",
    "@remix-pwa/sw": "^3.0.1",
    "@remix-pwa/worker-runtime": "^2.1.0",
    "@remix-run/express": "^2.8.1",
    "@remix-run/node": "^2.8.1",
    "@remix-run/react": "^2.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  },
  "devDependencies": {
    "@remix-run/dev": "^2.8.1",
    "@types/react": "^18.2.74",
    "@types/react-dom": "^18.2.24",
    "typescript": "^5.4.4",
    "vite": "^5.2.8",
  },
  "engines": {
    "node": ">=20.0.0"
  }

"@remix-pwa/push": "^1.0.2" is missing

I can't build mu project because I'm using 1.0.2 of remix-pwa/push

Incorrect sourmap on build due to plugin vite-plugin-remix-pwa:loader

I got this error when I was running remix vite:build

[plugin vite-plugin-remix-pwa:loader] Sourcemap is likely to be incorrect: a plugin (vite-plugin-remix-pwa:loader) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

My vite.config.ts file:

export default defineConfig({
  server: { port: 3000 },
  build: { sourcemap: true },
  plugins: [
    remix({
      ignoredRouteFiles: ["**/.*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
      routes: async (defineRoutes) => flatRoutes("routes", defineRoutes),
      // serverModuleFormat: "cjs",
      // browserNodeBuiltinsPolyfill: {
      //   modules: { buffer: true, events: true, process: true },
      // },
    }),
    remixPWA(),
    cjsInterop({
      dependencies: ["lodash", "usehooks-ts", "rc-table", "@sentry/remix"],
    }),
    tsconfigPaths({ root: __dirname }),
  ],
});

I'm using remix v2.8.1 and @remix-pwa v3.0.0

Wrong conditionals used in compiler

monorepo/packages/dev/compiler/compiler.ts

Line 78 in fadff4f

if (process.env.NODE_ENV === 'production') {

should be a !== and not ===

Cannot initialize app in v4

Hey there!

I'm working in a remix website and want to make it a PWA. I followed the Quick Start docs but when I run remix vite:dev --host I get the following errors:

Error during worker build: SyntaxError: [vite-plugin-remix-pwa:virtual-entry-sw] Could not load virtual:entry-sw (imported by node_modules/@remix-pwa/worker-runtime/dist/src/service-worker.internal.js): Unexpected token, expected "}" (7:16)
    at constructor (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:353:19)
    at TypeScriptParserMixin.raise (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:3277:19)
    at TypeScriptParserMixin.unexpected (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:3297:16)
    at TypeScriptParserMixin.expect (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:3601:28)
    at TypeScriptParserMixin.jsxParseExpressionContainer (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:6692:10)
    at TypeScriptParserMixin.jsxParseElementAt (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:6766:36)
    at TypeScriptParserMixin.jsxParseElement (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:6804:17)
    at TypeScriptParserMixin.parseExprAtom (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:6816:19)
    at TypeScriptParserMixin.parseExprSubscripts (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:10580:23)
    at TypeScriptParserMixin.parseUpdate (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:10563:21) {
  code: 'PLUGIN_ERROR',
  reasonCode: 'UnexpectedToken',
  loc: Position { line: 7, column: 16, index: 178 },
  pos: 178,
  pluginCode: 'BABEL_PARSER_SYNTAX_ERROR',
  plugin: 'vite-plugin-remix-pwa:virtual-entry-sw',
  hook: 'load',
  watchFiles: [
    '/Users/myuser/Documents/remix/myapp/node_modules/@remix-pwa/worker-runtime/dist/src/service-worker.internal.js'
  ]
}

Error: ENOENT: no such file or directory, open '/Users/myuser/Documents/remix/myapp/public/entry.worker.js'
    at Object.openSync (node:fs:596:3)
    at readFileSync (node:fs:464:35)
    at getWorkerHash (file:///Users/myuser/Documents/remix/myapp/node_modules/@remix-pwa/dev/dist/src/hash.js:7:17)
    at Context.buildStart (file:///Users/myuser/Documents/remix/myapp/node_modules/@remix-pwa/dev/dist/src/plugins/bundler.js:133:24)
    at async Promise.all (index 6)
    at async hookParallel (file:///Users/myuser/Documents/remix/myapp/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:50358:9)
    at async Object.buildStart (file:///Users/myuser/Documents/remix/myapp/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:50710:13)
    at async file:///Users/myuser/Documents/remix/myapp/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:64593:13
    at async httpServer.listen (file:///Users/myuser/Documents/remix/myapp/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:64611:17) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/myuser/Documents/remix/myapp/public/entry.worker.js'
}

If I move entry.worker.ts (which was generated with npx remix-pwa sw) into the public folder and change the extension to .js, the second error (no such file or directory) seems to go away, but the first one is still there

Any ideas on how to fix it?

Running `remix vite:dev` throws rollup plugin error

In @remix-pwa/[email protected], running the dev throws the following error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@rollup/plugin-commonjs' imported from "project\node_modules\@remix-pwa\dev\dist\src\plugins\bundler.js"

Reason:
I erroneously added the plugin to devDependencies instead of dependencies. Of course the users are going to utilise the plugins at build-time, SMH 🤦‍♂️.

Error and Failure in Creating entry.worker.ts during Remix PWA Upgrade

Hello,

I encountered an issue while trying to upgrade Remix PWA by executing npx remix-pwa sw. The process advises that this command is soon to be deprecated and suggests using npx remix-pwa@latest init instead. However, following through with the instructions leads to a failure in creating the entry.worker.ts file, accompanied by an error.

Here is the error message when executing npx remix-pwa sw:

$ npx remix-pwa sw
This command is getting deprecated soon. Please use `npx remix-pwa@latest init` instead.
✔ Is this a TypeScript or JavaScript project? Pick the opposite for chaos! · ts
✔ Do you want to integrate workbox into your project? (y/N) · false
✔ Do you want to utilise precaching in this project? (y/N) · false
✔ What features of remix-pwa do you need? Don't be afraid to pick all! · sw
✔ What package manager do you use? · npm
✔ Do you want to run npm install? (Y/n) · true
⠋ Integrating Service Worker...
file:///Users/tsuyoshihiguchi/develop/mulligan/repositories/front-end/node_modules/@remix-pwa/dev/dist/cli/getPkgVersion.js:5
    return pkgJson[0].version;
                      ^

TypeError: Cannot read properties of undefined (reading 'version')
    at getPkgVersion (file:///Users/tsuyoshihiguchi/develop/mulligan/repositories/front-end/node_modules/@remix-pwa/dev/dist/cli/getPkgVersion.js:5:23)
    at createPWA (file:///Users/tsuyoshihiguchi/develop/mulligan/repositories/front-end/node_modules/@remix-pwa/dev/dist/cli/create.js:152:74)
    at async Module.init (file:///Users/tsuyoshihiguchi/develop/mulligan/repositories/front-end/node_modules/@remix-pwa/dev/dist/cli/commands.js:16:5)
    at async Module.run (file:///Users/tsuyoshihiguchi/develop/mulligan/repositories/front-end/node_modules/@remix-pwa/dev/dist/cli/run.js:261:13)
    at async cli (file:///Users/tsuyoshihiguchi/develop/mulligan/repositories/front-end/node_modules/remix-pwa/dist/cli.js:4:5)

Node.js v18.18.0

Following the suggestion to use npx remix-pwa@latest init, I encountered another issue:

$ npx remix-pwa@latest init                                                               
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
error: unknown command 'init'
This error suggests that the init command is unknown, which is contrary to the recommendation provided in the deprecation warning.

I am unable to proceed with the integration and upgrade process due to these errors.
Best Regard,

ESM Directory Import error with Remix 2 base template

Hi,
I am getting following error while running remix 2 app using "npm run dev".

Error: Directory import '/Projects/remix/my-remix-app-v2/node_modules/@remix-pwa/cache/node_modules/buffer/' is not supported resolving ES modules imported from /Projects/remix/my-remix-app-v2/node_modules/@remix-pwa/cache/dist/src/cache.js
Did you mean to import buffer/index.js?

Implementing push notifications

Hi there, I have installed V4 and it works well so far, main reason for using the plugin is that I want to implement push notifications, I know the use to be a package @remix-pwa/push, but I think it is depreciated, is there a way to do this now or are you working on something that will do this? I can't find anything on the current website. If this is the wrong place for this message please point me somewhere I can ask.

Usage with Vite

At first, thanks for the great work!

I am getting the following error while using remix-pwa with the new remix vite plugin.
But I think the issue is not vite related since remix-pwa dev isnt using it.

Is it an ESM problem?

> remix-pwa dev

🏗️ Building Service Worker in development mode...

💿 Built Service Worker in: 21.477ms
👀 Watching for changes in the service worker file...
X [ERROR] glob is not a function [plugin sw-assets-module]

    ../../../node_modules/esbuild/lib/main.js:1434:27:
      1434 │         let result = await callback({
           ╵                            ^