{"id":1117,"date":"2018-05-29T20:31:08","date_gmt":"2018-05-29T19:31:08","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1117"},"modified":"2018-08-15T11:30:34","modified_gmt":"2018-08-15T10:30:34","slug":"developing-an-offline-html5-mobile-app","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/developing-an-offline-html5-mobile-app\/","title":{"rendered":"Developing an Offline Html5 (mobile) app"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>Application Manifest (app info):\u00a0https:\/\/w3c.github.io\/manifest\/<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"lang:default decode:true\">&lt;head&gt;\r\n    &lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"&gt;\r\n    &lt;link rel=\"manifest\" href=\".\/manifest.json\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no\" \/&gt;\r\n&lt;\/head&gt;<\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"lang:js decode:true\" title=\"manifest.json\">{\r\n  \"short_name\": \"Maps\",\r\n  \"name\": \"Google Maps\",\r\n  \"icons\": [\r\n    {\r\n      \"src\": \"\/images\/icons-192.png\",\r\n      \"type\": \"image\/png\",\r\n      \"sizes\": \"192x192\"\r\n    },\r\n    {\r\n      \"src\": \"\/images\/icons-512.png\",\r\n      \"type\": \"image\/png\",\r\n      \"sizes\": \"512x512\"\r\n    }\r\n  ],\r\n  \"start_url\": \"\/maps\/?source=pwa\",\r\n  \"background_color\": \"#3367D6\",\r\n  \"display\": \"standalone\",\r\n  \"scope\": \"\/maps\/\",\r\n  \"theme_color\": \"#3367D6\"\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Application Cache (offline files):\u00a0 https:\/\/www.html5rocks.com\/en\/tutorials\/appcache\/beginner\/<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html manifest=\"index.mf\"&gt;\r\n&lt;!-- AddType text\/cache-manifest .mf --&gt;<\/pre>\n<pre class=\"lang:default decode:true\" title=\"index.mf\">CACHE MANIFEST\r\n# 2010-06-18:v2\r\n\r\n# Explicitly cached 'master entries'.\r\nCACHE:\r\n\/favicon.ico\r\nindex.html\r\nstylesheet.css\r\nimages\/logo.png\r\nscripts\/main.js\r\n\r\n# Resources that require the user to be online.\r\nNETWORK:\r\n*\r\n\r\n# static.html will be served if main.py is inaccessible\r\n# offline.jpg will be served in place of all images in images\/large\/\r\n# offline.html will be served in place of all other .html files\r\nFALLBACK:\r\n\/main.py \/static.html\r\nimages\/large\/ images\/offline.jpg\r\n<\/pre>\n<pre class=\"lang:js decode:true\" title=\"Update cache automatically\">\/\/ Check if a new cache is available on page load.\r\nwindow.addEventListener('load', function(e) {\r\n\r\n  window.applicationCache.addEventListener('updateready', function(e) {\r\n    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {\r\n      \/\/ Browser downloaded a new app cache.\r\n      if (confirm('A new version of this site is available. Load it?')) {\r\n        window.location.reload();\r\n      }\r\n    } else {\r\n      \/\/ Manifest didn't changed. Nothing new to server.\r\n    }\r\n  }, false);\r\n\r\n}, false);<\/pre>\n<pre class=\"lang:js decode:true \" title=\"AppCache events\">function handleCacheEvent(e) {\r\n  \/\/...\r\n}\r\n\r\nfunction handleCacheError(e) {\r\n  alert('Error: Cache failed to update!');\r\n};\r\n\r\n\/\/ Fired after the first cache of the manifest.\r\nappCache.addEventListener('cached', handleCacheEvent, false);\r\n\r\n\/\/ Checking for an update. Always the first event fired in the sequence.\r\nappCache.addEventListener('checking', handleCacheEvent, false);\r\n\r\n\/\/ An update was found. The browser is fetching resources.\r\nappCache.addEventListener('downloading', handleCacheEvent, false);\r\n\r\n\/\/ The manifest returns 404 or 410, the download failed,\r\n\/\/ or the manifest changed while the download was in progress.\r\nappCache.addEventListener('error', handleCacheError, false);\r\n\r\n\/\/ Fired after the first download of the manifest.\r\nappCache.addEventListener('noupdate', handleCacheEvent, false);\r\n\r\n\/\/ Fired if the manifest file returns a 404 or 410.\r\n\/\/ This results in the application cache being deleted.\r\nappCache.addEventListener('obsolete', handleCacheEvent, false);\r\n\r\n\/\/ Fired for each resource listed in the manifest as it is being fetched.\r\nappCache.addEventListener('progress', handleCacheEvent, false);\r\n\r\n\/\/ Fired when the manifest resources have been newly redownloaded.\r\nappCache.addEventListener('updateready', handleCacheEvent, false);<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Application Manifest (app info):\u00a0https:\/\/w3c.github.io\/manifest\/ &nbsp; &lt;head&gt; &lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text\/html; charset=UTF-8&#8243;&gt; &lt;link rel=&#8221;manifest&#8221; href=&#8221;.\/manifest.json&#8221;&gt; &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no&#8221; \/&gt; &lt;\/head&gt; &nbsp; { &#8220;short_name&#8221;: &#8220;Maps&#8221;, &#8220;name&#8221;: &#8220;Google Maps&#8221;, &#8220;icons&#8221;: [ { &#8220;src&#8221;: &#8220;\/images\/icons-192.png&#8221;, &#8220;type&#8221;: &#8220;image\/png&#8221;, &#8220;sizes&#8221;: &#8220;192&#215;192&#8221; }, { &#8220;src&#8221;: &#8220;\/images\/icons-512.png&#8221;, &#8220;type&#8221;: &#8220;image\/png&#8221;, &#8220;sizes&#8221;: &#8220;512&#215;512&#8221; } ], &#8220;start_url&#8221;: &#8220;\/maps\/?source=pwa&#8221;, &#8220;background_color&#8221;: &#8220;#3367D6&#8221;, &#8220;display&#8221;: &#8220;standalone&#8221;, &#8220;scope&#8221;: &#8220;\/maps\/&#8221;, &#8220;theme_color&#8221;: &#8220;#3367D6&#8221; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-1117","post","type-post","status-publish","format-standard","hentry","category-websites"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1117"}],"version-history":[{"count":4,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1117\/revisions"}],"predecessor-version":[{"id":1125,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1117\/revisions\/1125"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}