esri / offline-editor-js

ArcGIS JavaScript library for handling offline editing and tiling.

offline-editor-js

Maintenance Mode As of May 1, 2016 no new functionality will be added to this project. For additional details refer to this issue.

If you need a fully integrated, robust offline solution that's officially supported, then please refer to our native ArcGIS Runtime SDKs for iOS, Android, .NET, Xamarin, Java, OSx and Qt.

Getting Started

Online samples are available here: http://esri.github.io/offline-editor-js/demo/

This project is also available on npm: https://www.npmjs.com/package/esri-offline-maps

Libraries

This repo contains the following libraries in the /dist directory. The use of basic in the name indicates intermittent offline-only, and advanced indicates the library can be used for both intermittent and full offline.

Reference URLs are provided for developement only. It's recommended to use a CDN or host your own.

Use_Case	Name, Description and gh-pages URL
Basic editing	offline-edit-basic-min.js Simple, lightweight (15k minimized) offline editing library that automatically caches adds, updates and deletes when the internet is temporarily interrupted. http://esri.github.io/offline-editor-js/dist/offline-edit-basic-min.js
Advanced editing	offline-edit-advanced-min.js Used for intermittent and full offline editing workflows. Also includes limited support for attachments. http://esri.github.io/offline-editor-js/dist/offline-edit-advanced-min.js
Basic map tiles	offline-tiles-basic-min.js Caches map tiles for simple, intermittent-only offline workflows. Use this library with ArcGIS Online Web maps as well as with tiled map services. http://esri.github.io/offline-editor-js/dist/offline-tiles-basic-min.js
Advanced map tiles	offline-tiles-advanced-min.js Used for intermittent and full offline tile caching. Extends any ArcGIS Tiled Map Service. This library should be used in conjunction with an HTML5 Application Cache Manifest coding pattern. http://esri.github.io/offline-editor-js/dist/offline-tiles-advanced-min.js
TPK files	offline-tpk-min.js Reads TPK files and displays and caches them as a tiled map layer. Works for both intermittent and full offline. http://esri.github.io/offline-editor-js/dist/offline-tpk-min.js

src files are for software development-only. Themin versions are minified and should be used in production.

Workflows Supported

The following workflow is currently supported for both both features and tiles:

1. Load web application while online.

2. Once all tiles, features and attachments are loaded then programmatically take application offline.

3. Make edits while offline.

4. Return online when you want to resync edits.

This workflow is supported for intermittent offline and full offline. There are samples in the /samples directory for both use cases. For more information on the differences between intermittent and full offline check out this blog post.

Full offline requires the use of an application manifest to allow for browser reloads and restarts while offline. The application manifest lets you store .html, .js, .css and image files locally. There is also a wiki doc to help you learn more about using the cache with this library.

Attachment Support: Attachments are supported with some limitations. See documentation here

API and How To Use Docs

Go here to get links to the API docs and How to use docs.

FAQ

Go here for answers to frequently asked questions.

Architecture

Setup Instructions

1. Fork and clone the repo.
2. After cloning from github, cd into the offline-editor-js folder
3. Run git submodule init and git submodule update
4. Try out the apps in the /samples folder. If they run, then everything is set up correctly.

Build Instructions

1. From the root directory run npm install
2. Run Grunt build. If there are no errors, the minimized (min) and source (src) versions of the libraries will be output to /dist
3. For production automation see the npm scripts listed in package.json.

Limitations

• Currently does not support related tables, domains or subtypes. The ArcGIS Runtime SDKs fully support these and more.
• There are browser limitations and technical dependencies. The offline capabilities in this toolkit depend on certain JavaScript capabilities being present in the browser. Go here for a detailed breakdown.
• Attachments are supported with some limitations listed here.
• Browser storage space on mobile devices is a known limitation. This applies to stand-alone web applications and hybrid applications.
• The ArcGIS Editor Widget (ArcGIS API for JavaScript v3.x) may not work with OfflineEditAdvanced after a full offline restart. It's recommended that you build your own custom editing functionality that is fully mobile and offline compliant.

Supported browsers

• Only the latest versions of Chrome, Firefox and Safari are supported.
• The most up to date information on this library's browser support can be found here.

Dependencies

• ArcGIS API for JavaScript (v3.14+)

• Offline.js - it allows detection of the online/offline condition and provides events to hook callbacks on when this condition changes

• Node.js required for building the source

• IndexedDBShim - polyfill to simulate indexedDB functionality in browsers/platforms where it is not supported notably older versions desktop Safari and iOS Safari.

• Sub-modules (see /vendor directory)

  • jasmine.async - Used specifically for unit testing.

