• PWA & offline availability
• Prefetching
• Preloading
• Bundling
• Plugins
• Nollup
• Documentation
• Roxi

Apologies

This post should have been published last month, but was delayed by the fact that I only wrote it today.

The 1.8 beta was released a month ago and is finally stable, AFAWK. If we don’t receive any critical bug reports in the next week, it will be released as stable. After 1.8, the next goals are Routify 2 and Roxi, our new framework.

To try the 1.8 beta, open your terminal and type:

npx @roxi/routify init --branch beta

Example of offline availability and prefetching of external assets

Both app and prefetched external data is available offline.

PWA, offline availability

Our 1.8 starter template comes with a service worker to cache all requests - local and external. After enabling the service worker (see how below), it will by default precache the entire app - excluding external assets - after the app has started. External assets are cached on request and considered fresh for 60 seconds. Beyond this duration, the stale cache is only used if the client or server is offline.

To enable the service worker, uncomment it in App.svelte. The service worker can be configured in src/sw.js

Service workers will only work on localhost and secure connections. To avoid stale data when developing, use a direct address like 127.0.0.1 or set up dev domain like dev.local in your hosts configuration. Service workers can be cleared in developer tools -> Application -> Clear storage.

Prefetching

The new prefetch helper lets you prefetch a page and all of its external assets. If you are using our service worker from the starter template, the request will be automatically cached. You can also configure your own caching strategies for external assets.

Prefetching provides a better experience for visitors with unstable connections. It can also alleviate slow APIs.

To prefetch a page and its external assets:

<script>
  import { prefetch } from '@roxi/routify'
  prefetch('/prefetch/this/page')
</script>

Prefetch can also be used in elements with href tags:

<a use:prefetch>Page with data</a>

To cache the external assets for 24 hours:

<a use:prefetch={{ validFor: 60 * 24 }}>Page with data</a>

Read more about prefetching here

• How to use prefetching - wip
• How it works - wip

Preloading

Preloads pages, but unlike prefetching, it does not prefetch external assets. If you want to manually handle how your app is cached, disable precacheAndRoute(files) in the service worker and instead use the preload helper to cache the components you want cached in the order you want them cached.

Preloading has no effect if the service worker is configured to cache the whole app.

To preload specific pages in specific order:

import { routes } from '@roxi/routify/tmp/routes'
routes
  //routes consists of the internal API. We want the public one
  .map(route => route.api)
  // we only want to preload components with custom metadata
  .filter(node => node.meta.preloadMePlz)
  // let's import the most important components first
  .sort((node, previousNode) => node.meta.myPriority - previousNode.meta.myPriority)
  // let's preload
  .forEach(node => node.preload())

Bundling

This is an old pre-1,8 feature, but was only recently documented.

By default pages and layouts are imported dynamically and individually. Bundling allows folders to be bundled into a single file to avoid request waterfalls.

For more information, see our bundling page.

Plugins

Plugins expose the inner pipeline of Routify, which lets add, remove or replace middlewares.

Plugins are still experimental.

How to write a plugins - wip

routify-plugin-frontmatter - The plugin that handles frontmatter on routify.dev

Nollup added to the Starter Template

Nollup is short for not-rollup and provides much faster development rebuilds. Without Nollup, changes to the routify.dev website takes about 3s to rebuild. With Nollup rebuilds takes about 100ms.

To use Nollup, run npm run dev:nollup.

Note that Nollup does not work with SSR in development mode. If you need to test SSR, you can still run npm run dev or npm run build -> npm run serve.

Big thanks to rixo and PepsRyuu for making this possible.

Documentation

The documentation has been updated with new entries:

• Guide
  • Starter Template
  • Prefetching
  • FAQ
• Helpers
  • $beforeUrlChange
  • $afterPageLoad
  • $isChangingPage
  • prefetch
  • queryHandler (child of $params)

Roxi

Development has finally begun on Roxi. Roxi will initially handle the responsibilities of the current starter template. From there, who knows…

That’s it for now

To play myself out I’ll leave you with a freshly recorded gif.

Jakob Rosenberg

Author of Routify and pathological routing enthusiast.

• Github
• Twitter