Moving @remix-pwa/client patch upstream

packages/client/CHANGELOG.md

@@ -1,3 +1,10 @@
+## @remix-pwa/client 3.0.5-dev.1 (2024-05-29)
+
+
+### Bug Fixes
+
+* **client:** added callback feature to installation prompt b17500a
+
 ## @remix-pwa/client 3.0.4 (2024-04-24)
 
 

packages/client/hooks/usePWAManager.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 import { useEffect, useState } from 'react';
 
 import { isWindowAvailable } from '../lib/user-agent.js';
@@ -7,7 +8,46 @@ type UpdateAvailable = {
   newWorker: ServiceWorker | null;
 };
 
-export const usePWAManager = () => {
+export type PWAManager = {
+  /**
+   * Whether an update is available or not.
+   */
+  updateAvailable: boolean;
+  swUpdate: UpdateAvailable;
+  /**
+   * An asynchronous function that prompts the user to install the PWA.
+   *
+   * Takes in an optional callback that runs if the user accepts the install prompt.
+   *
+   * ## Example
+   *
+   * ```tsx
+   * const { promptInstall } = usePWAManager();
+   *
+   * return (
+   *  <>
+   *    <button onClick={promptInstall}>Install PWA</button>
+   *    <button onClick={async() => await promptInstall(doSmthg)}>Install PWA with callback</button>
+   *  </>
+   * );
+   * ```
+   */
+  promptInstall: (cb?: () => void) => void;
+  /**
+   * Retrieves the current service worker registration.
+   *
+   * Returns `null` if service worker is not supported/registered.
+   */
+  swRegistration: ServiceWorkerRegistration | null;
+  /**
+   * The user's choice on whether to install the PWA or not.
+   *
+   * Defaults to `null`.
+   */
+  userInstallChoice: 'accepted' | 'dismissed' | null;
+};
+
+export const usePWAManager = (): PWAManager => {
   const [updateAvailable, setUpdateAvailable] = useState<boolean>(false);
   const [swUpdate, setSwUpdate] = useState<UpdateAvailable>({
     isUpdateAvailable: false,
@@ -17,9 +57,19 @@ export const usePWAManager = () => {
   const [registration, setRegistration] = useState<ServiceWorkerRegistration | null>(null);
   const [userChoice, setUserChoice] = useState<'accepted' | 'dismissed' | null>(null);
 
-  const promptInstall = () => {
+  const promptInstall = async (cb: () => void = () => {}) => {
     if (installPromptEvent) {
       (installPromptEvent as any).prompt();
+
+      const { outcome: choice } = await (installPromptEvent as any).userChoice;
+
+      if (choice === 'accepted') {
+        cb();
+        setUserChoice('accepted');
+      } else {
+        setUserChoice(choice);
+      }
+
       setInstallPromptEvent(null);
     }
   };

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-pwa/client",
-  "version": "3.0.4",
+  "version": "3.0.5-dev.1",
   "description": "A set of utilities for client-side development to enhance the native feel of your Remix App",
   "repository": {
     "type": "git",

playground/package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@remix-pwa/client": "3.0.4",
-    "@remix-pwa/push": "2.10.1",
+    "@remix-pwa/push": "2.10.2",
     "@remix-pwa/sw": "3.0.7",
     "@remix-pwa/sync": "3.0.2",
     "@remix-pwa/worker-runtime": "2.1.2",

playground/src/app/routes/_index.tsx

@@ -29,9 +29,10 @@ export default function Index() {
         <h1 className="text-2xl font-bold">Remix PWA - Worker Actions & Loaders</h1>
         <button
           type="submit"
-          onClick={() => {
+          onClick={async () => {
             // alert("You're logged in!\n\nActually nothing happened 😅. Yet.");
-            promptInstall();
+            const doSMthg = () => console.log('Hehehe')
+            await promptInstall(doSMthg);
           }}
           className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500"
         >

playground/src/app/routes/sync-away.tsx

@@ -1,5 +1,5 @@
 import type { WorkerActionArgs } from "@remix-pwa/sw";
-import { queueToServer } from "@remix-pwa/sync";
+import {  } from "@remix-pwa/sync";
 import { redirect } from "@remix-run/node";
 import type { ActionFunction } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
@@ -28,10 +28,10 @@ export const workerAction = async ({ context }: WorkerActionArgs) => {
     await fetchFromServer() as unknown as Response;
   } catch (error) {
     console.error(error);
-    queueToServer({
-      name: 'offline-action',
-      request: event.request.clone(),
-    })
+    // queueToServer({
+    //   name: 'offline-action',
+    //   request: event.request.clone(),
+    // })
   }
 
   return new Response(JSON.stringify({