Make your sveltekit app hybrid in minutes

Published: 2023-01-18

Today I published a new project on Github 🎉, it’s called miniflow you can visit it here. miniflow.

What it does is listen to route changes in sveltekit and does native navigation transitions automatically, you can also add configurations from your +page.js files to create stuff like tabbars, choose your icons and so on. An important not is that eventhough each route is pushed and popped to the stack a single webview is used the majority of the time, which means it doesn’t need to reload that and the navigation is almost instant. A few quirks here that I mention a bit further down.

It’s still very early but the idea works very well and makes the app feel native directly.

The API for how to use it is still being defined but for now it looks like this

Example usage

/src/routes/+layout.svelte

import { navigating, page } from '$app/stores';

$: if($page) n($page)

function n(p){
    let n = $navigating

    if(typeof window !== 'undefined'){
        let msg = {
            from: n?.from.route.id || '', 
            to: n?.to.route.id || '',
            route: p.data,
            type: n?.type || 'initial'
        }
        if(window?.webkit?.messageHandlers?.myMessage){
            webkit.messageHandlers.myMessage.postMessage(msg)
        }      
    }
}

Then in your routes you can pass specific configurations. src/routes/example/+page.js

Navbar with back chevron:

export async function load() {
    return {
        app: {
            type: 'plain',
            nav: {
                left: {
                    action: 'history.back()',
                    image: 'chevron-left.png',
                    title: ''
                }
            }
        }
    };
};

Or for tabs:

export async function load() {
    return {
        app: {
            type: 'tabs',
            nav: {
                left: {
                    action: '',
                    image: 'chevron-left.png',
                    title: ''
                }
            },
            tabs: [
                {
                    title: '',
                    icon: 'icon.png',
                    url: 'home'
                },
                {
                    title: '',
                    icon: 'cog.png',
                    url: 'settings'
                }
            ]
        }
    }
}

What’s next

There are a lot of things that can be improved and worked on especially on the Android side, and as I plan to use this myself for several projects I intend to do it as soon as possible.

Things like

• Being able to handle a remote PWA to make the app also work in offline mode.
• When opening modals a new WebView is created because it can’t be shown in two places at once (but I think this can be solved with some creative ideas)
• Make sure theres a default view even if you don’t pass anything from that specific route
• A well defined API for how things are defined.
• On android the Back and Home functionality isn’t good at all at the moment.
• Probably many more things :) but we are still very early here!

Be sure to try it and let me know what you think! 👍