Menu
Seems to be some questions about how one can use Meteor offline when there's no internet connection here on Stack Overflow, but I'm interested in if it's possible to build a Meteor application that will only be used offline. For example, is it possible to generate folder containing a single HTML file and all other files necessary (images, and possible CSS files and JavaScript files if they aren't embedded into the HTML file), and everything works out of the box when one opens the HTML file in a browser?
As far as I have tested, one can kind of getting it to work using the appcache package (one visits the page once when one is online, and then one can visit it when one is offline), but it seems unreliable.
I've also noticed the stand alone blaze project, but I want to take advantage of Meteor's features (hot code pushes during development, packages, minimongo, etc.).
So, does anyone know if what I want to do is achievable in some way?
620
You can build a purely offline Meteor app but there are a few 'weird' compromises.
Meteor is a bit forceful when it comes to making a DDP connection, so it is made to 127.0.0.1 as a sort of null loopback, since there is no server.
Meteor already builds the app in this offline-only way since the Cordova system was introduced, so its just extracting that out pretty much. There are builds for server, web.cordova and browser.
1 ) Bundle your app and extract it out
I'll just make a random example out of the todo app (it requires a server side bit, but well ignore that)
meteor create --example todos
cd todos
meteor bundle ~/Desktop/app.tar.gz
cd Desktop
tar xvzf app.tar.gz
2) In bundle there is a directory at /programs/web.browser, this is the framework of your offline app so take that directory and put it somewhere.
3) There are two files with a hash as the filename. Rename them as app.js and app.css
4) There is a directory called app. Move all its contents up to the main directory, i.e
cd app
mv * ../
rm -r app
5) Create a index.html file with the following in it:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="app.css?meteor_css_resource=true">
<script type="text/javascript">
__meteor_runtime_config__ = {
"meteorRelease": "1.0.0",
"ROOT_URL": "/",
"ROOT_URL_PATH_PREFIX": "",
"autoupdateVersion": "00000",
"DDP_DEFAULT_CONNECTION_URL": "127.0.0.1"
};
</script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
if (typeof Package === 'undefined' ||
!Package.webapp ||
!Package.webapp.WebApp ||
!Package.webapp.WebApp._isCssLoaded())
console.log("Load Fail");
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
<meta http-equiv="content-language" content="en">
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<title>Your App</title>
</head>
<body>
</body>
</html>
and voila:
Keep in mind this app needs a server so its quite useless this way, but you can make a purely client side app if you wanted.
Other considerations:
Use file based html paths for images, fonts and other files (file.jpg instead of /images/file.jpg)
With iron router its a bit tricky but you can't use / you'll have to use index.html and relative paths
You can remove redundant packages in meteor-platform that you will not use, such as autoupdate
There are a few packages on atmosphere that help with data storage such as ground:db instead of mongo collections which require a server side.
59
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
