Onsen UI

localStorage can get cleared by mobile OSs, especially on iOS, when memory is running low.

I usually create a generic Storage JS class in my app, so I can abstract away the actual implementation of the storage. It has basic get and set functionality. In there you can check whether you are in browser or on device. Not ideal, but at least you can test it.

class Storage {
  get() {
    if(isCordova) {
      // save in SQL
    } else {
      // save in localStorage
    }
  }

  ...
}

Perhaps you could try WebSQL instead of localStorage for in browser, as long as it’s just for development? It’s deprecated now, so don’t use it in production, but if you’re just testing in Chrome, it would work.

Sorry about this. It’s caused by a bit of non-compliant CSS in the Onsen UI code. It works fine in browser, but causes the Theme Roller’s parser to break. It will be fixed in 2.10.4, to be released quite soon.

The breaking CSS was introduced in 2.10.2, so if you change the version to 2.10.1, the download will work.

This is dependent on the plugin itself. Cordova plugins can support the browser platform to allow for testing like this. I presume you are using cordova-sqlite-storage? From what I can see, that doesn’t currently have the browser platform. However, it looks like it could be on the way soon, according to their next release plan.

Onsen UI doesn’t have a specific element for scenarios like that. The presentation of a network request’s status can change from page to page, so it’s not advisable to have a global one. I’d suggest trying to implement this on a per-page level, which would be more user-friendly.

@skagget Sorry, there’s an issue with the theme roller for 2.10.2 and 2.10.3. It will be fixed in 2.10.4, to be released in the next day or two. In the mean time, you can select 2.10.1 and the download should work.

If you want URL-based routing, you should use Angular’s built-in router, and not use OnsNavigator at all. It is technically possible to use the two together, but not necessary. Angular’s router provides more advanced functionality than OnsNavigator, which is deliberately kept simple.

Thanks for the two examples, which made the issue easy to debug. The problem is with Vue Router rather than Onsen UI.

It is caused by the fact that Vue Router only saves the position of the body’s scroll bar. In your working example, the list scrolls the body, but in the second, it scroll’s the page’s content div. Vue Router does not get the scroll from this, and so it is not saved. Take a look at saveScrollPosition in vue-router.js, which is used in your example, and you will see why it does not work.

I guess you will need to save the scroll position yourself some other way. Unfortunately, I am not familiar enough with Vue Router to help you with that.

I’m not sure why this didn’t originally get a response. I haven’t used Enzyme, so I can’t be sure of what’s going on, but it seems to relate more generally to Web Components rather than Onsen UI. Perhaps look into whether Enzyme supports accessing a Web Component’s shadow DOM.

Onsen UI ships with both the unminified and minified versions of the code. From your reference to app.bundle.js it sounds like you’re using some build tool which is doing the minifying for you?

Thanks for the report. I can see the issue you are having, but I am not sure yet what is causing it. Unfortunately we have not had a lot of time to work on the React bindings recently so issues like this have take some time to look at. I will see if I can figure it out.