• Non sub-module based libraries that are used internally by this project

  • FileSaver.js - library to assist with uploading and downloading of files containing tile information.
  • grunt-manifest node.js library to assist with the creation of manifest files.
  • zip A library for zipping and unzipping files.
  • xml2json A library for converting XML to JSON. Handles complex XML.

Resources

• ArcGIS API for JavaScript
• ArcGIS REST Services
• twitter@esri

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Anyone and everyone is welcome to contribute. Please see our guidelines for contributing.

Licensing

Copyright 2017 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.

[](Esri Tags: ArcGIS Web Mapping Editing FeatureServices Tiles Offline) [](Esri Language: JavaScript)

offline-editor-js's Issues

update README.md file

do this FIRST!
it will help us get more people onboard

Add custom event to indicate success/failure after reestablishing internet

Need a way in the UX to listen for success or failure after detecting an online condition and re-syncing the adds, updates and deletes.

Create samples directory and move all sample apps into it

try to get rid of the need for a proxy to download tiles

Let's look into CORS or another mechanism that allows downloading images without resorting to a proxy

update README.md to explain the need for a proxy and how to set it up

right now it is needed for working with tiles offline

multiple edits being submitted when only one edit created while offline

The longer the app is offline the more duplicate edits that are created when the app returns to an online condition. I suspect this is somehow tied into the new offline detection functionality.

remove unused files - clean up code - edit lib

PhoneGap support

Create a sample that demonstrates this library working with PhoneGap/Cordova.

Add ability to take attachments

Examples might be camera snapshots or short video clips.

Problem in tile samples with accessing the webmap id

XMLHttpRequest cannot load http://www.arcgis.com/sharing/rest/content/items/f58996878ac24702afef792e52a07e55/data?f=json. The 'Access-Control-Allow-Origin' whitelists only 'http://esri.github.io'. Origin 'http://localhost' is not in the list, and is therefore not allowed access.

GET http://www.arcgis.com/sharing/rest/content/items/f58996878ac24702afef792e52a07e55/data?f=json
304 Not Modified
94ms
3.7compact (line 157)
RequestError: Unable to load http://www.arcgis.com/sharing/rest/content/items/f58996878ac24702afef792e52a07e55/data?f=json status: 0
The resource from this URL is not text: http://js.arcgis.com/3.7compact

Create an app to demonstrate offline editing

The existing index.html app isn't very pretty although it does demonstrate add and delete for points, lines and polygons.

Maybe with some cleanup and removal off all the testing functionality it could become the demonstration app.

graphic rehydration error on app load

Unable to commit edits because graphic attributes aren't rehydrating correctly when application first loads.

Rebuild OfflineStore to use AMD pattern

Sub-library dependencies aren't really manageable with the current script loader.

Protect against indexedb overfill conditions

This topic is related to protecting data integrity.

Reference: https://developer.mozilla.org/en-US/docs/IndexedDB (See the Storage Limits section).

https://developers.google.com/chrome/whitepapers/storage#temporary

PhoneGap support for tile storage

Replace existing offline detection code with offline.js

https://github.com/HubSpot/offline/blob/master/js/offline.js

Ability to read tpk files

Move all offline tile storage to IndexedDB

Remove or deprecated the localstorage code. LocalStorage simply doesn't provide enough space to be a viable target.

remove unused files - clean up code - tiles lib

Look at ways to measure inbound object size

Want to make sure that we can measure incoming adds,updates or deletes and insure there is enough space available to handle them.

create simple app for offline tile management

create a sample with nice UX for editing

• ask around to locate a js app that has a nice UX for editing
• modify that app to incorporate offline functionality

Index not updating correctly

Sometimes it writes duplicate information, sometimes is doesn't represent an add, update or delete that has definitely occured.

sub-module for boostrap-map-js not populating on my local git repo

I'm looking into this. Not sure if it's just a problem on my local machine. Getting error: Unable to find current revision in submodule path 'vendor/bootstrap-map-js'

capability to reload the app while offline

need to:

