DOCSEARCHbyAlgolia
Submit Docs

Remix PWA

repository·main·Indexed 41 days ago

https://github.com/remix-pwa/monorepo

A suite of libraries and utilities for integrating Progressive Web App (PWA) capabilities into Remix applications. It includes tools for service workers, offline capabilities, and web app manifests via packages such as @remix-pwa/client, @remix-pwa/cache, @remix-pwa/push, and @remix-pwa/sync. The ecosystem features a CLI for generating manifests and service workers, a specialized worker runtime, and React hooks for monitoring network connectivity, battery status, and app badging.

Tokens
31.3K
Snippets
106
Records
145
Agent score
96%

What's inside Remix PWA

  1. Overview of Remix PWA

    main
    Remix PWA is a collection of JavaScript libraries and utilities designed to simplify the process of building Progressive Web Apps (PWAs) using the Remix framework. It provides the necessary tools to implement PWA features like service workers, offline capabilities, and web app manifests within a Remix application.

  2. Use the Remix PWA playground

    main
    The Remix PWA playground is a sandbox environment designed for testing Remix PWA features. It allows developers to experiment with different configurations and features in a consequence-free environment to understand how they behave before implementing them in a production application.

  3. Testing strategy for @remix-pwa/client

    main
    The @remix-pwa/client package does not include automated tests. Because the package is built entirely on Project Fugu APIs (which are only available in modern browsers), mocking these features for a testing environment is highly complex. Developers using or contributing to this package should rely on manual testing and intuition rather than looking for an existing test suite.

  4. Use Vitest for testing in Remix PWA

    main
    Remix PWA uses Vitest as its primary testing framework instead of Jest. Vitest is built on top of Vite and esbuild, providing a fast, lightweight, and highly configurable testing environment. If you are contributing to or building on top of Remix PWA, you should use Vitest to align with the project's testing infrastructure and benefit from its performance (the entire test suite currently averages approximately 400ms).

  5. Understand the role of @remix-pwa/dev

    main

    The @remix-pwa/dev package is the core engine of the Remix PWA development experience. It provides the compiler, dev server, build system, and the CLI engine.

    Important: This package is an internal engine and is not intended to be used directly as a dependency within your Remix application code. It is designed to power the development and build workflows of the Remix PWA ecosystem.

  6. Understand the role of @remix-pwa/worker-runtime

    main

    The @remix-pwa/worker-runtime package provides a runtime for executing vanilla JavaScript service workers within a Remix Application. It functions as a bridge between the service worker and the client.

    Note: This package is not intended for direct use within your Remix application code; it is a specialized runtime component.

  7. Understanding the @remix-pwa/cache package

    main

    The @remix-pwa/cache package is a standalone, flexible, and extensible caching engine designed to cache any resource. It serves as the core caching powerhouse for remix-pwa and is designed to work alongside @remix-pwa/sw@^2.x.x to provide a robust offline experience.

    Unlike previous versions that were highly opinionated and difficult to override, @remix-pwa/cache is built to be heavily pluggable and integrates well with external tools like cachified and node-lru-cache. It is intended to solve limitations regarding document caching and general flexibility in how resources are stored and retrieved.

  8. Understand the caching architecture with @remix-pwa/cache and Cachified

    main

    The @remix-pwa/cache package provides caching capabilities for Remix by leveraging the Web Cache API and integrating cachified natively.

    Key architectural benefits include:

    • Unified Caching: The same caching solution can be used for both the client and the server, ensuring a consistent experience.
    • Extensibility: It supports built-in extensibility for Redis and in-memory caching. Developers can also implement custom solutions that work alongside the browser Cache API.
    • Worker Integration: The architecture is designed to work with the approach of bringing worker threads directly into Remix loaders and actions.
    • Flexibility: Because cachified is less opinionated, it allows for flexible implementation patterns compared to previous version-based strategy approaches.