Using Firebase Dynamic Links in a Managed Workflow Expo app directs to the correct deep link in the app on Android, but on iOS only opens the app in either whatever page was last open or the homepage.
app.config.js
ios: {
associatedDomains: [
'applinks:*.myapp.web.app',
'applinks:myapp.web.app',
'applinks:*.myapp.page.link',
'applinks:myapp.page.link',
],
},
AppNavigation.js
const linking = {
prefixes: [
prefix,
'https://myapp.web.app',
'https://*.myapp.web.app',
],
The apple-app-site-association file stored on myapp.web.app
{
"applinks": {
"apps": [],
"details": [
{
"appID": "1234567890.com.my.app",
"paths": [ "*" ]
}
]
}
}
The Dynamic Link is generated using REST API with the following payload:
const payload = {
dynamicLinkInfo: {
domainUriPrefix: 'https://myapp.page.link',
link: `https://myapp.web.app/${deepLink}`,
androidInfo: {
androidPackageName: com.my.app,
},
iosInfo: {
iosBundleId: com.my.app,
iosAppStoreId: 1234567890,
},
The generated Dynamic Link opens the app and directs to the ${deepLink} on Android as expected, but not on iOS. This was tested in an app built with EAS built.
Ended up solving this myself. Dynamic Links get resolved (converted from short link to full link) automatically on Android, but on iOS this has to be done manually with dynamicLinks().resolveLink(url);
After resolving, the link gets picked up by React Native Navigation and works like a normal deep link.
Full code for Dynamic Links:
const linking = {
prefixes: [
'https://myapp.page.link',
'https://myapp.web.app',
],
async getInitialURL() {
// If the app was opened with a Firebase Dynamic Link
const dynamicLink = await dynamicLinks().getInitialLink();
if (dynamicLink) {
const { url } = dynamicLink;
const resolvedLink = await dynamicLinks().resolveLink(url);
return resolvedLink.url;
}
// If the app was opened with any other link (sometimes the Dynamic Link also ends up here, so it needs to be resolved
const initialUrl = await Linking.getInitialURL();
if (initialUrl) {
const resolvedLink = await dynamicLinks().resolveLink(initialUrl);
return (resolvedLink) ? resolvedLink.url : initialUrl;
}
},
subscribe(listener) {
const handleDynamicLink = (dynamicLink) => {
listener(dynamicLink.url);
};
// Listen to incoming links from deep linking
const unsubscribeToDynamicLinks = dynamicLinks().onLink(handleDynamicLink);
return () => {
// Clean up the event listeners
unsubscribeToDynamicLinks();
};
},
};
In my case I also had to install all 3 of the following libraries:
"#react-native-firebase/analytics": "16.4.3",
"#react-native-firebase/app": "16.4.3",
"#react-native-firebase/dynamic-links": "16.4.3",
Related
I'm building a toy app with Next.js 13 (with the new app/ directory). My app works fine locally, but generates a 500 Internal Server Error when deployed to Netlify.
Here's the route that generates the error
app/team/[id]/page.jsx
import Link from "next/link";
async function getEmployee() {
const res = await fetch(
'https://dynamic-routes--dundermifflininc.netlify.app/.netlify/functions/team?id=1',
{ cache: 'no-store' }
);
return await res.json();
}
export default async function Employee() {
const employee = await getEmployee();
return (
<div>
<h1>{ employee.name }</h1>
<h3>{ employee.title }</h3>
</div>
);
}
I am confident that the error is happening with fetch(), because if I replace fetch() with hard-coded data, the app works properly. Additionally, the logs for my netlify function indicate that the endpoint isn't even being hit by the fetch() call.
The Netlify function is defined like this
netlify/functions/team.js
exports.handler = async function (event, context) {
const employees = [
{ id: 1, name: "Michael Scott", title: "Regional manager" },
{ id: 2, name: "Jim Halpert", title: "Salesman" },
{ id: 3, name: "Pam Beesly", title: "Receptionist" },
{ id: 4, name: "Dwight Schrute", title: "Assistant to the regional manager" },
];
var data;
if (event.queryStringParameters.hasOwnProperty("id")) {
const id = parseInt(event.queryStringParameters.id);
data = employees[id - 1];
} else {
data = employees;
}
return {
statusCode: 200,
body: JSON.stringify(data),
headers: {
'access-control-allow-origin': '*',
'content-type': 'application/json'
},
};
};
You can test the endpoint for yourself here.
I couldn't reproduce this on a demo site, but checking the logs for your example it's giving the error: "Error: Page changed from static to dynamic at runtime /team/1, see more here https://nextjs.org/docs/messages/app-static-to-dynamic-error
I'm not sure why it's trying to statically render it when you have no-store set, but you might want to try following the instruction in the linked doc, and exporting export const dynamic = 'force-dynamic' in the page.
A good way to track this down is to run netlify serve locally, using the latest version of the Netlify CLI. This is a new option that runs the site in a production-like environment
So I'm trying to do two things at the same time and it's not going too well.
I have a NextJS app and a Rails API server this app connects to. For authentication I'm using a JWT token stored in an http-only encrypted cookie that the Rails API sets and the front end should not be touching. Naturally that creates a necessity for the frontend to send all the api requests though the NextJs server which proxies them to the real API.
To do that I have set up a next-http-proxy-middleware in my /pages/api/[...path] in the following way:
export const config = { api: { bodyParser: false, externalResolver: true } }
export default function handler(
req: NextApiRequest,
res: NextApiResponse
) {
httpProxyMiddleware(req, res, {
target: process.env.BACKEND_URL,
pathRewrite: [{ patternStr: "^/?api", replaceStr: "" }],
})
}
Which works great and life would be just great, but turns out I need to do the same thing with ActionCable subscriptions. Not to worry, found some handy tutorials, packed #rails/actioncable into my package list and off we go.
import {useCurrentUser} from "../../../data";
import {useEffect, useState} from "react";
const UserSocket = () => {
const { user } = useCurrentUser()
const [roomSocket, setRoomSocket] = useState<any>(null)
const loadConsumer = async () => {
// #ts-ignore
const { createConsumer } = await import("#rails/actioncable")
const newCable = createConsumer('/api/wsp')
console.log('Cable loaded')
setRoomSocket(newCable.subscriptions.create({
channel: 'RoomsChannel'
},{
connected: () => { console.log('Room Connected') },
received: (data: any) => { console.log(data) },
}))
return newCable
}
useEffect(() => {
if (typeof window !== 'undefined' && user?.id) {
console.log('Cable loading')
loadConsumer().then(() => {
console.log('Cable connected')
})
}
return () => { roomSocket?.disconnect() }
}, [typeof window, user?.id])
return <></>
}
export default UserSocket
Now when I go to load the page with that component, I get the log output all the way to Cable connected however I don't see the Room Connected part.
I tried looking at the requests made and for some reason I see 2 requests made to wsp. First is directed at the Rails backend (which means the proxy worked) but it lacks the Cookie headers and thus gets disconnected like this:
{
"type": "disconnect",
"reason": "unauthorized",
"reconnect": false
}
The second request is just shown as ws://localhost:5000/api/wsp (which is my NextJS dev server) with provisional headers and it just hangs up in pending. So neither actually connect properly to the websocket. But if I just replace the /api/wsp parameter with the actual hardcoded API address (ws://localhost:3000/wsp) it all works at once (that however would not work in production since those will be different domains).
Can anyone help me here? I might be missing something dead obvious but can't figure it out.
This question already has answers here:
Why is my React component is rendering twice?
(8 answers)
Closed 8 months ago.
I am building an explore page with url query parameters (NextJs page with getServerSideProps)
If an external user goes onto this url domain.com/explore?type=actions&category=food it will fetch on the DB the data for "actions" and "food"
If an internal user uses on-page filters, it generates a new url domain.com/explore?type=actions&category=food&orderBy=points and I then fetch the data and render.
To do so, I am basically setting up a useEffect with the [router.asPath] dependency. The problem is that it renders twice on load for external users (due to gerServerSideProps ?) and therefore fetching the data twice :(
Any hints ? Thanks !
useEffect(() => {
// parsing the url
const url = location.search
const urlQuery = url.slice(1)
const result = {}
urlQuery.split("&").forEach(part => {
const item = part.split("=");
result[item[0]] = decodeURIComponent(item[1]);
});
console.log(result)
// Updating forms/filters states and setting up query parameters
queryParams = [] // reseting the params
setFiltersData(prevFiltersData => {
return {
...prevFiltersData,
thumbType: result.type,
}
})
if (result.field) {
setFiltersData(prevFiltersData => {
return {
...prevFiltersData,
categoryField: result.field,
categoryOperator: result.fieldOp,
categoryValue: result.fieldVal,
}
})
queryParams.push(where(result.field, result.fieldOp, decodeURIComponent(result.fieldVal)))
}
if (result.orderBy) {
setFiltersData(prevFiltersData => {
return {
...prevFiltersData,
orderFieldActions: result.orderBy,
orderOperatorActions: result.orderType,
}
})
queryParams.push(orderBy(result.orderBy, result.orderType))
}
setSearchParams(queryParams) // saving query params to state for subsequent data fetch
getFilteredData(result.type) // Fetching data from the DB
setInitialLoading(false)
}, [router.asPath])
Finally found a solution with this thread. https://github.com/vercel/next.js/issues/35822
The problem is due to React being used in "Strict mode" in the next.config.js.
https://reactjs.org/docs/strict-mode.html
Solution :
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
experimental: {
scrollRestoration: true,
},
images: {
domains: ['lh3.googleusercontent.com', 'graph.facebook.com', 'firebasestorage.googleapis.com'],
},
}
module.exports = nextConfig
Switching the strictMode to false
i'm unable to open a link using window.open whithin a http request.
Here is how i tried:
const config = {
headers: {token: this.apiKey, authtoken: token},
};
const url = `https://api.eatsmartapp.de/delivery/users/receipt?id=${this.orderId}`;
// #ts-ignore
this.http.get<any>(url, config).subscribe(dataset => {
window.open('link', '_blank');
}, error => {
});
If i try to open the link outside the subscription area its working fine but if i try to open it in my subscription, nothing is happening on my mobile device
Try using window as a service. In your module.ts file
providers: [
{ provide: Window, useValue: window }
]
Then in your component.ts, or wherever
constructor(private window: Window) {
// ...
}
in which case your window.open would be like
this.http.get<any>(url, config).subscribe(dataset => {
this.window.open(dataset.url, '_blank');
}
Requirement: I am trying to use service worker and cache static files so as to have a benefit to reduce HTTP requests and make the site performance better.
Down the lane I would switch to offline, caching images, api's etc.
I have seen the plugins:
https://github.com/hanford/next-offline and
https://www.npmjs.com/package/next-pwa
It seems to work. Although I was trying to find out if there were examples of (nextjs + workbox).
Next js do have an example for https://github.com/vercel/next.js/tree/canary/examples/with-next-offline. But I would like just using workbox for this.
Anyone got any working examples? Even a basic one would do.
Currently am not using a custom server. Just using the inbuilt builder of nextjs (https://nextjs.org/docs/getting-started#manual-setup)
I figured out an answer on my own:
Reference: https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW
I have done runtime caching for my app here and added the workbox file into the base file:
// Use the window load event to keep the page load performant
useEffect(() => {
window.addEventListener("load", () => {
const serviceWorkerScope = `/${country}/workbox-worker.js`
navigator.serviceWorker
.register(serviceWorkerScope)
.then(() => {
logger.info(`Service worker registered at ${serviceWorkerScope}`)
})
.catch(error => {
logger.error("Error in serviceWorker registration: ", error)
})
})
})
I have added comments,
// File to generate the service worker.
require("dotenv").config()
const workboxBuild = require("workbox-build")
const { COUNTRY: country, NODE_ENV } = process.env
const urlPattern = new RegExp(`/${country}\/static|_next\/.*/`)
// https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW
const buildSW = () => {
return workboxBuild.generateSW({
swDest: "public/workbox-worker.js",
clientsClaim: true,
mode: NODE_ENV,
skipWaiting: true,
sourcemap: false,
runtimeCaching: [
{
urlPattern: urlPattern,
// Apply a cache-first strategy.
handler: "CacheFirst",
options: {
cacheName: "Static files caching",
expiration: {
maxEntries: 50,
maxAgeSeconds: 15 * 60, // 15minutes
},
},
},
],
})
}
buildSW()