DEV Community: ChattyWebviews

How to Implement a Cross-Platform Login Screen with Angular within a WKWebView

Teodor Dermendzhiev — Wed, 26 Jul 2023 13:23:31 +0000

TLDR;

You can develop cross-platform components for your mobile apps using webviews without necessarily having to rely on hybrid frameworks.

Introduction

In many cases, especially when you're building a native app, you might want to have a cross-platform authentication flow. This could be because you want to maintain the native performance and feel for the rest of your app, but need a quick and efficient way to handle authentication.

You could go for a full-fledged hybrid app framework like Ionic or React Native, but that might be overkill if you're only looking to make a few parts of your app cross-platform. Plus, transitioning to a hybrid app framework comes with its own set of challenges, like learning a new programming language or dealing with the nuances of a different development environment. Or you might just have a web developer to help you with few screens...

This is where webviews come in. By creating a login screen using a webview, you can write the code once with a framework you (or whoever is writing the component) are already familiar with (Angular, React, Vue or whatever) and use it across multiple platforms. It's a lightweight solution that doesn't require a full hybrid app framework, making it perfect for simpler features like a login screen.

And to make things even easier, we're going to use an open-source library I created called ChattyWebviews. It's designed to facilitate communication between webviews and native classes, making it a breeze to integrate webview-based features into your native apps. If you find the article useful, consider giving it a star, so I can continue working on it - https://github.com/ChattyWebviews/ChattyWebviews.

Creating the Webview Login Screen

For the purpose of this tutorial, we'll use Ionic to create our login screen. Ionic is a popular framework for building cross-platform applications using web technologies. It's a great choice for our login screen because it allows us to write our code with javascript and have the native iOS or Android look.

First, let's install Ionic if you haven't done so already:

npm install -g @ionic/cli

Next, create a new Ionic project:

ionic start LoginDemo blank --type=angular

Navigate to the new project directory:

cd LoginDemo

Now, let's create a simple login form. Open src/app/home/home.page.html and replace its content with the following:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Login
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <form (ngSubmit)="onSubmit()" #loginForm="ngForm">
    <ion-item>
      <ion-label position="floating">Username</ion-label>
      <ion-input type="text" ngModel name="username" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" ngModel name="password" required></ion-input>
    </ion-item>
    <ion-button expand="full" type="submit" [disabled]="!loginForm.valid">Login</ion-button>
  </form>
</ion-content>

In src/app/home/home.page.ts add the onSubmit() method:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  onSubmit() {
      //here we will send the message to the native class
  }

}

This creates a simple login form with fields for username and password. The (ngSubmit) directive is an Angular feature that allows us to run a function when the form is submitted.

In the next section, we'll look at how to handle the form submission and communicate with our native app using ChattyWebviews.

Handling Form Submission with ChattyWebviews

Now that we have our login form, we need to handle the form submission. When the user submits the form, we want to send the username and password to our native app. This is where ChattyWebviews comes in.

First, install ChattyWebviews in your Ionic project:

npm install @chatty-webviews/js

Then open the AppComponent and attach the messaging service:

import { Component } from '@angular/core';
import { attach } from '@chatty-webviews/js';

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent {

    constructor() {
        attach();  
    }
}

Next, open src/app/home/home.page.ts and replace its content with the following:

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { sendMessage } from '@chatty-webviews/js';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild('loginForm') loginForm!: NgForm;

  constructor() {}

  onSubmit() {
    if (this.loginForm.valid) {
      const { username, password } = this.loginForm.value;
      sendMessage('login', { username, password });
    }
  }
}

In this code, we're importing sendMessage from @chatty-webviews/js. We're also defining an onSubmit method that gets called when the form is submitted. In this method, we're sending a message to our native app with the username and password.

Setting Up the Native App

We need to set up our native app to display the login screen and handle messages from the webview. We'll be using SwiftUI for this.

Before writing the code, we need to do few things. First, add the ChattyWebviews' SPM package by going to File->Add Packages and pasting the repository url:

https://github.com/ChattyWebviews/ChattyWebviews

You will also need to build the Ionic web app package by running ionic build. When the build is done, drag the www folder inside the Xcode project:

Note: It's important to select Create folder references. If you want the package to be automatically updated after every build, leave Copy items if needed unchecked.

Here's the code for our main view, ContentView:

