Did "Clubhouse" ruined Clubhouse?

Shashwat Verma — Wed, 03 Mar 2021 19:40:39 +0000

EDIT: clubhouse forced to changed their name! Because of this

Introduction

A but a behavior I've noticed relating to fear of missing out (FOMO) and why this might be the best example.

You might be knowing about the voice-audio chat app called "Clubhouse", there's a lot of hype created around it, and evidently, it has a standout in the market even though a lot of the apps/websites with the same concept exist eg. discord.

People like Elon Musk, Joe Rogan, Naval Ravikant, etc tweeted about this app since then it has garnered a lot of traction. This is what Zero dollar marketing looks like. The screenshot says it all.

Why as a developer I'm talking about this? the answer is pretty simple we are creators; As creators, we must study the market and behavior of people reacting to it so that we learn from other's experiences.

FOMO

There already existed an app, with the same name clubhouse due to this they are now having a hard time. Android users flooded the app with negative reviews. FOMO comes into play, all the android users downloaded the app having the same name clubhouse. Since the one on the play store is a project management platform. The users are thrashing the app thinking that is the Social app Clubhouse.

While we download/install most of the app from Google Playstore (android) and quite frequently install the wrong application. In seconds people rate it down, as same in the case with project management tool Clubhouse.

Android has a large user base in contrast to iOS. Google related searches -

Having a good rating earlier, we can see the rise in the number of 1-star ratings below.

Without even reading about what it does people installed it and now rating it down. Some screenshots to prove this -

Rescue

However, some people came for rescue.

Nonetheless, it is not going to having a huge impact. They need to take some steps in order to stop this.

Conclusion

EDIT: clubhouse forced to changed their name!

I think now they have inhibited users from registration, as they are looking for something else, this proves people are oblivion. This app's rating is ruined because of this until they ask Google to withdraw these reviews nothing good can happen.

I think the social media app clubhouse should release notice regarding this, as it is harming/deteriorating someone else's business. What's your take on this? What would you do if you were in the position where Clubhouse management tool stands?

Follow me on Twitter
Shashwat

How to convert any website/webpage into an installable progressive web app (PWA)

Shashwat Verma — Tue, 16 Feb 2021 19:44:38 +0000

Hi there!
Thinking about how to convert any website/webpage to an installable progressive web app? read on.

In this tutorial, we are going to convert an HTML5 based game into an installable web application, which can be installed on Android or iOS devices.

Made this classic simon game, which is really simple in nature but quite addictive. You can fork or star this repository to make it your own or suggest any further improvements.

What is a PWA?

A progressive web app (PWA) is the set of mobile web application development techniques that entails building apps that feel and look like native ones. Using a web stack (JS, HTML, and CSS), progressive web apps combine rich functionality and a smooth user experience associated with native apps. Simply put, PWA is the web app with the native-app flavor: After the installation, a user clicks on its icon on a device's home screen and gets straight to the website.

One of the best features of PWA's is that it is installable on user's devices like native apps, and work in offline mode too.

Steps to take -

Create a service worker file.
Update the main document to check if the functionality is supported.
Create manifest.json for app metadata.
Use Chrome dev tools to debug the app.

1. Service worker

Create a service-worker.js file in the root directory of the project, it is important to put it in the root directory to help us store static content in cache storage. You can almost store any kind of media in cache storage like mp3, mp4, video maybe? and obviously the static file HTML, CSS, and JS.

// Installing service worker
const CACHE_NAME  = 'Simon-game';

/* Add relative URL of all the static content you want to store in
 * cache storage (this will help us use our app offline)*/
let resourcesToCache = ["./", "./img/game.png", "./game.js", "./styles.css"];

self.addEventListener("install", e=>{
    e.waitUntil(
        caches.open(CACHE_NAME).then(cache =>{
            return cache.addAll(resourcesToCache);
        })
    );
});

NOTE: change the CACHE_NAME const to your own app's name

Add two more event listeners -

// Cache and return requests
self.addEventListener("fetch", e=>{
    e.respondWith(
        caches.match(e.request).then(response=>{
            return response || fetch(e.request);
        })
    );
});

// Update a service worker
const cacheWhitelist = ['Simon-game'];
self.addEventListener('activate', event => {
    event.waitUntil(
      caches.keys().then(cacheNames => {
        return Promise.all(
          cacheNames.map(cacheName => {
            if (cacheWhitelist.indexOf(cacheName) === -1) {
              return caches.delete(cacheName);
            }
          })
        );
      })
    );
  });

NOTE: Replace the cacheWhiteList variable with your own app's name

2. Check for availability (update index.html)

In the case of a static website, update the main HTML document to check for the availability of service workers, and register our app using the service-worker.js file.

  <script>
    if('serviceWorker' in navigator){
      navigator.serviceWorker.register('/service-worker.js');
    } else {
      console.log("Service worker is not supported");
    }
  </script>

3. Create manifest.json file

Create a manifest.json file, we need to link that to our main HTML document.

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

Now, this file contains metadata about our app, like App name, icons reference, URL to open on the opening of the app, etc.

{
    "name": "Simon Game",
    "short_name": "Simon Game",
    "start_url": "/",
    "background_color": "#FFDCB5",
    "theme_color": "#1E003D",
    "icons": [
        {
            "src": "img/512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable any"
        },
        {
            "src": "img/192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable any"
        }
    ],
    "display": "standalone",
    "orientation":"portrait"
}

Copy/paste the above code in the manifest and change your app details. You can reference a single icon or use icons of multiple sizes, as devices differ in screen sizes.

4. Use dev tools to debug

Now open the chrome dev tool (ctrl+shirt+i) and click on the applications tab to check if the service worker and manifest file are detected by the browser.
As you can see below the logo and name of the app are shown.

The background_color property sets the splash screen color and theme_color the notification bar.

You can also check if your app meets the standard for PWA, in the lighthouse tab and click generate the report.

This will also help you to add things that you might forget like adding this line for iPhone/Apple users.

<link rel="apple-touch-icon" href="img/game.png"/>

BOOM, we are done! You have successfully converted a website/game into a PWA.

How to install on devices?

On chrome, you'll have this small add icon on the URL bar, which prompts you to install the app on your device.

On mobile devices, you'll get a prompt (Chrome)

If not then click on the 3 dots in the top right corner, an "Install app" option appears.

Perfectly installed on Android.

Hope it helped. Give a like :)

Cheers,
Shashwat
Follow me on twitter

DEV Community: Shashwat Verma