Skip to content

Commit

Permalink
Expo SDK 43 upgrade
Browse files Browse the repository at this point in the history
  • Loading branch information
adri committed Jan 19, 2023
1 parent bca5ca1 commit a064994
Show file tree
Hide file tree
Showing 11 changed files with 3,189 additions and 2,288 deletions.
8 changes: 7 additions & 1 deletion frontend/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,12 @@ import { Socket as PhoenixSocket } from "phoenix";
import { onError } from "apollo-link-error";
import { ApolloLink } from "apollo-link";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { useColorScheme } from "react-native-appearance";
import { useColorScheme } from "react-native";
import * as Updates from "expo-updates";
import BottomTabNavigator from "./navigation/BottomTabNavigator";
import linking from "./navigation/useLinking";
import Sentry from "./Sentry";
import * as serviceWorkerRegistration from "./src/serviceWorkerRegistration";

const onErrorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
Expand Down Expand Up @@ -103,3 +104,8 @@ export default function App(props) {
);
}
}

// 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
serviceWorkerRegistration.register();
2 changes: 1 addition & 1 deletion frontend/components/Section/FixedFooter.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from "react";
import { Text } from "react-native";
import Colors from "../../constants/Colors";
import { useColorScheme } from "react-native-appearance";
import { useColorScheme } from "react-native";
import { BlurView } from "expo-blur";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Layout from "../../constants/Layout";
Expand Down
2 changes: 1 addition & 1 deletion frontend/constants/Colors.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Appearance } from "react-native-appearance";
import { Appearance } from "react-native";

const colorScheme = Appearance.getColorScheme();
const tintColor = "#48BB78";
Expand Down
2 changes: 1 addition & 1 deletion frontend/navigation/BottomTabNavigator.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import PlanScreen from "../screens/PlanScreen";
import ListScreen from "../screens/ListScreen";
import SearchScreen from "../screens/SearchScreen";
import BasicsScreen from "../screens/BasicsScreen";
import { useColorScheme } from "react-native-appearance";
import { useColorScheme } from "react-native";
import { ListCountBadge } from "../components/Badge/ListCountBadge";
import RecipeDetailScreen from "../screens/RecipeDetailScreen";
import WeekPlannerScreen from "../screens/WeekPlannerScreen";
Expand Down
46 changes: 23 additions & 23 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,38 +26,38 @@
"apollo-cache-inmemory": "1.6.5",
"apollo-client": "2.6.8",
"apollo-link-error": "1.1.13",
"expo": "^42.0.0",
"expo-asset": "~8.3.3",
"expo-blur": "~9.0.3",
"expo-constants": "~11.0.1",
"expo-font": "~9.2.1",
"expo-linear-gradient": "~9.2.0",
"expo-linking": "~2.3.1",
"expo-splash-screen": "~0.11.2",
"expo-updates": "~0.8.2",
"expo-web-browser": "~9.2.0",
"expo": "^43.0.0",
"expo-asset": "~8.4.3",
"expo-blur": "~10.0.3",
"expo-constants": "~12.1.3",
"expo-font": "~10.0.3",
"expo-linear-gradient": "~10.0.3",
"expo-linking": "~2.4.2",
"expo-splash-screen": "~0.13.5",
"expo-updates": "~0.10.15",
"expo-web-browser": "~10.0.3",
"graphql": "15.0.0",
"graphql-tag": "2.10.3",
"phoenix": "1.4.16",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-appearance": "~0.3.3",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "~1.10.2",
"react-native-hyperlink": "0.0.19",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-skeleton-content": "1.0.13",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.8.0",
"react-native-skeleton-content": "1.0.28",
"react-native-svg": "12.1.1",
"react-native-typography": "1.4.1",
"react-native-web": "~0.13.12",
"sentry-expo": "^4.0.0"
"react-native-web": "0.17.1",
"sentry-expo": "^4.0.0",
"workbox-webpack-plugin": "^6.5.4"
},
"devDependencies": {
"@babel/core": "~7.9.0",
"@expo/webpack-config": "~0.12.63",
"babel-preset-expo": "8.3.0",
"jest-expo": "^42.0.1"
"@babel/core": "^7.12.9",
"@expo/webpack-config": "^0.17.4",
"babel-preset-expo": "8.5.1",
"jest-expo": "~43.0.1"
},
"private": true
}
2 changes: 1 addition & 1 deletion frontend/screens/ShopScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { useSafeArea } from "react-native-safe-area-context";
import { BuyIngredient } from "../components/Ingredient/BuyIngredient";
import { Badge } from "../components/Badge/Badge";
import { BlurView } from "expo-blur";
import { useColorScheme } from "react-native-appearance";
import { useColorScheme } from "react-native";
import Svg, { Path } from "react-native-svg";

