Html5 lokale databank en kaarten op mobile device

[Brynnie]

Voor een html5 website die ook (even) offline moet kunnen blijven werken (gebruik op mobiele devices), ben ik aan het onderzoeken wat de mogelijkheden zijn van html5 local storage. Ik meende me te herinneren dat html5 ook sql-achtige mini-databases ondersteunt, maar ik zie door de bomen het bos niet meer. Welke technologie gebruik ik best?

http://html5doctor.com/introducing-web-sql-databases/
Obsolete?

https://github.com/kripken/sql.js
Lijkt een interessante optie
Last update on January 25 2017

http://caniuse.com/#search=Sqlite
Hier heten beide technieken hetzelfde en blijkt er slechts beperkte browserondersteuning (geen Firefox?)...

Wat ik me ook afvraag: als de gebruiker de site afsluit (sessie 1 wordt dus beëindigd), kan hij dan door terug naar de site te surfen (start sessie 2), de inhoud van de database uit sessie 1 nog benaderen? Of is die database ook stateless? Worden die gegevens bewaard op de lokale harde schijf van het device, of enkel in het werkgeheugen?

Daarnaast nog een extra vraagje: Ik gebruik momenteel de Google Maps API om op de site een kaart weer te geven waarop onder meer de positie van de gebruiker aangegeven is (watchposition). Kan ik een deel van de map bij aanvang van de sessie downloaden naar het toestel, om zo het dataverkeer bij het verdere gebruik van de site te beperken (grootste deel van de activiteit gebeurt op 1 webpagina). En ook: werkt Google Maps nog correct als er geen internetverbinding is en enkel moet gerekend worden op de gpsmogelijkheden van het mobiele device (enableHighAccuracy: true)?

Veel vragen in 1 post. Hopelijk komen er veel antwoorden in veel posts...

[Verwijderd]

Brynnie schreef op vrijdag 27 januari 2017 @ 23:50:
Voor een html5 website die ook (even) offline moet kunnen blijven werken (gebruik op mobiele devices),

Kijk eens naar Progressive Web Apps.

ben ik aan het onderzoeken wat de mogelijkheden zijn van html5 local storage. Ik meende me te herinneren dat html5 ook sql-achtige mini-databases ondersteunt, maar ik zie door de bomen het bos niet meer. Welke technologie gebruik ik best?

Voor opslag vanuit JS wordt meestal localStorage (of sessionStorage) gebruikt. Beide zijn een key-value store, waar de value alleen een string kan zijn, dus als je een object op wil slaan moet je JSON.stringify en JSON.parse gebruiken. WebSQL is al een tijdje deprecated, maar er is nu wel IndexedDB.

[q-enf0rcer.1]

Wellicht is een combinatie van PouchDB(offline) en CouchDB(online) interessant. Zodra je online komt kun je de PouchDB dan actueel maken via replication met de laatste versie in CouchDB.

Zie: https://pouchdb.com/

Om je andere vraag te beantwoorden:

Google Maps via het web vereist internet, er is mogelijk wel een alternatief: OpenStreetMap, bijvoorbeeld via Leaflet: https://github.com/mWater/offline-leaflet-map

[ Voor 32% gewijzigd door q-enf0rcer.1 op 28-01-2017 13:22 ]

[Brynnie]

Bedankt voor de feedback!

De website zal meestal gebruikt worden in Safari op een iOS toestel, en daar blijkt de ondersteuning voor de (zeer interessante) progressive webapps op een zeer laag pitje te staan.

Ik veronderstel dat dat is omdat Apple zijn eigen (cashcow) appstore niet wil laten kannibaliseren door progressive webapps...

Edit: typo.

[b2vjfvj75gjx7]

Brynnie schreef op vrijdag 27 januari 2017 @ 23:50:
Voor een html5 website die ook (even) offline moet kunnen blijven werken (gebruik op mobiele devices), ben ik aan het onderzoeken wat de mogelijkheden zijn van html5 local storage. Ik meende me te herinneren dat html5 ook sql-achtige mini-databases ondersteunt, maar ik zie door de bomen het bos niet meer. Welke technologie gebruik ik best?

http://html5doctor.com/introducing-web-sql-databases/
Obsolete?

https://github.com/kripken/sql.js
Lijkt een interessante optie
Last update on January 25 2017

http://caniuse.com/#search=Sqlite
Hier heten beide technieken hetzelfde en blijkt er slechts beperkte browserondersteuning (geen Firefox?)...

Wat ik me ook afvraag: als de gebruiker de site afsluit (sessie 1 wordt dus beëindigd), kan hij dan door terug naar de site te surfen (start sessie 2), de inhoud van de database uit sessie 1 nog benaderen? Of is die database ook stateless? Worden die gegevens bewaard op de lokale harde schijf van het device, of enkel in het werkgeheugen?

Daarnaast nog een extra vraagje: Ik gebruik momenteel de Google Maps API om op de site een kaart weer te geven waarop onder meer de positie van de gebruiker aangegeven is (watchposition). Kan ik een deel van de map bij aanvang van de sessie downloaden naar het toestel, om zo het dataverkeer bij het verdere gebruik van de site te beperken (grootste deel van de activiteit gebeurt op 1 webpagina). En ook: werkt Google Maps nog correct als er geen internetverbinding is en enkel moet gerekend worden op de gpsmogelijkheden van het mobiele device (enableHighAccuracy: true)?

Veel vragen in 1 post. Hopelijk komen er veel antwoorden in veel posts...

Het beste werk je gewoon platform agnostisch, dus niet voor 1 marketing merkje als Apple.

Zelf heb ik vele apps gemaakt die via local storage alles opslaan, en - bij gebrek aan internet - die storage als fallback voor de data gebruiken.

Houd er wel rekening mee dat de storage per client gemiddeld max. 5mb is / tot 10mb.

Checken wat jou device ondersteunt, kan hier - http://jsfiddle.net/53xcc4LL/

Meer uitleg vind je hier - http://stackoverflow.com/...ze-of-localstorage-values

De data sla ik gewoon op in JSON format, dat je altijd weer kan parsen naar bruikbaar formaat (via jQuery clientside of PHP serverside), dus niet echt SQL - dat is way overdone voor een paar mb aan textuele data.

[RagingPenguin]

b2vjfvj75gjx7 schreef op vrijdag 3 februari 2017 @ 21:08:
De data sla ik gewoon op in JSON format, dat je altijd weer kan parsen naar bruikbaar formaat (via jQuery clientside of PHP serverside), dus niet echt SQL - dat is way overdone voor een paar mb aan textuele data.

Waarom zou je daar een grote libraryof een server-side taal voor nodig hebben? JSON.stringify en JSON.parse is alles wat je nodig hebt.