Skip to content

Instantly share code, notes, and snippets.

@kenwebb
Last active August 17, 2021 17:26
Embed
What would you like to do?
React Native - Deployment
<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Tue Aug 17 2021 13:25:36 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>
<Notes><![CDATA[
() Xholon
------
Title: React Native - Deployment
Description:
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 5b0bb97117ecbf6976bcbd821d0d9b65
Keywords:
My Notes
--------
August 13, 2021
GWP React Native app.
How do we deploy the app to various platforms, specifically, for now, so that various people can test it.
We are especially interested in how people can field test it in Gatineau Park using Android, iOS, and Web.
() https://ngrok.com/
Expose a local web server to the internet
ngrok allows you to expose a web server running on your local machine to the internet. Just tell ngrok what port your web server is listening on.llow
KSW
- would allow me to use my home computer as a web server
- free or $60.00 per year or more
() search: web offline
() https://medium.com/swlh/how-to-make-your-web-apps-work-offline-be6f27dd28e
How to Make Your Web Apps Work Offline - The Power of Javascript and Browser Apis
Bowei Han, Nov 1, 2019
I recently had the opportunity to add offline capabilities to an existing application using service workers, cache storage, and IndexedDB.
The technical work required to make the application work offline boiled down to four distinct tasks that I’ll be covering in this post.
() https://www.wikihow.com/Work-Offline-in-Mozilla-Firefox
How to Work Offline in Mozilla Firefox
Co-authored by Stan Kats, Last Updated: July 22, 2021 Tested
() https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers
Making PWAs work offline with Service workers
() https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
() https://web.dev/progressive-web-apps/
Progressive Web Apps
- a Google site
() https://help.usertesting.com/hc/en-us/articles/115003371111-How-to-Launch-an-Unreleased-iOS-App-Test
Andrea found this site
How to Launch an Unreleased iOS App Test – UserTesting
() https://developer.apple.com/testflight/
Andrea found this site
TestFlight - Apple Developer
() https://support.google.com/googleplay/answer/7003180?hl=en
Andrea found this site
Try new Android apps before their official release - Google Play Help
Aug 17: search: react native offline mode
() https://dev.to/wernancheta/creating-offline-friendly-react-native-apps-part-1-general-tips-oea
Creating offline-friendly React Native apps - Part 1: General tips
Jul. 23, 2019 Originally published at pusher.com ・12 min read
() https://dev.to/wernancheta/creating-offline-friendly-react-native-apps-part-2-real-world-example-5903
() https://github.com/anchetawern/RNOffline
A sample React Native app showing practical examples of how to make offline-friendly apps.
() https://pusher.com/tutorials/offline-react-native-part-1
() https://pusher.com/tutorials/offline-react-native-part-2
both of these links are broken
() https://github.com/rgommezz/react-native-offline
Handful of utilities you should keep in your toolbelt to handle offline/online connectivity in React Native.
It supports iOS, Android and Windows platforms.
You can leverage all the functionalities provided or just the ones that suits your needs, the modules are conveniently decoupled.
() https://www.npmjs.com/package/@react-native-community/netinfo
React Native Network Info API for Android, iOS, macOS & Windows. It allows you to get information on:
Connection type
Connection quality
() https://github.com/kfiroo/react-native-cached-image
CachedImage component for react-native
4 years ago
() https://www.npmjs.com/package/@georstat/react-native-image-cache
KSW not very popular
() https://www.npmjs.com/package/react-native-fast-image
KSW this is the most popular when I query npmjs for: react native image cache
react-native-fast-image, TypeScript, 8.3.7 • Public • Published 24 days ago
Performant React Native image component.
React Native's Image component handles image caching like browsers for the most part.
If the server is returning proper cache control headers for images you'll generally get the sort of built in caching behavior you'd have in a browser.
Even so many people have noticed:
- Flickering.
- Cache misses.
- Low performance loading from cache.
- Low performance in general.
FastImage is an Image replacement that solves these issues. FastImage is a wrapper around SDWebImage (iOS) and Glide (Android).
() https://github.com/DylanVann/react-native-fast-image
]]></Notes>
<_-.XholonClass>
<!-- domain objects -->
<PhysicalSystem/>
<Block/>
<Brick/>
<!-- quantities -->
<Height superClass="Quantity"/>
</_-.XholonClass>
<xholonClassDetails>
<Block>
<port name="height" connector="Height"/>
</Block>
</xholonClassDetails>
<PhysicalSystem>
<Block>
<Height>0.1 m</Height>
</Block>
<Brick multiplicity="2"/>
</PhysicalSystem>
<Blockbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var a = 123;
var b = 456;
var c = a * b;
if (console) {
console.log(c);
}
//# sourceURL=Blockbehavior.js
]]></Blockbehavior>
<Heightbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var myHeight, testing;
var beh = {
postConfigure: function() {
testing = Math.floor(Math.random() * 10);
myHeight = this.cnode.parent();
},
act: function() {
myHeight.println(this.toString());
},
toString: function() {
return "testing:" + testing;
}
}
//# sourceURL=Heightbehavior.js
]]></Heightbehavior>
<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
$wnd.xh.Brickbehavior = function Brickbehavior() {}
$wnd.xh.Brickbehavior.prototype.postConfigure = function() {
this.brick = this.cnode.parent();
this.iam = " red brick";
};
$wnd.xh.Brickbehavior.prototype.act = function() {
this.brick.println("I am a" + this.iam);
};
//# sourceURL=Brickbehavior.js
]]></Brickbehavior>
<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
console.log("I'm another brick behavior");
]]></Brickbehavior>
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Block</title>
<rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0"/>
<g>
<title>Height</title>
<rect id="PhysicalSystem/Block/Height" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
</g>
</g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>
</XholonWorkbook>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment