A showcase app for Ionic. Supercharged by Svelte and Vite.
A starter app for all Ionic UI elements - based on Ionic's List Starter
Install this starter:
git clone https://github.com/Tommertom/svelte-ionic-list-demo.git
cd svelte-ionic-list-demo
npm i
npm run dev
Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-list-demo
When using the online playground - make sure you pop-out the render window to see the demo in full size.
N.B. while the app works - the actual experience is not the same compared to the official version. The pages do not animate in the same way. If anyone knows how to resolve this, please let me know!
If you want to get started with Ionic, Svelte and Vite, just use one of the starters:
Blank demo
npx degit Tommertom/svelte-ionic-blank-demo svelte-ionic-blank-demo
Tabs demo
npx degit Tommertom/svelte-ionic-tabs-demo svelte-ionic-tabs-demo
Sidemenu demo
npx degit Tommertom/svelte-ionic-sidemenu-demo svelte-ionic-sidemenu-demo
Mystarter demo - taking photo with Capacitor
npx degit Tommertom/svelte-ionic-mystarter-demo svelte-ionic-mystarter-demo
List demo
npx degit Tommertom/svelte-ionic-list-demo svelte-ionic-list-demo
Conference demo - (sort of...check its README)
npx degit Tommertom/svelte-ionic-conference-demo svelte-ionic-conference-demo
When using the online playground - make sure you pop-out the render window to see the demo in full size.
And the official demo app - https://github.com/Tommertom/svelte-ionic-app
Main screen:
iPhone SE | Samsung S8+ |
---|---|
Detail screen:
iPhone SE | Samsung S8+ |
---|---|
To help you managing state of the service worker and the various events, a simple svelte store is provided for (lib/pwa.ts
). This store wraps the various events of the service worker in a readable store and a number of derived stores so you can easily listen to various events.
While most tutorials provide you the basics to do all these separately and in an "Hello world" fashion, having all in a store helps wiring things up to the UI across various places in the code.
The following derived stores are implemented:
needRefresh
:boolean
telling you if there is an update availableupdateObject
:undefined|UpdateObject
. When UpdateObject is provided, you can call its updateSWObject()
method to update the appofflineReady
:boolean
telling you all offline assets have been loadedregisterError
:any
- the error message when the registration of the service worker failedregistration
:undefined|ServiceWorkerRegistration
- the service worker registration object - when succesfullbeforeInstallPrompt
- undefined|BeforeInstallPromptEvent
- which you can use to fire the .prompt()
method to invoke the install prompt. N.B. this needs to happen right after an userevent (like button press)!All these props are also available via the pwaStatusStream
readable store.
This code uses Roxi's newest version of its router. See https://v3.ci.routify.dev/docs#guide to know more. By the time of this writing, this is actually still in beta. If you want to change router, please make sure you change the hooks in IonPage.svelte (part of $ionic/svelte/components/IonPage.svelte
).
Please refer to the README on the main repo - https://github.com/Tommertom/svelte-ionic-app