@inglorious/create-app 1.12.0 → 1.13.0

package/README.md

@@ -99,7 +99,7 @@ For Android and iOS builds, install Android Studio with the Android SDK and a Ja
 
 Every Vite app is versioned with [Changesets](https://github.com/changesets/changesets): describe each change with `pnpm changeset`, and `pnpm release:version` raises the version in `package.json` and writes `CHANGELOG.md`. The app reads that version as `import.meta.env.VITE_APP_VERSION`.
 
-Mobile apps also get `pnpm mobile:release`, which copies the version into the iOS and Android projects, raises the build number they share (every store upload needs a new one), builds with the values in `.env` rather than `.env.local`, and syncs. The generated README describes the whole release, upload included. With `--push` too, an `app_versions` table in Supabase holds each platform's minimum build: an older install shows nothing but an update page, so raising it makes a release mandatory.
+Mobile apps also get `pnpm mobile:release`, which copies the version into the iOS and Android projects, raises the build number they share (every store upload needs a new one), builds with the values in `.env` rather than `.env.local`, and syncs. The generated README describes the whole release, upload included. With `--push` too, an `app_versions` table in Supabase holds each platform's minimum build: an older install shows nothing but an update page, so raising it makes a release mandatory. Mobile apps also open links to their domain in the app: with routing, `watchAppLinks` from `@inglorious/web/app-links` sends the router to the link's path, and `public/.well-known/apple-app-site-association` is generated for iOS. The generated README lists the steps left: your Team ID, the Associated Domains capability, and serving that file as JSON.
 
 ## License
 

package/bin/lib/app.js

@@ -69,6 +69,7 @@ export function addAppFeatures(targetDir, pkg, options) {
   app.isVue = app.renderer === "vue"
   app.hasPrompts = app.analytics || app.push
   app.nativeUpdate = app.mobile && app.push
+  app.appLinks = app.mobile && app.routing
   app.layout = layout(app)
 
   const components = COMPONENTS[app.renderer]
@@ -150,8 +151,10 @@ function addDependencies(pkg, app) {
       CAPACITOR_FIREBASE_VERSION
     pkg.dependencies["@supabase/supabase-js"] = SUPABASE_VERSION
   }
-  if (app.nativeUpdate) {
+  if (app.nativeUpdate || app.appLinks) {
     pkg.dependencies["@capacitor/app"] = CAPACITOR_APP_VERSION
+  }
+  if (app.nativeUpdate) {
     pkg.dependencies["@inglorious/supabase"] = "workspace:*"
   }
 }
@@ -210,9 +213,14 @@ function mainSource(app) {
   if (app.hasPrompts) {
     imports.push('import { renderPrompts } from "./common/prompt"')
   }
+  if (app.nativeUpdate || app.appLinks) {
+    imports.push('import { App as NativeApp } from "@capacitor/app"')
+  }
+  if (app.appLinks) {
+    imports.push('import { watchAppLinks } from "@inglorious/web/app-links"')
+  }
   if (app.nativeUpdate) {
     imports.push(
-      'import { App as NativeApp } from "@capacitor/app"',
       'import { when } from "@inglorious/web/directives/when"',
       'import { watchNativeUpdate } from "@inglorious/web/native-update"',
     )
@@ -245,6 +253,12 @@ supabase.auth.onAuthStateChange((_event, session) => {
 })`
     : ""
 
+  const appLinks = app.appLinks
+    ? `
+
+watchAppLinks(NativeApp, store)`
+    : ""
+
   const nativeUpdate = app.nativeUpdate
     ? `
 
@@ -262,7 +276,7 @@ function renderApp(api${app.isTypeScript ? ": AppApi" : ""}) {
 
   return `${importBlock(imports)}
 
-${body}${session}${nativeUpdate}
+${body}${session}${appLinks}${nativeUpdate}
 `
 }
 

package/bin/lib/mobile.js

@@ -2,7 +2,11 @@ import fs from "fs"
 import { EOL } from "os"
 import path from "path"
 
-import { CAPACITOR_VERSION, TYPESCRIPT_VERSION } from "./constants.js"
+import {
+  CAPACITOR_VERSION,
+  INDENTATION,
+  TYPESCRIPT_VERSION,
+} from "./constants.js"
 import { copyDir, toJavaIdentifier } from "./file.js"
 
 export function addMobileSupport(targetDir, pkg, projectName, templatesRoot) {
@@ -34,6 +38,7 @@ export function addMobileSupport(targetDir, pkg, projectName, templatesRoot) {
     path.join(targetDir, "capacitor.config.ts"),
     createCapacitorConfigSource(projectName),
   )
+  writeAppSiteAssociation(targetDir, projectName)
   includeInNodeProject(targetDir, "capacitor.config.ts")
 
   appendMobileSetupToReadme(targetDir)
@@ -107,6 +112,27 @@ pnpm mobile:android
 pnpm mobile:ios
 \`\`\`
 
+### Opening links in the app
+
+With Universal Links, a link to the app's domain opens the installed app instead of the browser, and the router goes to the link's path. The app's side is done; three steps are yours:
+
+1. Replace \`TEAM_ID\` in \`public/.well-known/apple-app-site-association\` with your Apple Developer Team ID, and keep the bundle ID in step with \`appId\` in \`capacitor.config.ts\`. Add paths that must stay in the browser as \`{ "/": "/path*", "exclude": true }\` before the last entry.
+2. In Xcode, select the app target, open **Signing & Capabilities**, add **Associated Domains**, and enter \`applinks:your-domain.com\`.
+3. Serve the file as JSON, without a redirect. On Vercel, add this to \`vercel.json\`:
+
+\`\`\`json
+{
+  "headers": [
+    {
+      "source": "/.well-known/apple-app-site-association",
+      "headers": [{ "key": "Content-Type", "value": "application/json" }]
+    }
+  ]
+}
+\`\`\`
+
+Test on a device by tapping a link in Notes or Messages; typing it in Safari does not count. Apple caches the file, so a change can take a few hours to arrive. Android App Links need \`/.well-known/assetlinks.json\` with your signing certificate's SHA-256 fingerprint and an intent filter in \`AndroidManifest.xml\`; see https://developer.android.com/training/app-links.
+
 ### Releasing
 
 The version users see comes from \`package.json\`, the same on the web, Android and iOS. The build number is shared by both native apps and must go up with every store upload.
@@ -123,7 +149,7 @@ The version users see comes from \`package.json\`, the same on the web, Android
 }
 
 export function createCapacitorConfigSource(projectName) {
-  const appId = `com.inglorious.${toJavaIdentifier(projectName)}`
+  const appId = appIdOf(projectName)
 
   return `import type { CapacitorConfig } from "@capacitor/cli"
 
@@ -137,6 +163,31 @@ export default config
 `
 }
 
+function appIdOf(projectName) {
+  return `com.inglorious.${toJavaIdentifier(projectName)}`
+}
+
+// Links carrying a session token, from sign-up and password-reset emails,
+// stay in the browser, where the sign-in flow expects them.
+function writeAppSiteAssociation(targetDir, projectName) {
+  const association = {
+    applinks: {
+      details: [
+        {
+          appIDs: [`TEAM_ID.${appIdOf(projectName)}`],
+          components: [{ "#": "*access_token*", exclude: true }, { "/": "*" }],
+        },
+      ],
+    },
+  }
+  const dir = path.join(targetDir, "public", ".well-known")
+  fs.mkdirSync(dir, { recursive: true })
+  fs.writeFileSync(
+    path.join(dir, "apple-app-site-association"),
+    JSON.stringify(association, null, INDENTATION) + EOL,
+  )
+}
+
 function includeInNodeProject(targetDir, file) {
   const tsconfigPath = path.join(targetDir, "tsconfig.node.json")
   if (!fs.existsSync(tsconfigPath)) return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/create-app",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "A scaffolding tool to quickly create a new app with Inglorious Web.",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",