Hosting Your Own OTA Update Service

Host your own
Over-the-air update service

Roadmap
Buggy Valley App
Gloriﬁed cURLing App
Designing an OTA Service
Hosting Your Own Service
OTA Assets
Announcements

Standing on the shoulders
of giants

Buggy Valley
$
p = 0.5
$$
Nothingp = 0.5

Android Java Implementation
String redScreenPath = “file:///red-screen.js”;
String pillarValleyPath = “file:///pillar-valley.js”;

int randNum = getRandom();
if (isEven(randNum)){
loadApp(redScreenPath);
} else {
loadApp(pillarValleyPath);
}

} else {
loadApp(pillarValleyPath);**
}
** how does loadApp work?

Quick Recap
} else {
loadApp(pillarValleyPath);**
}
** how does loadApp work?

Buggy Valley fits in perfectly with my use case.
Your MVP was just what I needed!

Original Buggy Valley
} else {
loadApp(pillarValleyPath);
}

Modiﬁed Buggy Valley
String aliceAppPath = “file:///alice-app.js”;
} else {
loadApp(aliceAppPath);
}

String newAliceAppPath
loadApp(newAliceAppPath);
} else {
}

String newAliceAppPath = cURLToDisk(“https://expo.io/@alice/app”);
} else {
}

