Thoughts To Remember

Tag Archives: offline

Progressive web apps are the future, and here is a demo that I built in order to feel the current challenges.
How about a little tool that let you take notes?
Yes, not too original, but still useful.

It is currently can be found with 2 versions:

Basic version – It contain service worker for offline, manifest and a simple text area. All the basic functionality, that allow you to take notes the are saved automatically with or without connection. I used jQuery and bootstrap to keep it simple and to make it easy to extended it in the future.

Full version with Firebase – Similar to the basic version, but this time, I added the ability to save the notes in the cloud (=firebase). You can add notes, edit current ones and (of course) delete the ones that you don’t really like. The text area was upgrades to a markdown editor. A simple one, but still something that will give you the ability to get a preview of the note in a markdown.
You can use:
User – demo@demo.comPassword – demo

See below how it will look like after you login.

It’s still “work in progress” and you can see at the current TODOs at the bottom of the code repository.

Challenges and Tips

You can see the main tips that I got from working on this demo in the image below.
The most important checkbox is “force update on page load” – It will make sure you are getting your new version and not the one that the service worker already cached.
Another good way to see what is going inside your service worker is to click on the link ‘sw.js’ above this checkbox.

So to wrap-up, the code for this demo can be found at Noter on github and the live demo.
Please try it on your Android and let me know if you find something that is broken or can be better.

Like this:

Exactly a year ago on November 18, 2010, the W3C announced that Web SQL database is a deprecated specification. Many major browsers including Chrome, Safari, Opera and nearly all Webkit based mobile devices support WebSQL, however, if you are going to start a new project and/or you wish to have your code running with the new version of client side database (that will receive updates and improvements) you should implement indexedDB as your client side database. In this short post we will see what are the main steps to refractor your WebSQL code to IndexedDB.

Like this:

HTML5 features appcaching, a way to make your web sites and apps work offline, and to increase their performance as well.
I’m sure you know, browsers cache HTML, CSS, JavaScript files, images and other resources of the sites you visit, to speed up the subsequent loading of pages. However, you never know when the browser might discard cached files, and so this is not a reliable way for sites to work offline. But what if we could tell the browser what to cache? Well, with HTML5 application caches (also known as ‘appcache’) we can do just that.

An appcache manifest contain several lines in that order:

In the first line we declare “CACHE MANIFEST” (required)

Second line: “CACHE:” – which specifies the URLs of resources.

We can also optionally specify which resources should not be cached, in a section of the manifest file introduced by the string “NETWORK:”. These resources aren’t just not cached, but further, won’t be used when the user is offline, even if the browser has cached them in its own caches.

We can also optionally specify fallback resources to be used when the user is not connected, in a section of the file called “FALLBACK:”

You can add comments to the file with, simply by beginning a line with “#” – that’s an important feature to make the version readable for you as a developer. It’s also a nice way to let the browser ‘know’ that something changed in our app and it’s needed to fetch a new version of the app from the network.

Here is a simple example:

CACHE MANIFEST
#version 1.0

CACHE:

#images
/images/logo.png
/images/ido-header.png

#pages
/pages/index.html
/pages/main.html

#CSS
/style/main-style.css

#scripts
/js/main-logic.js

FALLBACK:
/ /offline.html

NETWORK:
sign-new-user.html

Creating a HTML5 cache manifest file the easy way:

manifested – cool tool to save you time and from what I’ve tried it works.

http://westciv.com/tools/manifestR/ – It is a bookmarklet, which you drag to your bookmarks bar. Then, when you visit any page, you can click the manifestR button, and it will create an HTML5 appcache manifest file for that page.