Search code examples
javascriptangularjswebviewsteroids

Steroids and Angular: Preloading Multiple Webviews from data

I'm working with a Steroids generator ng-resource, which has generated controller/model/views based on some local json data. It has an index.html and a detailed.html

The boilerplate code provides a list of cars which you click on, bringing you to a new webview of the car's detailed page. Easy enough. The problem is, this view is not preloaded - it loads in after you click a car in the car list. This creates a laggy experience.

I've read up on preloading webviews - which works great if you don't have a bunch of webviews powered by dynamic data. I would like to preload all detailed webviews based on the initial listing of "cars". I've been reading the following resources:

Preloaded Webviews from different parts of your app

Sharing Data Between webviews

Preloading Webviews

I don't have a lot of raw code to provide - just boilerplate examples of ng-resource. I'm wondering what the best technical approach is for my needs. Trying to get that native app feel when navigating.

Solution

  • EDIT: Here is a better answer from the Appgyver/Steroids Team

    From what you have described your use case to be like I would suggest that you would preload the show.html in your app once and then whenever you need to show the show.html you would send a postmessage from the view you are moving from to show.html that it should load the content for the id provided.

    If you have to load the content from a remote server, you should send two postmessages, with the first one including whatever info you already have on the previous page that would be used on the show.html page.

    I don't know if I was able to explain this in the most easily understandable way, but please ask more questions if my explanation was unclear ) Turns out it was pretty easy:

    The main problem from my solution below is memory issues from creating a vast amount of webviews

    Old Answer: for(var i =0; i 

           var webView = new steroids.views.WebView({location:"/views/cars/show.html?        id="+id,id:id});
console.log(webView);
webView.preload({}, {
onSuccess: function() {
//steroids.layers.push(webView);
console.log('working');
 }
});
}

    Then with another function call a webview with the same id:

      $scope.open = function(id) {

var webView = new steroids.views.WebView({location:"/views/cars/show.html?id="+id,id:id});
steroids.layers.push(webView);
};