3 Replies Latest reply on Apr 11, 2017 7:33 PM by howard_owens

    Providing Offline Content

    howard_owens Level 1

      I would like to be able to provide offline content and I thought I understood how to do it, but my method isn't working.

       

      My script begins with a test (if, else if, else if, else if, else) for which JSON object to pull based on an URL variable. 

       

      So, for example, if "news" is in the URL, we fire this if we're online:

       

      else {

          document.title = "News";

          var jsonURLNews = "http://alladmin.thebatavian.com/tbmobile/index.cfm/news/list/category/news/format/json"

          localStorage.setItem("jsonURLNews", JSON.stringify(jsonURLNews));

          var jsonURL = "http://alladmin.thebatavian.com/tbmobile/index.cfm/news/list/category/news/format/json";

      }

       

      You can see I'm setting the page title, grabbing the JSON and storing it in a variable, storing that variable in local storage.  I also grab the variable (in this current iteration) again and store it as the variable that gets passed to the output script.

       

      If we're offline, our else is:

       

          document.title = "News";

          var jsonURL = JSON.parse(localStorage.getItem("jsonURLNews"));

       

      This would, I would have thought, pull the appropriate local storage of the object and store it in jsonURL for us to output.

       

      Output begins:

       

      $.getJSON( jsonURL, function( data ) { ...

       

       

      I put a simplified version of this process on a test page (that I ran only in a desktop browser, not in a build) and there are no errors and it appears that an object is going to local storage.

       

      When I load the full code to the build and build it and test on my iPad, online everything works fine, as expected, but when I switch to airplane mode for offline testing, no content is returned, as if there was nothing in local storage.

       

      What am I missing ... lots of googling around, no answers found?

       

      FYI,  I'm testing for online/offline:

       

       

      if (navigator.onLine) {

      } else {

      }

        • 1. Re: Providing Offline Content
          howard_owens Level 1

          I'm probably not going to play with this anymore tonight ... but it just occurred to me, could this be the issue:

           

          I have another json object that populates the sidebar with a list of businesses.  I've not tried to create the offline version of that data yet, but of course, the script is still running.  Perhaps that's choking things?

          • 2. Re: Providing Offline Content
            howard_owens Level 1

            I went ahead and tried removing the sidebar script as a test ... made no difference.  Content still doesn't display offline.

            • 3. Re: Providing Offline Content
              howard_owens Level 1

              This works for displaying my content offline.

               

              $.getJSON(jsonURL)

                  .done(function (data) {

                      localStorage.setItem("jsonData", JSON.stringify(data));

                      displayData(data);

                 

                     

                  })

                  .fail(function () {

                      if (!localStorage.getItem("jsonData")) {

                          alert("no stored data");

                      } else {

                          var data = JSON.parse(localStorage.getItem("jsonData"));

                          displayData(data);

                      }

                  });

               

              displayData() being a function that stores my output script.