Pavel
Software and entrepreneurship

Software and entrepreneurship

How to be a productive creator

How to be a productive creator

Pavel's photo
Pavel

Published on Oct 18, 2021

4 min read

Table of contents

  • First refinement - use a password manager
  • Second refinement - always logged in
  • Third refinement - Progressive Web Apps
  • What does a PWA look like?
  • How to install a PWA
  • Conclusion

Good habits and productivity are mostly related. That is, if we want to be productive, we need good habits in order to achieve our goals effectively.

Nowadays, most of our tools that we use every day are online. For example I want to write every day, so accessing Hashnode or any other blogging platform should be an easy task to do - preferably one click to open and start writing, instead of:

  1. open the browser
  2. navigate to the page
  3. login
  4. start writing

James Clear explains in his book Atomic Habits that one of the ways to create and maintain good habits is to make them attractive in an environment where the habit-supporting activities or objects are easily accessible.

In my case, this means that I should find a way to open the Hashnode site quickly and easily to make writing on my blog a habit.

So how can the four-step process described above be optimized?

First refinement - use a password manager

As suggested in the article How to be a productive developer use a password manager to speed up logging into the site. But there is still room for improvement.

Second refinement - always logged in

If you are on your personal computer, then don't log out from the site you use often. Instead use the option "keep me logged in" or similar, so that whenever you visit the site you are already signed in. But here, too, there is room for improvement.

Third refinement - Progressive Web Apps

Wouldn't it be nice if it was possible to somehow make the website accessible "outside" the browser?

Progressive Web App (PWA) to the rescue!

According to this article What are Progressive Web Apps?:

Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.

Furthermore, Microsoft writes in Overview of Progressive Web Apps (PWAs) the following:

The qualities of a PWA combine the best of the web and compiled apps. PWAs run in browsers, like websites, but have access to app features like the ability to work offline, be installed on the operating system, support push notifications and periodic updates, access hardware features, and more.

In layman (my!) words a PWA is:

A web page that can be installed and started offline and it looks and behaves as a native application (no matter the operating system), which includes for example sending notifications, support of desktop features, access to computer devices.

What does a PWA look like?

In this image you can see the Hashnode PWA (framed with the red border) running alongside two native Windows apps - Excel and Calculator.

PWA_06_running.png

As you can see the look and feel is by all three the same

  • own window
  • icon is visible in the taskbar and in the start menu and can be pinned to the taskbar

How to install a PWA

Installation is pretty straightforward and looks almost the same in all major browsers (except Firefox, who does not support PWAs!).

I used Microsoft Edge to document how to deal with a PWA, but it looks the same in Google Chrome. For this article I have created a simple site that currently does nothing, but is available as PWA - hipstapas-pwa.vercel.app.

Let's get started.

Once a site available as PWA is visited with a browser that supports PWAs, you will be notified in the address bar, that this site can be installed:

PWA_01_install.png

Alternatively, the installation can also be done from the Apps menu:

PWA_02_install.png

Once installed, you will be asked where to make the app visible:

PWA_03_install.png

If you click on App permissions in the system menu of the PWA, you will be taken to the page with the browser PWA permissions, from which the various permissions can be configured:

PWA_04_permissions.png

If a PWA is no longer required, uninstalling it is just as easy as installing it.. Either navigate to Installed apps configuration section in the browser and click on the X to deinstall the PWA:

PWA_05_uninstall.png Or alternatively, if the app is pinned to the start menu, simply right-click to open the context menu and select uninstall.

Conclusion

Now you know how to open your favorite online tool with one click!

Many well-known sites are available as PWA, for example:

  • Notion
  • Discord
  • Twitter
  • Google Mail
  • Microsoft Office online
  • GitHub
  • Gumroad
  • Hashnode
  • Figma

PWAs.png

Do you use PWAs and if so, which ones?

If you have any questions or feedback - don't hesitate to contact me - leave a comment and I'll be happy to answer.

Happy and productive work! 😊

 
Share this