目录

MōBrowser 2.7.0

We’re happy to announce MōBrowser 2.7.0. In this release we add the ability to work with application URL schemes, custom protocols, native displays and more.

What’s new 

Application URL schemes 

You can associate your application with a custom URL scheme (e.g. myapp://) so that:

  • The operating system can launch or activate your app.
  • Other applications (browser, CLI, etc.) can open your app via a URL.
  • Your app can read and handle the incoming URL parameters (deep linking).

To handle the incoming URL, you can use the following API:

import { app } from '@mobrowser/api';

app.handle('openUrl', (url: string, queryParams: Record<string, string>) => {
  console.log('URL:', url, queryParams)
})

Custom protocols 

You can register and handle custom protocols using the Protocol API. When you register a custom protocol you are essentially telling your application:

Whenever this URL is used, route it through my code and let me decide what to return or do.

The framework then lets you:

  • intercept requests;
  • generate responses dynamically;
  • replace how resources are loaded.

The following example demonstrates how to register the app:// scheme and return a custom HTML document at app://home/ and a 404 for any other path.

import { protocol } from '@mobrowser/api';

protocol.handle('app', (request: Request) => {
  const path = new URL(request.url).pathname;
  if (path === '/home/') {
    return {
      statusCode: 200,
      mimeType: 'text/html',
      charset: 'utf-8',
      data: '<html><head><title>Home</title></head><body></body></html>',
    };
  }
  return {
    statusCode: 404,
    mimeType: 'text/plain',
    charset: 'utf-8',
    data: 'Not found',
  };
});

Custom protocols are useful when you want to:

  • Replace file:// with a secure app scheme
  • Intercept and control resource loading
  • Build a “backend inside your application”
  • Streaming & media handling

Displays 

You can now get the info about currently connected displays using the Displays API.

import { displays } from '@mobrowser/api';

for (const display of displays.all) {
  console.log('Display:', display.name || display.id)
  console.log('Primary:', display.isPrimary)
  console.log('External:', display.isExternal)
  console.log('Bounds:', display.bounds)
  console.log('Work area:', display.workArea)
  console.log('Resolution:', display.resolution)
  console.log('Scale factor:', display.scaleFactor)
}

Zoom 

You can now control zoom of a web page loaded in Browser using the Zoom API. Here’s how you can change zoom factor:

import { Browser, BrowserWindow } from '@mobrowser/api';

const win = new BrowserWindow()
const browser: Browser = win.browser

// Changing zoom factor.
browser.zoom.in()
browser.zoom.out()
browser.zoom.reset()
browser.zoom.setFactor(1.5) // 150%

// Disabling zoom.
browser.zoom.setEnabled(false)

Zoom factor will be applied to the currently loaded web page and associated with its host. It will be applied to all web pages with the same host. It is stored in the application data directory and restored when the application is launched again.

Improvements 

  • Do not show the speaker icon in the window title when the microphone is in use.
  • Prevent creating an empty default user data directory.
本页内容