const GET_SHOPPING_LIST = gql`
Expand Down
2 changes: 1 addition & 1 deletion frontend/screens/WeekPlannerScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
} from "../components/Icon";
import { GET_RECIPES } from "../operations/getRecipes";
import { BlurView } from "expo-blur";
import { useColorScheme } from "react-native-appearance";
import { useColorScheme } from "react-native";
import Layout from "../constants/Layout";
import { PLAN_RECIPE, optimisticResponse } from "../operations/planRecipe";

Expand Down
73 changes: 73 additions & 0 deletions frontend/src/service-worker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/* eslint-disable no-restricted-globals */

// This service worker can be customized!
// See https://developers.google.com/web/tools/workbox/modules
// for the list of available Workbox modules, or add any other
// code you'd like.
// You can also remove this file if you'd prefer not to use a
// service worker, and the Workbox build step will be skipped.

import { clientsClaim } from "workbox-core";
import { ExpirationPlugin } from "workbox-expiration";
import { precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching";
import { registerRoute } from "workbox-routing";
import { StaleWhileRevalidate } from "workbox-strategies";

clientsClaim();

// Precache all of the assets generated by your build process.
// Their URLs are injected into the manifest variable below.
// This variable must be present somewhere in your service worker file,
// even if you decide not to use precaching. See https://cra.link/PWA
precacheAndRoute(self.__WB_MANIFEST);

// Set up App Shell-style routing, so that all navigation requests
// are fulfilled with your index.html shell. Learn more at
// https://developers.google.com/web/fundamentals/architecture/app-shell
const fileExtensionRegexp = new RegExp("/[^/?]+\\.[^/]+$");
registerRoute(
// Return false to exempt requests from being fulfilled by index.html.
({ request, url }) => {
// If this isn't a navigation, skip.
if (request.mode !== "navigate") {
return false;
} // If this is a URL that starts with /_, skip.

if (url.pathname.startsWith("/_")) {
return false;
} // If this looks like a URL for a resource, because it contains // a file extension, skip.

if (url.pathname.match(fileExtensionRegexp)) {
return false;
} // Return true to signal that we want to use the handler.

return true;
},
createHandlerBoundToURL(process.env.PUBLIC_URL + "/index.html")
);

// An example runtime caching route for requests that aren't handled by the
// precache, in this case same-origin .png requests like those from in public/
registerRoute(
// Add in any other file extensions or routing criteria as needed.
({ url }) =>
url.origin === self.location.origin && url.pathname.endsWith(".png"), // Customize this strategy as needed, e.g., by changing to CacheFirst.
new StaleWhileRevalidate({
cacheName: "images",
plugins: [
// Ensure that once this runtime cache reaches a maximum size the
// least-recently used images are removed.
new ExpirationPlugin({ maxEntries: 50 }),
],
})
);

// This allows the web app to trigger skipWaiting via
// registration.waiting.postMessage({type: 'SKIP_WAITING'})
self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});

// Any other custom service worker logic can go here.
142 changes: 142 additions & 0 deletions frontend/src/serviceWorkerRegistration.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
// This optional code is used to register a service worker.
// register() is not called by default.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.

// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://cra.link/PWA

const isLocalhost = Boolean(
window.location.hostname === "localhost" ||
// [::1] is the IPv6 localhost address.
window.location.hostname === "[::1]" ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);

export function register(config) {
const isEnvProduction = process.env.NODE_ENV === "production";
if (isEnvProduction && "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) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}

window.addEventListener("load", () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);

// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
"This web app is being served cache-first by a service " +
"worker. To learn more, visit https://cra.link/PWA"
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}

function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then((registration) => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === "installed") {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
"New content is available and will be used when all " +
"tabs for this page are closed. See https://cra.link/PWA."
);

// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log("Content is cached for offline use.");

// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch((error) => {
console.error("Error during service worker registration:", error);
});
}

function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: { "Service-Worker": "script" },
})
.then((response) => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get("content-type");
if (
response.status === 404 ||
(contentType != null && contentType.indexOf("javascript") === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
"No internet connection found. App is running in offline mode."
);
});
}

export function unregister() {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.ready
.then((registration) => {
registration.unregister();
})
.catch((error) => {
console.error(error.message);
});
}
}
42 changes: 32 additions & 10 deletions frontend/webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,36 @@
const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const path = require("path");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");

module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(
{
...env,
// Passing true will enable the default Workbox + Expo SW configuration.
offline: true,
},
argv
);
// Customize the config before returning it.
// Set by expo-cli during `expo build:web`
const isEnvProduction = env.mode === "production";

// Create the default config
const config = await createExpoWebpackConfigAsync(env, argv);

if (isEnvProduction) {
config.plugins.push(
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the webpack build.
new WorkboxWebpackPlugin.InjectManifest({
swSrc: path.resolve(__dirname, "src/service-worker.js"),
dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
exclude: [
/\.map$/,
/asset-manifest\.json$/,
/LICENSE/,
/\.js\.gz$/,
// Exclude all apple touch and chrome images because they're cached locally after the PWA is added.
/(apple-touch-startup-image|chrome-icon|apple-touch-icon).*\.png$/,
],
// Bump up the default maximum size (2mb) that's precached,
// to make lazy-loading failure scenarios less likely.
// See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
})
);
}

return config;
};
};
Loading

0 comments on commit a064994

Please sign in to comment.