• cache the application files (html, css, js...) (using HTML5 manifest)
• store the original feature layers offline (on user's request)
• when loading the app, detect whether we are offline and load the feature layers from local storage

Remove or highlight graphic that has been deleted while offline

There needs to be a way to indicate that a graphic (point, line or polygon) has be created or deleted while offline. This will allow someone, at a glance, to determine was has been done. This could be as simple as changing the color, or adding some sort of icon to the graphic.

And/or there needs to be a table of edits that is updated as adds, updates, deletes occur.

unauthorized access web map error on tile sample

I think the permissions got changed on this web map url: http://services1.arcgis.com/ohIVh2op2jYT7sku/arcgis/rest/services/Hot%20Spots%20Privately%20Owned%20Public%20Open%20Spaces%20-%20Privately_Owned_Public_Open_Spaces/FeatureServer/0

It's throwing the following error when I try to load the sample:

Error {code: 500, message: "Unauthorized access", details: Array[1], log: undefined, httpCode: 500}

add submodule for jasmine

Javier, I changed my mind. I agree with you that we should add this as a submodule. After thinking about it for a bit, I actually like the web interface better than the node "pure text" terminal view.

Look at using IndexedDB.put() rather than add() in OfflineTileStore

This way we can enforce that each URL + image is unique. With the current coding pattern this is not possible.

consider adding submodule for Hydrate.js

This is being used in the offline editing library.

Problem with multiple edits

Single edits work, multiple edits seem to be failing. Reproducible.

revisit tile size estimation - and fix unit tests

if we have time

Add ability to undo a pending edit

indexedDBShim not allowing proper debugging in Firefox 27

Firefox debugger console doesn't seem like the shim. We need to be able to debug in Firefox. I haven't looked at this in detail, however app fails because of numerous errors such as:

setting a property that has only a getter Line 2
'onreadystatechange' getter called on an object that does not implement interface XMLHttpRequest. Line 2
'readyState' getter called on an object that does not implement interface XMLHttpRequest. Line 2
'timeout' getter called on an object that does not implement interface XMLHttpRequest. Line 2

Ability to initialize localStorage not working in OfflineStore.js

I think the last build broke this even though the tests are passing. I'll take a look.

OfflineStore's global error handler contains out of scope pointers

Improve duplicate entry checking -- add ability to compare graphic attributes

Offline Edit tests that connect to ArcGIS Server are throwing 400 errors

The graphics created in edit-basic.html are 'not' well formed and are causing sync failures with their respective feature services. Furthermore, the tests are showing these requests as completing successfully.

Here's example of a correctly working "adds":

[{"geometry":{"rings":[[[-9266233.729308194,5247884.508472704],[-9265798.993709812,5247454.550188589],[-9266458.263078788,5247444.995560053],[-9266458.263078788,5247444.995560053],[-9266233.729308194,5247884.508472704]]],"spatialReference":{"wkid":102100}},"attributes":{"ruleid":2,"name":null,"__hydrate_id":"0"}}]

Here's an adds that is obviously being messed up by the serializer:

[{"geometry":{"rings":[[[-115.312,37.96875],[-111.4453125,37.96875],[-99.84375,36.2109375],[-99.84375,23.90625],[-116.015625,24.609375],[-115.3125,37.96875]]],"spatialReference":{"wkid":102100}},"attributes":{"0":"","1":"","2":"h","3":"y","4":"d","5":"r","6":"a","7":"t","8":"e","9":"","10":"r","11":"e","12":"f","13":"","14":"0"}}]

Add callback to OfflineStore.applyEdits()

Need a way to determine if there was success or failure when an internet connection is available.

reorganize sample files

• using 1 file per sample

OfflineStore needs to work with attribute inspector

Need to dynamically determine which fields are available and configure the attribute inspector to use them. We'll probably need some sort of configuration file or preconfigured object that specifies which fields we want to not display. Default will be to display all fields in the attribute inspector.

Caveat: library won't be able to create new attributes that don't already exist on the server.

Sync up and standardize Classes, Methods and naming conventions

https://dojotoolkit.org/reference-guide/1.7/developer/styleguide.html

remove base64 code in tiles lib

if we can use built-in functionality in js or dojo

Sometimes offline test doesn't work

There have been quite a few times when the offline detector did not detect an offline condition properly.

add code comments (to generate automatic documentation)

following webstorm format

Ability to write csv containing tile info to indexedDB

The tile library has ability to allow user to download a csv file containing the cut tiles. This issue is for building the functionality to allow the reverse, which is programmatically reading the CSV-based tiles and allowing them to be read back into indexedDB.

This provides a mechanism to make the tiles portable amongst different machines and devices.

enhance phantom layer

• need to use better looking symbols
• need to make the phantom layer transparent to mouse events (this is proving to be difficult)

Randomly not detecting offline conditions correctly in Firefox - UX fails silently

I've been able to reproduce this condition.

• Browser is taken offline
• Library does not properly detect condition
• Offline indicator in military-offline.html app continues to show an online condition
• Edits fail silently

An error is properly returned in line 54 of offlineFeaturesManager.js. However, I'm not sure where we can properly capture this error in the TemplatePicker?

Investigate ability to work with web maps

This includes feature services and tiles.

Did we mean to create directory offline-editor-js / tiles / tiles ?

Just checking...this used to be offline-editor-js / tiles / src ?