https://github.com/rodydavis/lit-native

Example of how to embed a Lit web component into native platforms.
https://github.com/rodydavis/lit-native

android hybrid-app ios lit macos native pwa webview

Last synced: 17 days ago
JSON representation

Example of how to embed a Lit web component into native platforms.

• Host: GitHub
• URL: https://github.com/rodydavis/lit-native
• Owner: rodydavis
• License: other
• Created: 2021-06-17T01:53:00.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-21T19:00:29.000Z (about 3 years ago)
• Last Synced: 2024-10-03T07:43:01.870Z (about 1 month ago)
• Topics: android, hybrid-app, ios, lit, macos, native, pwa, webview
• Language: Swift
• Homepage: https://rodydavis.github.io/lit-native/
• Size: 1.14 MB
• Stars: 41
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-lit - Lit Native - Reuse Lit web components on native platforms. (Examples)

README

        
# Lit Native

Reuse lit web components on native platforms.

[Online Demo](https://rodydavis.github.io/lit-native/)

## Supported Platforms

- iOS

- MacOS

- Android

- Web

## Getting Started

1. `npm run install`

2. `npm run build`

3. Open target folder (i.e. ios, android)

4. Run project

## Background

When you build and ship your site with web components you may want to reuse the self contained views in more places.

This does not "convert my site to an app" but rather let you recompose the app on the native side using native navigation structures and the web components for the views and content.

The content is fast and is loaded offline, there is no node js or js runtime for a bridge. The web view communicates directly with the native code on the platform. The native code can communicate back to the webview and this is done using events.

The idea is to progressively enhance your application by adding functionality where the events can be handled (i.e. in app purchase, push notifications).

This also unlocks the possibility of using WebGL for 3D applications or sandbox your app and only explicitly supporting the events you write.

The downside is the knowledge required for the native platforms (kotlin/swift) but the benefits are no framework, no dependencies and freedom to compose the app however needed.

## Screenshots

![](/screenshots/ios.png)

![](/screenshots/macos.png)

![](/screenshots/android.png)