fix manifest and service worker filestructure/config

README.md

@@ -0,0 +1,3 @@
+### App Deployments
+Android
+[![PWA Status](https://api.netlify.com/api/v1/badges/b8063611-c1d8-4945-b887-788c1294d644/deploy-status)](https://app.netlify.com/sites/jinnihealth/deploys)

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@apollo/client": "^3.8.6",
     "@arx-research/libhalo": "^1.2.17",
+    "@expo/metro-runtime": "~3.2.1",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/masked-view": "^0.1.11",
     "@rneui/base": "^4.0.0-rc.7",
@@ -50,6 +51,8 @@
     "lodash": "^4.17.21",
     "process": "^0.11.10",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-helmet-async": "^2.0.5",
     "react-native": "0.74.3",
     "react-native-calendars": "^1.1301.0",
     "react-native-crypto": "^2.2.0",
@@ -65,6 +68,7 @@
     "react-native-screens": "3.31.1",
     "react-native-stream": "^0.1.9",
     "react-native-svg": "15.2.0",
+    "react-native-web": "~0.19.10",
     "readable-stream": "^1.0.33",
     "stream-browserify": "^1.0.0",
     "util": "^0.10.4",
@@ -79,10 +83,7 @@
     "workbox-range-requests": "^6.6.0",
     "workbox-routing": "^6.6.0",
     "workbox-strategies": "^6.6.0",
-    "workbox-streams": "^6.6.0",
-    "react-native-web": "~0.19.10",
-    "react-dom": "18.2.0",
-    "@expo/metro-runtime": "~3.2.1"
+    "workbox-streams": "^6.6.0"
   },
   "peerDependencies": {
     "ethers": "5.7.0"

public/manifest.json

@@ -1,14 +1,15 @@
 {
-    "short_name": "Jinni Health",
+    "short_name": "Jinni",
     "name": "Jinni Health",
+    "description": "A self-actualiation game based on tamagotchis",
     "icons": [
       {
-        "src": "public/favicon.png",
-        "sizes": "192x192",
+        "src": "favicon.png",
+        "sizes": "48x48",
         "type": "image/png"
       },
       {
-        "src": "public/icon.png",
+        "src": "icon.png",
         "sizes": "512x512",
         "type": "image/png"
       }

src/app/_layout.tsx

@@ -1,9 +1,7 @@
 // add React Native NodeJS polyfills
 import 'utils/polyfills';
 
-/**
- * Normal RN imports
- */
+import { Platform } from 'react-native';
 import React, { useEffect, useState } from 'react';
 import { Tabs } from 'expo-router';
 import * as Sentry from '@sentry/react-native';
@@ -49,7 +47,7 @@ const HomeLayout = () => {
     );
 };
 
-if (window) {
+if (Platform.OS === 'web') {
     // If you want your app to work offline and load faster, you can change
     // unregister() to register() below. Note this comes with some pitfalls.
     // Learn more about service workers: https://cra.link/PWA

src/contexts/ExternalServicesContext.tsx

@@ -2,6 +2,7 @@ import React, { createContext, useState, useMemo } from 'react';
 import { getAppConfig } from 'utils/config';
 
 import { ApolloProvider } from '@apollo/client';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { getGqlClient } from 'utils/api';
 import { SentryClient, SegmentClient, getSegment, getSentry } from 'utils/logging';
 
@@ -41,7 +42,12 @@ export const ExternalServicesProvider: React.FC<Props> = ({ children }) => {
 
     return (
         <ExternalServicesContext.Provider value={{ sentry, segment }}>
-            <ApolloProvider client={getGqlClient()}>{children}</ApolloProvider>
+            <HelmetProvider>
+                <Helmet>
+                    <link rel="manifest" href="manifest.json"></link>
+                </Helmet>
+                <ApolloProvider client={getGqlClient()}>{children}</ApolloProvider>
+            </HelmetProvider>
         </ExternalServicesContext.Provider>
     );
 };

src/utils/serviceWorkerRegistration.js

@@ -20,7 +20,10 @@ const isLocalhost = Boolean(
 );
 
 export function register(config) {
-    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    if (
+        // process.env.NODE_ENV === 'production' &&
+        'serviceWorker' in navigator
+    ) {
         // The URL constructor is available in all browsers that support SW.
         const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
         if (publicUrl.origin !== window.location.origin) {
@@ -30,8 +33,10 @@ export function register(config) {
             return;
         }
 
+        const url = process.env.PUBLIC_URL || `http://${window.location.host}`;
         window.addEventListener('load', () => {
-            const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+            const swUrl = `${url}/service-worker.js`;
+            console.log('service worker url', url, swUrl);
 
             if (isLocalhost) {
                 // This is running on localhost. Let's check if a service worker still exists or not.
@@ -109,13 +114,15 @@ function checkValidServiceWorker(swUrl, config) {
                 response.status === 404 ||
                 (contentType != null && contentType.indexOf('javascript') === -1)
             ) {
+                console.log('NO SERVICE WORKER');
                 // No service worker found. Probably a different app. Reload the page.
                 navigator.serviceWorker.ready.then((registration) => {
                     registration.unregister().then(() => {
                         window.location.reload();
                     });
                 });
             } else {
+                console.log('SERVICE WORKER REGISTERED');
                 // Service worker found. Proceed as normal.
                 registerValidSW(swUrl, config);
             }