struct ContentView: View {
    @State private var showingSheet = false

    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Button("Login") {
                        showingSheet.toggle()
                    }
                    .sheet(isPresented: $showingSheet) {
                        SheetView()
                    }
        }
        .padding()
    }

    init(showingSheet: Bool = false) {
        self.showingSheet = showingSheet
        self.setupModules()
    }

    func setupModules() {

        let module = CWModule(name: "www", location: .Resources)
        WebViewFactory.initModules(modules: [module])
    }
}

In this code, we're creating a SwiftUI view with a button that displays a login screen when clicked. The login screen is a SheetView, which we'll define next.

Creating the Webview Login Screen

Next, we'll create the SheetView that displays the login screen. This view is a UIViewControllerRepresentable, which means it's a wrapper for a UIKit view controller that can be used in SwiftUI.

Here's the code for SheetView:

struct SheetView: UIViewControllerRepresentable, CWMessageDelegate {
    typealias UIViewControllerType = CWViewController
    @Environment(\.dismiss) var dismiss

    func controller(_ controller: ChattyWebviews.CWViewController, didReceive message: ChattyWebviews.CWMessage) {
        print(message)
        dismiss()

    }

    func makeUIViewController(context: Context) -> ChattyWebviews.CWViewController {
        let module = WebViewFactory.getModules()[0]
        let scheduleVC = WebViewFactory.createWebview(from: module, path: nil)
        scheduleVC?.messageDelegate = self
        return scheduleVC!
    }
}

In this code, we're creating a CWViewController that displays the login screen. We're also setting up a message delegate to handle messages from the webview. When a message is received, we print it and dismiss the login screen.

Handling Messages in the Native App

Finally, we need to handle the messages that we receive from the webview. This involves setting up a CWMessageDelegate in our native app.

Here's the code for the message delegate:

extension SheetView: CWMessageDelegate {

    func controller(_ controller: ChattyWebviews.CWViewController, didReceive message: ChattyWebviews.CWMessage) {
        print(message)
        dismiss()

    }
}

In this code, we're defining a method that gets called when a message is received from the webview. We're printing the message and dismissing the login screen.

Fetching Login Credentials in Native Code

In our SheetView class, we have already set up a CWMessageDelegate to handle messages from the webview. When a message is received, the controller(_:didReceive:) method is called. This is where we can fetch the login credentials.

Here's how we can modify this method to fetch the login credentials:

func controller(_ controller: ChattyWebviews.CWViewController, didReceive message: ChattyWebviews.CWMessage) {
    if message.topic == "login" {
        let credentials = message.body as? [String: String]
        let username = credentials?["username"]
        let password = credentials?["password"]
        print("Username: \(username ?? ""), Password: \(password ?? "")")
    }
    dismiss()
}

In this code, we're checking if the message topic is "login". If it is, we're fetching the username and password from the message body and printing them, then dismissing the modal:

Handling Login in Native Code

Now that we have the login credentials, we can handle the login in our native code. This could involve validating the credentials, fetching user data from a server, etc.

Here's an example of how you might handle the login:

func handleLogin(username: String, password: String) {
    // Validate the credentials
    guard validateCredentials(username: username, password: password) else {
        print("Invalid credentials")
        return
    }

    // Fetch user data from server
    fetchUserData(username: username) { userData in
        // Handle user data
    }
}

In this code, we're validating the credentials and fetching user data from a server. The validateCredentials(username:password:) and fetchUserData(username:completion:) methods are not defined here, as their implementation would depend on your specific use case.

Conclusion

With this setup, you can create a simple login screen using a webview and handle the login in your native code. This approach is quick and easy, and it doesn't require a full hybrid app framework like Capacitor. It also allows you to reuse your web code across different platforms, which can save you a lot of time and effort.

Microfrontends in mobile apps

Teodor Dermendzhiev — Wed, 19 Jul 2023 11:40:09 +0000

Microfrontends: Breaking Down the Monolith

Microfrontends take the concept of microservices and apply it to the frontend. Instead of a monolithic frontend where all components are tightly coupled, microfrontends break the UI into smaller, independent pieces. Each microfrontend corresponds to a specific feature or business domain and can be developed, tested, and deployed independently.

This approach is particularly beneficial for small teams or startups. It allows for faster iterations on individual features, reduces the scope of each update, and leads to a more agile development process.

For instance, consider an e-commerce app. With a microfrontend approach, the product listing, shopping cart, and user profile could each be a separate microfrontend, developed and deployed independently. This reduces the risk of unexpected side effects and makes each deployment less risky.

Webviews: A Bridge Between Native and Web

Webviews are a powerful tool that can be used to implement a microfrontend architecture in mobile apps. They are essentially mini web browsers embedded within your app, capable of rendering HTML, CSS, and JavaScript. This means you can develop individual features of your app as mini web apps and then integrate them into your native app using webviews.

Let's go back to our e-commerce app example. Suppose you want to develop the product listing, shopping cart, and user profile features separately. Each of these features can be developed as a separate web app by a web developer. The web developer can use their favorite framework (Angular, React, Vue) to create the UI and logic for these features. Once developed, these web apps can be integrated into the native app using webviews.

This approach has several benefits:

Code Reusability: Since web technologies are platform-agnostic, the same code can be used for both iOS and Android apps. This can significantly reduce the development time and effort.
Faster Iterations: Web developers can quickly iterate on the web app features without needing to understand the intricacies of native app development. This can lead to faster feature development and bug fixes.
Resource Optimization: If you're a small team or a startup, you might not have the resources to hire separate iOS and Android developers. By using webviews, you can leverage your existing web development skills to create mobile apps.

Think of it like having multiple smaller Ionic apps within your native app. Ionic serves the UI in a webview, much like what I'm proposing here. The difference is that instead of having one large Ionic app, you have multiple smaller web apps, each serving a specific feature of your app.

Introducing ChattyWebviews

ChattyWebviews is a framework designed to streamline the communication between webviews and native classes in mobile apps.

Here's a simple example of how you can use ChattyWebviews to send a message from a webview to a native class:

// In your webview
subscribe('update-items', (msg: any) => {
    this.itemsList = msg.items;
})

sendMessage("get-items");

And here's how you can listen for this message in your native class:

// In your native class (iOS)
func controller(_ controller: CWViewController, didReceive message: ChattyWebviews.CWMessage) {

        if message.topic == "get-items" {
            let verbs = itemsDataStore.getItems()
            let result = ItemsResult(items:items)
            let message = CWMessage(topic: "update-items", body: result.toDictionary())
            try? controller.sendMessage(message)
        }

    }

ChattyWebviews also supports Over-The-Air (OTA) updates. This means you can update the content of your webviews remotely, without needing to push an update through the app store.

Using webviews to create microfrontends in our mobile apps can make our development process more efficient. It allows us to reuse code and iterate faster. ChattyWebviews, while still in its early stages and currently only supporting iOS (Android support is coming soon), can be a helpful tool in this approach.

I hope this post has piqued your interest. I'm looking forward to hearing your thoughts and feedback. Happy coding!

Over-the-air updates for WKWebView content

Teodor Dermendzhiev — Tue, 18 Jul 2023 12:03:44 +0000

ChattyWebviews is a simple tool based on Firebase to help you get more from your webviews

Webviews enable developers to reuse code across different platforms, leading to significant time and resource savings. Major companies like Netflix have successfully leveraged webviews in their apps, using web technologies to deliver consistent user experiences across iOS and Android.

Netflix, for instance, initially used webviews to rapidly experiment with and iterate on their user interface. As Jordanna Kwok, Senior Software Engineer at Netflix, explains in an interview with Hacking with Swift:
"Webviews allowed us to A/B test large changes and get almost immediate feedback."

This ability to move fast and adapt quickly is especially crucial for startups and new product development, where the landscape is constantly changing and speed to market can be a key differentiator.

One of the key advantages of webviews is the ability to update the JavaScript code remotely, allowing for real-time updates to the webview content. This is where Over-the-Air (OTA) updates come into play, enabling developers to push updates directly to the webview components of an app, bypassing the traditional app store approval process.

In this blog post, I'll introduce you to ChattyWebviews, a simple framework that bridges the gap between web and native environments. ChattyWebviews facilitates seamless communication between webviews and native classes, making it an good solution for developers aiming to maintain agility in their app updates and promote UI reusability across platforms.

ChattyWebviews is not an alternative to native development or any cross-platform framework. It can be used alsongside any of them.

I'll guide you through the process of implementing OTA updates for the webview components of a standard iOS app using ChattyWebviews. We'll create a simple app with a login screen living in a webview. This login screen will not only be reusable between iOS and Android but also updatable using ChattyWebviews' OTA update feature.

So, let's dive in and explore how you can enhance your cross-platform app development process with Chatty Webviews and OTA updates.

We'll be using a simple app called CWLoginDemo for this purpose. You can create this app from scratch, or you can clone the project directly from here.

The CWLoginDemo app consists of a home screen with a login button. When the login button is tapped, a modal screen is presented, displaying the login page. This login page is not a typical iOS view, but an Angular app running inside a webview.

The login page we're using is a modified version of a project by Jason Watmore. When the user enters their username and password into the fields on the login page, the native class will receive the message, process the login, and close the modal.
Let's get into the details.

Setting up the CWLoginDemo App

Start by creating a new iOS app project and name it CWLoginDemo. Alternatively, you can clone the project directly from here. The app should consist of a home screen with a login button.

import SwiftUI
import ChattyWebviews

struct ContentView: View {
    @State private var showingSheet = false


    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Button("Login") {
                        showingSheet.toggle()
                    }
                    .sheet(isPresented: $showingSheet) {
                        SheetView()
                    }
        }
        .padding()
    }

    init(showingSheet: Bool = false) {
        self.showingSheet = showingSheet
        self.setupXPModules()
    }

    //1
    func setupXPModules() {
        let module = CWModule(name: "demo", location: .Resources)
        WebViewFactory.initModules(modules: [module])
    }
}

struct SheetView: UIViewControllerRepresentable, CWMessageDelegate {

    typealias UIViewControllerType = CWViewController

    @Environment(\.dismiss) var dismiss

    //3
    func controller(_ controller: ChattyWebviews.CWViewController, didReceive message: ChattyWebviews.CWMessage) {
        print(message)
        dismiss()

    }

    //2
    func makeUIViewController(context: Context) -> ChattyWebviews.CWViewController {
        let module = WebViewFactory.getModules()[0]
        let scheduleVC = WebViewFactory.createWebview(from: module, path: nil)
        scheduleVC?.messageDelegate = self
        return scheduleVC! 
    }

    func updateUIViewController(_ uiViewController: ChattyWebviews.CWViewController, context: Context) {

    }

}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

First we need to initialize the web module with the name of our angular project contents (inside it's dist folder).
The makeUIViewController method returns a UIViewController, so we create the container of our webview app using WebViewFactory.createWebview. Remember to be careful with force unwrapping.
Above we set the messageDelegate property to self so the SheetView struct receives messages from the login webview. Here we just print the message and dismiss it.

Of course, for this to work you will have to install ChattyWebviews SDK. For the sake of this tutorial I used SPM, but you can also use Cocoapods or copy-paste the source code.

Integrating the Webview Login Page

The login page is an Angular app that we'll run inside a webview. When the login button on the home screen is tapped, a modal screen with the webview login page should be presented.

First, install the chatty-webviews-js package:

npm install @chatty-webviews/js --save

When you have it installed, don't forget to call attach() method:

import { Component } from '@angular/core';
import { attach } from '@chatty-webviews/js';

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent {

    constructor() {
        attach();  
    }
}

Then in login.component.ts I replaced the this.accountService.login call with sendMessage(). Here is the entire component:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { sendMessage } from '@chatty-webviews/js';

import { AlertService } from '../_services';

@Component({ templateUrl: 'login.component.html' })
export class LoginComponent implements OnInit {
    form!: FormGroup;
    loading = false;
    submitted = false;

    constructor(
        private formBuilder: FormBuilder,
        private alertService: AlertService
    ) { }

    ngOnInit() {
        this.form = this.formBuilder.group({
            username: ['', Validators.required],
            password: ['', Validators.required]
        });
    }

    // convenience getter for easy access to form fields
    get f() { return this.form.controls; }

    onSubmit() {
        this.submitted = true;

        // reset alerts on submit
        this.alertService.clear();

        // stop here if form is invalid
        if (this.form.invalid) {
            return;
        }

        this.loading = true;
        sendMessage("login-successful", {username: "Teodor"});
    }

}

When the user enters their username and password into the fields on the login page, the native class will receive the message. This message should trigger the processing of the login and the closing of the modal.

Now build the project:

npm run build

When the build completes drag the project folder from inside the dist directory to your Xcode project. It's important to select "Create folder references". If you leave "Copy items if needed" unchecked you won't need to drag the package folder after every build, but it won't be in the Xcode project repository, so decide based on your project structure.

Now, if you run the app and tap on the Login button you should see this:

Setting Up Your Environment for Over-the-Air Updates

Before we dive into the process of implementing over-the-air updates, we need to set up our environment. This involves creating a Firebase project and deploying the backend function to Firebase. Here's how to do it:

Step 1: Create a Firebase Project

First, you'll need to create a Firebase project.

As part of this process, make sure to enable authentication with email/password, storage, and the Firestore database. Please note that you'll need to have billing enabled to deploy the functions.

Step 2: Clone the Backend Repository

Next, clone the backend repository from here. Once you've cloned the repository, run npm install to install the necessary dependencies.

Step 3: Install Firebase Tools

If you haven't installed Firebase tools yet, you can do so with the following command:

npm install -g firebase-tools

Then, log in to Firebase using the command:

firebase login

Step 4: Deploy Functions to Firebase

Now, it's time to deploy the functions to Firebase. You can do this with the following command:

firebase deploy - only functions - project <your-project-id>

You can find your project ID by running:

firebase projects:list

If you encounter an error that says "Error: There was an error deploying functions" it's likely related to your Node.js version. Ensure you're using Node.js 16 (or the same version as specified in the functions' package.json):

"engines": {
 "node": "16"
}

After you've deployed the function successfully, copy it's url from the function's dashboard:

With these steps, you've successfully set up your environment for over-the-air updates. In the next section, we'll dive into how to implement these updates in your iOS app.

Pushing the updates

Now that we have our environment set up, we can proceed to implement over-the-air updates. This process involves using the ChattyWebviews CLI and setting up some environment variables on your machine.

Step 1: Install ChattyWebviews CLI

The ChattyWebviews CLI is a command-line interface that simplifies the process of managing your ChattyWebviews projects. To install it, run the following command:

npm install -g @chatty-webviews/cli

Step 2: Set Up Environment Variables

Next, you need to set up some environment variables on your machine. These variables will store the configuration details of your Firebase project. Here's how to do it:

On a Unix-based system like Linux or macOS, you can set environment variables using the export command:

export FIREBASE_API_KEY="<your_api_key>"
export FIREBASE_AUTH_DOMAIN="<your_auth_domain>"
export FIREBASE_PROJECT_ID="<your_project_id>"
export FIREBASE_STORAGE_BUCKET="<your_storage_bucket>"
export FIREBASE_APP_ID="<your_app_id>"

On Windows, you can use the set command:

set FIREBASE_API_KEY="<your_api_key>"
set FIREBASE_AUTH_DOMAIN="<your_auth_domain>"
set FIREBASE_PROJECT_ID="<your_project_id>"
set FIREBASE_STORAGE_BUCKET="<your_storage_bucket>"
set FIREBASE_APP_ID="<your_app_id>"

These commands set the environment variables for the current session only. If you want to set them permanently, you'll need to add these lines to your shell's startup file (.bashrc, .bash_profile, or .zshrc for Unix-based systems, or Environment Variables on Windows).

Replace <your_api_key>, <your_auth_domain>, <your_project_id>, <your_storage_bucket>, and <your_app_id> with your actual Firebase project details. You can get them by creating a web project from the Firebase console:

With the ChattyWebviews CLI installed and your environment variables set, you're now ready to push over-the-air updates to your app. First, tell ChattyWebviews more about your project by calling this command:

chatty init

It will ask you for email, password and the path to your package directory - in our case I pasted the absolute path to dist/demo.

Now go to login.component.ts and update something in the UI - e.g. replace the login button title with capital letters.

<button [disabled]="loading" class="btn btn-primary">
   <span *ngIf="loading" class="spinner-border spinner-border-sm me-1"></span>
   LOGIN
</button>

Build the package:

npm run build

And push the update to Firebase:

chatty ci release --version 1.0.1

Before testing the update you need to add few things to the setupXPModules:

func setupXPModules() {
        ModuleSynchronizer.updateCheckUrl = "<your-checkForUpdate-url>"

        let module = CWModule(name: "demo", currentHash: "", location: .Resources)
        WebViewFactory.initModules(modules: [module])
        ModuleSynchronizer.shared.updateIfNeeded(module: module, email: "tester@test.com", appId: "cw-login-demo") { success in
            print("Module \(module.name) updated! Please restart the app.")
        }
    }

When you run the app the login screen will be updated.