![]() The app can be installed on a mobile device. ![]() (No more error messages or frustratingly slow page loads.) Each device must have a connection for this first visit, after which the app will be fully functional even while offline or in shoddy network conditions. To keep the app itself functional while offline, a Service Worker is used to cache page resources (the most important HTML, CSS, and JavaScript files) when the web application is first visited. The app loads quickly, even while offline. (Need to share your grocery list with your roommate or access it on both your phone and your laptop? No problem!) When a connection is available, the data is synced from the local device to a CouchDB database in the cloud, and can thus be shared across multiple devices or users. (Whether you remember that you need juice while you're on your trusty home Wi-Fi or in the middle of the wilderness, you can still add it your list.)ĭata syncs between devices when a connection is available. ![]() This will allow your data to survive between sessions and when disconnected from the network. Persistance of shopping lists and item data entered by the user is achieved using the in-browser database PouchDB. PouchDB, CouchDB, and Service Worker are the primary tools that turn our simple shopping list app into a high performance, offline-capable Progressive Web App.ĭata stays safe on your device, even while it's offline. This design also makes the app incredibly performant (fast!) on the best of networks. The Offline First approach plans for the most constrained network environment first, enabling a great user experience even while the device is offline or has only an intermittent connection, and providing progressive enhancement as network conditions improve. So what sets this app apart? Its Offline First architecture. The web page will allow multiple shopping lists to be created (e.g., Groceries, Clothes, etc.) each with a number of shopping list items associated with them (e.g., Bread, Water, etc.). No other JavaScript framework framework (such as jQuery or Ember.js) or library other than PouchDB is used. This shopping list app is a small single page web application consisting of an HTML file, a couple of CSS files, and a couple of JavaScript files, and the PouchDB library.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |