angular – copy to clipboard feature

We all came across this kind of feature – copy to clipboard.

Basically, the aim of this feature is to help the end user to quickly copy some text to clipboard. Instead of selecting particular text and clicking keyboard shortcut for copying text, some websites will provide us a icon to simplify the task.

Once we click that icon or button, the required text will get copy into the clipboard.

I used copy to clipboard option most of the time in Github,

And that’s the base story.

Why?

Few months back, I was supposed to implement the same feature in one of my angular application.

I’m aware that how to do this feature in plain JavaScript. The typical copy function will look like the below snippet

But I hesitated to follow the same structure.

Analyzed existing npm packages

I have gone through various npm packages for copy clipboard with following features expectation in mind

  • Copy icon should get automatically created
  • Selection & Copy function should be generic
  • The code should reused and light weight
  • Minimal effort to implement

Most of the npm plugins available didn’t fulfilled my expectation.

The popular plugin expected the developer to create and pass the text which needs to copied to the copy to clipboard function.

For me, this looks weird!

If a paragraph is having 100 lines, sending those entire text to a plugin doesn’t make sense to me. So I decided to create a angular directive based on my expectation.

Later, I published it as a separate npm package. And the package name is

angular-clipboard-auto

How it works?

Installation

To install this library, run:

$ npm install angular-clipboard-auto --save

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install angular-clipboard-auto

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
// Import your library
import { ClipboardModule } from 'angular-clipboard-auto';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
 
    // Specify your library as an import
    ClipboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
 
<!-- Add attribute appCopy in your html code -->
 
<input appCopy type="text" #text1 value="hello world">
 
<!-- And refer font awesome in your index.html to view copy symbol -->
 
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

That’s it!

TLTR;

All we have to do is

  • Add appCopy as attribute in text field HTML
  • Import fontawesome css

The copy icon will automatically get created next to your input field and you can use the feature right away.

The npm package will take care of all the background task seamlessly.

And also you can find the working copy of angular application in following path

https://stackblitz.com/edit/angular-clipboard

Sample snippet of HTML block

If you feel the implementation looks like, feel free to star ⭐️ the repository in GitHub and share with your friends.

Happy Coding!

Progressive Web Apps – Web App Manifest

The web app manifest is a simple JSON file that gives you, the developer, the ability to control how your app appears to users in areas where they would normally see apps in mobile devices.

Screenshot_20180821-000049

 

Web app manifests are part of a collection of web technologies called progressive web apps, which are websites that can be installed to a device’s homescreen without an app store, along with other capabilities like working offline and receiving push notifications.

And, more importantly, how it behaves when it’s launched from the home screen.

Installs to the homescreen

When a user clicks “Add to homescreen”, they will see the app being added on the homescreen.

At a minimum, the manifest must contain the name of the app and a short_name.

The short_name is used on the home screen and in other places where there is limited space.

It also needs the start_url, the URL the app should open when launched from the home screen.

Defining the manifest metadata

{
"short_name": "Pandiyan",
"name": "Pandiyan Murugan",
"icons": [{
"src": "/img/portrait_small.jpg",
"type": "image/jpg",
"sizes": "192x192"
},
{
"src": "/img/portrait.jpg",
"type": "image/jpg",
"sizes": "512x512"
}
],
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6"
}

Make sure, the page you specify is cached as part of the app shell. Otherwise, you won’t get the benefits of a cached app shell and your app won’t work offline.

One quick tip.

To track the number of users who are launching your app from their home screen, you can add a query string to the end of your URL.

And use any analytics to track launches, with that query string.

But don’t forget to ensure that you’ve cached the URL with the query string, in your service worker.

Adding icons and Splash screen color

Finally, we need to provide a set of icons for things like the home screen icon and the tab switcher, and splash screen.

The icons parameter takes an array of icons and must include the source, the size of the icon, and the type.

For example, image/jpg.

I recommend providing eight icon sizes,

48 x 48, 96 bx 96, 128 bx 128, 144 x 144,

192 x 192, 256 x 256, 384 x 384 and 512 x 512.

Just make sure you have icons for 1x, 2x, 3x and 4x devices.

Chrome uses the 48 device independent pixel icons for the home screen icon and the tabs footer. And the 128 device pixel icons for the splash screen.

Those are the minimum requirements. But there are a few other helpful things that you should set in the manifest.

The background color, and theme color are used by the browser along with an icon, as part of the splash screen.

Shown the instant the web app is launched, until its first render. As we provide the splash screen color as blue in manifest. The splash screen, icon and short name is displayed while the browser is rendering the application. (http://pandiyan.cool)

Once the app is loaded, the theme color tells the browser, what color to display in the UI elements such as the address bar or the notification tray.

Display and orientation property give you control over how the app is displayed. For example, you can hide the address bar and the back and forward buttons, by setting “display”: “standalone”. Or if you’re building a game that works better in landscape, you can force landscape view by specifying, “orientation”: “landscape”.

Web apps will launch full-screen with no vestiges of a browser. The URL will not be present, nor will traditional browser actions such as bookmarking and navigation controls.

Linking the manifest

When you have created the manifest add a link tag to all the pages that encompass your web app:

<link rel="manifest" href="/manifest.json">

Manifest metadata in browser

To confirm whether the manifest is properly, we can use the chrome DevTools to view the manifest as below

(Switch to Application tab in the Chrome Dev Tools)

manifest

Happy Coding!