Gloriﬁed cURL
String newAliceAppPath = cURLToDisk(“https://expo.io/@alice/app”);
if (newAliceAppPath != null){
} else {
}

Wait but how does this benefit me?

JS Bundle
Native Modules
Currently on disk:

JS Bundle
Native Modules
Currently on disk:
Traditional update
New JS Bundle
New Native Modules

JS Bundle
Native Modules
Currently on disk:
Traditional update
New JS Bundle
New Native Modules
Avg binary size ~30Mb

JS Bundle
Native Modules
Currently on disk:
Gloriﬁed cURL update
New JS Bundle
Native Modules

Glorified cURL fits in perfectly with my use case.
Your MVP was just what I needed!

It’s not very performant tho...

Gloriﬁed cURL
String newBobAppPath = cURLToDisk(“https://expo.io/@bob/app”);
String bobAppPath = “file:///bob-app.js”;
if (newBobAppPath != null){
loadApp(newBobAppPath);
} else {
loadApp(bobAppPath);
}

Gloriﬁed cURL
String newBobAppPath = cURLToDisk(“https://expo.io/@bob/app”);
String bobAppPath = “file:///bob-app.js”;
if (newBobAppPath != null){
loadApp(newBobAppPath);
} else {
loadApp(bobAppPath);
}
JS Bundle
We don’t want to load the JS bundle unnecessarily.
We only want to load the JS bundle if there’s a new change available.

Let’s take a step back
And think about how the web
works for a sec

The Web
<script src=“bundle.js” />
Big JS bundle
bundle.js
index.html

Taking a page out of the web book
{bundleUrl: ‘bundle.js’}
Big JS bundle
bundle.js
index.json

{bundleUrl: ‘ios-1a2b3c.js’}
Big JS bundle
ios-1a2b3c.js
index.json
Bundle name is based oﬀ its md5 hash

{bundleUrl: ‘ios-7a8b9c’}
Big JS bundle
ios-7a8b9c.js
index.json
Cache the bundleUrl
Only download bundleUrl
if we don’t have it cached

How do I use an OTA service in my app?
^ these are my app ﬁles
^ this is what my app looks like

dev tools GUI
^ push this button to upload app to expo server

Or use the cli if you prefer
> expo publish
Run this command in your project directory to upload to expo servers

How often is the server polled for updates?
The default behavior is to poll the server when the app starts up

What if I don’t like the default behavior?
You can use the Updates module to customize when you’d to update your app
^ from the docs page

I’m in a country where network latency
to your CDNs are really high

How about hosting your own app then?

How about hosting your own app then?*
* in our upcoming SDK release

How do I host my own app?
^ these are my app ﬁles
^ this is what my app looks like

> expo export
Run this command in your project directory
to dump your app to disk

This is what gets dumped to disk
.
├── android-index.json
├── ios-index.json
├── assets
│ └── 1ecc2
└── bundles
├── android-01ee6.js
└── ios-ee820.js

.
├── assets
│ └── 1ecc2
└── bundles

.
├── assets
│ └── 1ecc2
└── bundles
{bundleUrl: ‘ios-ee820.js’}
Big JS bundle
ios-ee820.js
ios-index.json

.
├── assets
│ └── 1ecc2
└── bundles
git push master

I pushed to GitHub because it has free static hosting.
You can host your app from any server.

How do I build my app binary?
> expo build:ios

> expo build:ios —public-url https://quinlanj.github.io/self-hosting/ios-index.json

> expo build:ios —public-url https://quinlanj.github.io/self-hosting/ios-index.json
{bundleUrl: ‘ios-ee820.js’}
Big JS bundle
ios-ee820.js
ios-index.json
^ This ﬁle is served ﬁrst

How do I use this in development?
https://quinlanj.github.io/selfhost/ios-index.json
Convert to QR code

Scan the QR code into the expo dev app

http://localhost:8000/ios-index.json
Convert to QR code

This is what my app looks like.
I’ve installed it on my phone.

In development, let’s make a change by adding another pic

Currently on ﬁlesystem:
JS Bundle

JS Bundle
quinlanj.github.io
Here is the server hosting my app

JS Bundle
quinlanj.github.io
An update is ready!

JS Bundle
quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle

JS Bundle
quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle
JS Bundle

quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle

New
JS Bundle
<Image source={require(‘cat.png’} />
<Image source={require(‘dog.png’} />

quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle
?
dog.png is pulled down to ﬁlesystem?

New
JS Bundle
But how? It looks like these assets are fetched from ﬁlesystem

New
JS Bundle
We wrote a module to override asset resolution

New
JS Bundle
Module Logic:
Look for asset in the ﬁlesystem
If it’s not there, look for it from the server

quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle
?
dog.png is not on the ﬁlesystem

quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle
?
Let’s grab dog.png from server then!

quinlanj.github.io
An update is ready!
Files to be served:
New
JS Bundle
Cached for future use

How come assets are stored by hash?
.
├── assets
│ └── 1ecc2
└── bundles

JS Bundle
<Image source={require(‘cat.png’)} />
We are requiring assets by their name, not by their hash

JS Bundle
require(‘cat.png’)
React native packager
{assetName: ‘cat.png’, hash:’1ecc2’}
App packaging
App.js

JS Bundle
Module Logic:
Look for cat.png in the ﬁlesystem
If it’s not there, look for cat.png from the server
Recall

JS Bundle
Module Logic:
Look for 1ecc2 in the ﬁlesystem
If it’s not there, look for 1ecc2 from the server
Actual Implementation
{assetName: ‘cat.png’, hash:’1ecc2’}

<Image source={require(‘cat1.png’} />
<Image source={require(‘crazy-cat.png’} />
<Image source={require(‘lime-cat.png’} />
…
This app displays the same cat picture
These cat pictures are all named something diﬀerent

{assetName: ‘cat1.png’, hash:’1ecc2’}
{assetName: ‘crazy-cat.png’, hash:’1ecc2’}
{assetName: ‘lime-cat.png’, hash:’1ecc2’}
…
They all resolve to the same ﬁle on disk: 1ecc2

Announcements
We made a web application called Snack
Snack is like a JS Fiddle for react native apps
Snack is now open source, check it out at https://github.com/expo/snack-web

Hosting Your Own OTA Update Service

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Hosting Your Own OTA Update Service

Ähnlich wie Hosting Your Own OTA Update Service (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Hosting Your Own OTA Update Service