{"id":161,"date":"2013-02-21T17:08:42","date_gmt":"2013-02-21T17:08:42","guid":{"rendered":"http:\/\/elbsolutions.com\/projects\/?p=161"},"modified":"2022-02-03T11:25:05","modified_gmt":"2022-02-03T17:25:05","slug":"offline-web-apps","status":"publish","type":"post","link":"https:\/\/elbsolutions.com\/projects\/offline-web-apps\/","title":{"rendered":"HTML5, Manifest files and offline content"},"content":{"rendered":"<p>So I think I have uncovered something major. In my iOS security app for the preschoolers, I plan to include or make a separate app for looking at curriculum. I WAS going to download to the local app an html page, scrape the links, download those resouces, change the local html page links to local links and &#8211; voila- an offline app. Genious &#8230; well, it has already been invented with html5 (isn&#8217;t it always the way). \u00a0I noticed it while looking up <a href=\"http:\/\/stackoverflow.com\/questions\/2210696\/iphone-app-which-is-only-a-local-html-file-how\" target=\"_blank\" rel=\"noopener noreferrer\">how to specify local iOS urls<\/a>\u00a0(see part where it says CSS Ninja).<\/p>\n<p>Here are 2 EXCELLENT articles and Q&amp;A&#8217;s below them. I am going to try this- it is exactly what I need to make the curriculum offline. Why, if I am reading\/reviewing with my kids do I need curriculum offline. I am an at-home and not a circus dad you might say . . . yes, but my wireless router is in the basement and I have a 3 year old with a 3 year old attention span and so do many other parents out there. 3G is still quite slow and I am not sure when Telus here in Calgary is going 4G &#8211; besides when the wifi is going in and out and has 1\/2 the bars &#8211; the phone is so busy establishing which network to use, that it does not download any webpages. Also typing into my facebook app the different sets of curriculum for 3 different kids ages that I require is tedious and annoying &#8211; one page that links all of this? Great &#8211; just what I need. This offline approach is just what I need I hink and other need as well from small interviews I had with other dads (moms don&#8217;t do this techno-learning quite as intensely). Read on over the next while to see how things are going. I am going to serve up the pages and manifest files with php.<\/p>\n<p>The 2nd is beyond a stunning example of someone who knows what he is doing and is referenced by the 1st in the comments as to why things are not going well. Read them in the following order.<\/p>\n<ul>\n<li><span style=\"line-height: 15px;\"><a href=\"http:\/\/www.thecssninja.com\/javascript\/how-to-create-offline-webapps-on-the-iphone\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.thecssninja.com\/javascript\/how-to-create-offline-webapps-on-the-iphone<\/a> (live\u00a0demo and everything &#8211; I nearly fell off my chair when it worked &#8211; this was it &#8211; &#8220;the droids I had been looking for&#8221;.<\/span><\/li>\n<li><a href=\"http:\/\/diveintohtml5.info\/offline.html\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/diveintohtml5.info\/offline.html<\/a>\u00a0(see the bottom for MANY more tutorials)<\/li>\n<\/ul>\n<p>First, the content comes from wordpress. This will be a wordpress plugin and I will be using Netbeans PHP for this v7.3 . I have used Netbeans for Java development, but not php &#8211; there is a plug in for wordpress plugins.<\/p>\n<p>In short, here is what needs to happen<\/p>\n<ol>\n<li>we need to wrap the html content from wordpress with an html5 wrapper with a manifest directive<\/li>\n<li>serve up the webpage manifest file which is the offline magic file with the proper Content-type:\u00a0text\/cache-manifest \u00a0(or put it in a dir with an .htaccess file) and ensure this file NEVER gets cached until it is a mature project.<\/li>\n<li>Serve up a manifest file EACH load (so put the date\/time\/ip address as a comment in the manifest file) with a reference to every html link, image and pdf in the html content.<\/li>\n<\/ol>\n<p>Step 0 &#8211; Setup<\/p>\n<ol>\n<li>Installed wordpress in a new subdirectory with a new database etc.<\/li>\n<li>Started a new project in netbeans. The wordpress additions require all the credentials of the database etc. These are in the wp-config.php file in the root directory of the new wordpress installation. The DB_HOST is the host of your installation which for wordpress is normally localhost. Since I am developing at home and it is hosted on the web, this needed to change to my server and I had to use the control panel to open up port 3306 (MySQL port) on the web. To only allow my host at home, use <a href=\"http:\/\/www.ipchicken.com\" target=\"_blank\" rel=\"noopener noreferrer\">ipchicken.com<\/a> to find your ip.<\/li>\n<li>AHH! Got the error &#8216;Error establishing a database connection&#8217;. <a title=\"The dreaded \u2018Error establishing a database connection\u2019\" href=\"http:\/\/elbsolutions.com\/projects\/the-dreaded-error-establishing-a-database-connection\/\" target=\"_blank\" rel=\"noopener noreferrer\">Solved it here<\/a>.<\/li>\n<li>I had a lot of fiddling getting Netbeans to be in a place that made uploading to github easy and would run on my local Mac webserver. (ok &#8211; it took another 2 hours to get my Mountain Lion install of apache working too)<\/li>\n<\/ol>\n<p>Step 1 Get content from WordPress<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;code&gt;&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot; &lt;mark&gt;manifest=&quot;mymanfile.php&quot;&lt;\/mark&gt;&gt;&lt;\/code&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>So I think I have uncovered something major. In my iOS security app for the preschoolers, I plan to include or make a separate app for looking at curriculum. I WAS going to download to the local app an html page, scrape the links, download those resouces, change the local html page links to local [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,13],"tags":[],"class_list":["post-161","post","type-post","status-publish","format-standard","hentry","category-iphone-ipad-and-handheld-development","category-web-integration"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML5, Manifest files and offline content - ELB Solutions.com Inc.<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elbsolutions.com\/projects\/offline-web-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5, Manifest files and offline content - ELB Solutions.com Inc.\" \/>\n<meta property=\"og:description\" content=\"So I think I have uncovered something major. In my iOS security app for the preschoolers, I plan to include or make a separate app for looking at curriculum. I WAS going to download to the local app an html page, scrape the links, download those resouces, change the local html page links to local [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elbsolutions.com\/projects\/offline-web-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"ELB Solutions.com Inc.\" \/>\n<meta property=\"article:published_time\" content=\"2013-02-21T17:08:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-03T17:25:05+00:00\" \/>\n<meta name=\"author\" content=\"Etienne Bley\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Etienne Bley\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/offline-web-apps\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/offline-web-apps\\\/\"},\"author\":{\"name\":\"Etienne Bley\",\"@id\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/#\\\/schema\\\/person\\\/51e717c68f4f5917c63baf88f0896c39\"},\"headline\":\"HTML5, Manifest files and offline content\",\"datePublished\":\"2013-02-21T17:08:42+00:00\",\"dateModified\":\"2022-02-03T17:25:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/offline-web-apps\\\/\"},\"wordCount\":755,\"articleSection\":[\"iPhone,iPad and handheld development\",\"Web Integration\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/offline-web-apps\\\/\",\"url\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/offline-web-apps\\\/\",\"name\":\"HTML5, Manifest files and offline content - ELB Solutions.com Inc.\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/#website\"},\"datePublished\":\"2013-02-21T17:08:42+00:00\",\"dateModified\":\"2022-02-03T17:25:05+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/#\\\/schema\\\/person\\\/51e717c68f4f5917c63baf88f0896c39\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/offline-web-apps\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/offline-web-apps\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/offline-web-apps\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5, Manifest files and offline content\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/#website\",\"url\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/\",\"name\":\"ELB Solutions.com Inc.\",\"description\":\"Bringing all your IT Pieces together\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/#\\\/schema\\\/person\\\/51e717c68f4f5917c63baf88f0896c39\",\"name\":\"Etienne Bley\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f8971dfb65b25b768415568f83247df4057f15d037137e386928a804e2c997b9?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f8971dfb65b25b768415568f83247df4057f15d037137e386928a804e2c997b9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f8971dfb65b25b768415568f83247df4057f15d037137e386928a804e2c997b9?s=96&d=mm&r=g\",\"caption\":\"Etienne Bley\"},\"url\":\"https:\\\/\\\/elbsolutions.com\\\/projects\\\/author\\\/etienne-bley\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5, Manifest files and offline content - ELB Solutions.com Inc.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elbsolutions.com\/projects\/offline-web-apps\/","og_locale":"en_US","og_type":"article","og_title":"HTML5, Manifest files and offline content - ELB Solutions.com Inc.","og_description":"So I think I have uncovered something major. In my iOS security app for the preschoolers, I plan to include or make a separate app for looking at curriculum. I WAS going to download to the local app an html page, scrape the links, download those resouces, change the local html page links to local [&hellip;]","og_url":"https:\/\/elbsolutions.com\/projects\/offline-web-apps\/","og_site_name":"ELB Solutions.com Inc.","article_published_time":"2013-02-21T17:08:42+00:00","article_modified_time":"2022-02-03T17:25:05+00:00","author":"Etienne Bley","twitter_misc":{"Written by":"Etienne Bley","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elbsolutions.com\/projects\/offline-web-apps\/#article","isPartOf":{"@id":"https:\/\/elbsolutions.com\/projects\/offline-web-apps\/"},"author":{"name":"Etienne Bley","@id":"https:\/\/elbsolutions.com\/projects\/#\/schema\/person\/51e717c68f4f5917c63baf88f0896c39"},"headline":"HTML5, Manifest files and offline content","datePublished":"2013-02-21T17:08:42+00:00","dateModified":"2022-02-03T17:25:05+00:00","mainEntityOfPage":{"@id":"https:\/\/elbsolutions.com\/projects\/offline-web-apps\/"},"wordCount":755,"articleSection":["iPhone,iPad and handheld development","Web Integration"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elbsolutions.com\/projects\/offline-web-apps\/","url":"https:\/\/elbsolutions.com\/projects\/offline-web-apps\/","name":"HTML5, Manifest files and offline content - ELB Solutions.com Inc.","isPartOf":{"@id":"https:\/\/elbsolutions.com\/projects\/#website"},"datePublished":"2013-02-21T17:08:42+00:00","dateModified":"2022-02-03T17:25:05+00:00","author":{"@id":"https:\/\/elbsolutions.com\/projects\/#\/schema\/person\/51e717c68f4f5917c63baf88f0896c39"},"breadcrumb":{"@id":"https:\/\/elbsolutions.com\/projects\/offline-web-apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elbsolutions.com\/projects\/offline-web-apps\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elbsolutions.com\/projects\/offline-web-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elbsolutions.com\/projects\/"},{"@type":"ListItem","position":2,"name":"HTML5, Manifest files and offline content"}]},{"@type":"WebSite","@id":"https:\/\/elbsolutions.com\/projects\/#website","url":"https:\/\/elbsolutions.com\/projects\/","name":"ELB Solutions.com Inc.","description":"Bringing all your IT Pieces together","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elbsolutions.com\/projects\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/elbsolutions.com\/projects\/#\/schema\/person\/51e717c68f4f5917c63baf88f0896c39","name":"Etienne Bley","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f8971dfb65b25b768415568f83247df4057f15d037137e386928a804e2c997b9?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f8971dfb65b25b768415568f83247df4057f15d037137e386928a804e2c997b9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f8971dfb65b25b768415568f83247df4057f15d037137e386928a804e2c997b9?s=96&d=mm&r=g","caption":"Etienne Bley"},"url":"https:\/\/elbsolutions.com\/projects\/author\/etienne-bley\/"}]}},"_links":{"self":[{"href":"https:\/\/elbsolutions.com\/projects\/wp-json\/wp\/v2\/posts\/161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elbsolutions.com\/projects\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elbsolutions.com\/projects\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elbsolutions.com\/projects\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elbsolutions.com\/projects\/wp-json\/wp\/v2\/comments?post=161"}],"version-history":[{"count":5,"href":"https:\/\/elbsolutions.com\/projects\/wp-json\/wp\/v2\/posts\/161\/revisions"}],"predecessor-version":[{"id":2873,"href":"https:\/\/elbsolutions.com\/projects\/wp-json\/wp\/v2\/posts\/161\/revisions\/2873"}],"wp:attachment":[{"href":"https:\/\/elbsolutions.com\/projects\/wp-json\/wp\/v2\/media?parent=161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elbsolutions.com\/projects\/wp-json\/wp\/v2\/categories?post=161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elbsolutions.com\/projects\/wp-json\/wp\/v2\/tags?post=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}