Update remix-pwa

remix-pwa · Jul 12, 2022 · 406130d · 406130d
1 parent af20fe5
commit 406130d
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 43 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -24,11 +24,12 @@ export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: tailwind }];
 };
 
+let isMount = true;
+
 export default function App() {
   let location = useLocation();
   let matches = useMatches();
 
-  let isMount = true;
   React.useEffect(() => {
     let mounted = isMount;
     isMount = false;
@@ -136,7 +137,7 @@ export default function App() {
           sizes="16x16"
           href="/icons/favicon-16x16.png"
         />
-        <link rel="manifest" href="/resources/manifest.json" />
+        <link rel="manifest" href="/resources/manifest.webmanifest" />
         <Links />
       </head>
       <body className="m-0 p-0 h-screen">

diff --git a/app/routes/resources/manifest[.]json.ts → ...outes/resources/manifest[.]webmanifest.ts b/app/routes/resources/manifest[.]json.ts → ...outes/resources/manifest[.]webmanifest.ts
diff --git a/app/utils/client/pwa-utils.client.ts b/app/utils/client/pwa-utils.client.ts
@@ -1,6 +1,3 @@
-// This was generated from `remix-pwa`
-// https://github.com/ShafSpecs/remix-pwa
-
 /* 
   Project Fugu APIs 
   & 
@@ -16,7 +13,7 @@
  * and error-checking method.
  */
 
-interface ResponseObject {
+ interface ResponseObject {
   status: "success" | "bad";
   message: string;
 }
@@ -26,8 +23,8 @@ interface ResponseObject {
 /**
  * Copies text to the clipboard of the device.
  *
- * @typeParam {string} - The text to copy to the device
- * @return {ResponseObject} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ * @param {string} text - The text to copy to the device
+ * @return {Promise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
  */
 export async function copyText(text: string): Promise<ResponseObject> {
   try {
@@ -51,10 +48,14 @@ export async function copyText(text: string): Promise<ResponseObject> {
 
 // Handle connectivity check and return one of the specifics
 
-export async function checkConnectivity(
-  online: () => void,
-  offline: () => void
-): Promise<ResponseObject> {
+/**
+ * Check wether the device is currently online and execute some function with respect to the user's device connectivity state.
+ *
+ * @param {() => void} online - A function to be invoked if the device is online.
+ * @param {() => void} offline - A function to be invoked if the device is not connected to an internet network.
+ * @return {Promise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ */
+export async function checkConnectivity(online: () => void, offline: () => void): Promise<ResponseObject> {
   try {
     if (navigator.onLine) {
       online();
@@ -77,6 +78,11 @@ export async function checkConnectivity(
 
 // Keep device awake for a determined period of time
 
+/**
+ * Trigger the WakeLock API to keep the device's screen on.
+ *
+ * @return {Promise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ */
 export async function WakeLock(): Promise<ResponseObject> {
   try {
     if ("wakeLock" in navigator) {
@@ -109,6 +115,12 @@ export async function WakeLock(): Promise<ResponseObject> {
 
 // Badge creator
 
+/**
+ * Display a notification badge with a number count on the app's icon.
+ *
+ * @param {number} numberCount - The number of notifications that would be displayed on the App's Badge.
+ * @return {Promise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ */
 export async function addBadge(numberCount: number): Promise<ResponseObject> {
   try {
     //@ts-ignore
@@ -133,6 +145,11 @@ export async function addBadge(numberCount: number): Promise<ResponseObject> {
 
 // remove Badges
 
+/**
+ * Remove all notification badges from the App.
+ *
+ * @return {Promise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ */
 export async function removeBadge(): Promise<ResponseObject> {
   try {
     //@ts-ignore
@@ -157,6 +174,11 @@ export async function removeBadge(): Promise<ResponseObject> {
 
 // Enable Full-Screen mode for an app
 
+/**
+ * Trigger full-screen mode on an element/page.
+ *
+ * @return {Promise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ */
 export async function EnableFullScreenMode(): Promise<ResponseObject> {
   try {
     if (document.fullscreenEnabled) {
@@ -179,6 +201,11 @@ export async function EnableFullScreenMode(): Promise<ResponseObject> {
 
 // Exit fullscreen mode
 
+/**
+ * Exit full-screen mode on an element/page.
+ *
+ * @return {RPromise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ */
 export async function ExitFullScreenMode(): Promise<ResponseObject> {
   try {
     if (document.exitFullscreen) {
@@ -209,24 +236,24 @@ interface NotificationOptions {
   silent: boolean | false;
 }
 
-export async function SendNotification(
-  title: string,
-  options: NotificationOptions
-) {
+/**
+ * Trigger a notification client-side based on anything!
+ *
+ * @param {string} title - The main title (header) of the notification
+ * @param {NotificationOptions} options - An object consisting of the notification's body, badge, icon, image, and silent options. Refer to https://github.com/ShafSpecs/remix-pwa#client-notification-api for additional info.
+ * @return {Promise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ */
+export async function SendNotification(title: string, options: NotificationOptions): Promise<ResponseObject> {
   try {
     if ("Notification" in window) {
-      const permissions = await (
-        await navigator.permissions.query({ name: "notifications" })
-      ).state;
-      navigator.permissions
-        .query({ name: "notifications" })
-        .then((permissionStatus) => {
-          if (permissionStatus.state === "granted") {
-            return;
-          } else {
-            return Notification.requestPermission();
-          }
-        });
+      const permissions = await (await navigator.permissions.query({ name: "notifications" })).state;
+      navigator.permissions.query({ name: "notifications" }).then((permissionStatus) => {
+        if (permissionStatus.state === "granted") {
+          return;
+        } else {
+          return Notification.requestPermission();
+        }
+      });
 
       if (permissions === "granted") {
         await navigator.serviceWorker.ready.then((registration) => {
@@ -256,10 +283,14 @@ export async function SendNotification(
 
 // Page focus
 
-export async function Visibility(
-  isVisible: () => void,
-  notVisible: () => void
-): Promise<ResponseObject> {
+/**
+ * Check wether an element is currently visible or not.
+ *
+ * @param {() => void} isVisible - A function to be invoked if the element is currently visible on the page.
+ * @param {() => void} notVisible - A function to be invoked if the element is not visible on the current page.
+ * @return {Promise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ */
+export async function Visibility(isVisible: () => void, notVisible: () => void): Promise<ResponseObject> {
   try {
     if (document.visibilityState) {
       const visibleState = document.visibilityState;
@@ -291,6 +322,12 @@ export async function Visibility(
 
 // Copying Image to the clipboard
 
+/**
+ * Copy an image to a device's clipboard.
+ *
+ * @param {string} url - The url of the string to be copied.
+ * @return {Promise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ */
 export async function copyImage(url: string): Promise<ResponseObject> {
   try {
     if (navigator.clipboard) {
@@ -318,6 +355,12 @@ export async function copyImage(url: string): Promise<ResponseObject> {
 
 // Sharing information straight to other apps from PWA.
 
+/**
+ * Share info/links/random stuffs from your PWA to other apps.
+ *
+ * @param {any} data - The data to be shared.
+ * @return {Promise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ */
 export async function WebShare(data: any): Promise<ResponseObject> {
   try {
     if (navigator.share && navigator.canShare(data)) {
@@ -339,11 +382,15 @@ export async function WebShare(data: any): Promise<ResponseObject> {
 
 // Custom handler to share link to other apps from your app
 
-export async function WebShareLink(
-  url: string,
-  title: string,
-  text: string
-): Promise<ResponseObject> {
+/**
+ * Share a link to other apps from your app.
+ *
+ * @param {string} url - The URL of the link to be shared.
+ * @param {string} title - The title of the shared link embed.
+ * @param {string} text - An accompanying text alongside the header.
+ * @return {Promise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ */
+export async function WebShareLink(url: string, title: string, text: string): Promise<ResponseObject> {
   try {
     if (navigator.canShare({ url })) {
       await navigator.share({
@@ -368,11 +415,15 @@ export async function WebShareLink(
 
 // Special Web Share API for sharing files to your App.
 
-export async function WebShareFile(
-  title: string,
-  data: any[],
-  text: string
-): Promise<ResponseObject> {
+/**
+ * Share a file (or array of files) to other apps directly from your PWA.
+ *
+ * @param {string} title - The title of the shared link embed.
+ * @param {any} data - An array of the files to be shared (e.g Images, PDFs, etc).
+ * @param {string} text - An accompanying text alongside the header.
+ * @return {Promise<ResponseObject>} An object consisting of two properties: A status to indicate the status of the invocation and also an accompanying message.
+ */
+export async function WebShareFile(title: string, data: any[], text: string): Promise<ResponseObject> {
   let filesArray = [...data];
   try {
     if (navigator.canShare && navigator.canShare({ files: filesArray })) {
@@ -394,4 +445,4 @@ export async function WebShareFile(
   } catch (error) {
     throw new Error("Error occured sharing file!");
   }
-}
+}