1 month ago

Firefox Mobile 101: How to Turn Websites into Apps on Your Home Screen with the brand new Quantum Browser « Android :: Gadget Hacks

There are over 3 million apps inside Google Play Store, all optimized for the little screen in your hands. While of which number sounds staggering, there are still many online tools in addition to websites of which require you to use a mobile browser since app development will be expensive. However, of which’s where Progressive Web Apps (PWAs) come into play, a cost-effective way to turn websites into mobile apps.

PWAs are websites of which can be saved on your home screen in addition to act similarly to an application installed coming from Google Play. They use similar animations in addition to styling to native Android apps in addition to are optimized (both in performance in addition to design) for your smartphone. Using a PWA will provide an almost identical experience to native Android apps, complete with push notifications in addition to offline usage.

Currently, only a handful of Android browsers supports the feature, such as Google Chrome, which makes its inclusion inside brand new Mozilla Firefox Browser a rare treat. Even iOS users are still waiting for PWAs since WebKit (the browser engine Apple requires all browsers to use) doesn’t support of which (though of which will be being worked on).

Step 1: Install the Firefox for Android Beta

In order to access This specific feature, you need the beta variation of Firefox. While some of Mozilla’s brand new Firefox Quantum features have made of which to the main Firefox Browser app for Android in variation 57, the more impressive Quantum features will be found inside Firefox beta app until they make of which to the regular variation.

Fortunately, you don’t have to join any special groups or jump through hoops to get the beta installed; of which’s available form the Google Play Store just like any different app in addition to works independently to the regular Firefox Browser app.

Step 2: Find a Website of which’s PWA-Capable

In order to try out PWAs, you must navigate to a website of which supports the feature. Currently, the collection of supported websites will be limited, although with Google in addition to Mozilla pushing for adoption of This specific technology, This specific collection will rapidly grow.

As an example, we will use the use the website paperplanes.world, which will be an online game of which provides a little sample of how Progressive Web Apps can be implemented. If you wish to explore different examples, pwa.rocks showcases a ton of PWAs for you to try out.

Step 3: Add Your First PWA on Your Home Screen

When you navigate to paperplanes.world or another PWA website inside Firefox for Android Beta app, to the right of the URL will be a home icon that has a plus in of which. The appearance of This specific icon indicates the website supports PWAs. By selecting This specific icon, you can add the website to your home screen just like any different application.

After selecting the add-to-home button, you’ll be asked if you want to add of which automatically or manually. For the former, just select “Add Automatically,” in addition to for the latter, long-press on of which, then drop of which where you want on your home screen.

Once added, the icon will provide a link to the website without ever opening the browser. inside case of paperplanes.world, This specific website will operate just like any different game of which you were to install onto your device via the Google Play Store.

The not bad Thing About PWAs with Firefox

When you select the newly added icon on your home screen, you’ll notice a few things of which stand out.

  • They’re fast. Unlike mobile websites, PWAs are much quicker to interact with because of a heavier emphasis for mobile devices than desktops.
  • They’re touch-friendly. coming from the ground up, these web apps are designed for touchscreens in addition to include larger text in addition to accessible white space for scrolling.
  • They’re similar to regular apps. Push notifications are supported as well as support for offline usage.
  • They’re cross-platform. These apps aren’t tied to an operating system. Despite only being supported by Android currently, when Apple adds support for PWAs, developers won’t need to make an app for both platforms. Instead, they can make one PWA which will operate the same no matter what device a user will be using.
These are just some of the features in addition to tools accessible to Progressive Web Apps.

The Downsides of PWAs with Firefox

There are some limitations to Progressive Web Apps, as indicated by the screenshots above.

No Firefox icon on Android 7.1.2 Nougat (left) vs. the Firefox icon on Android 8.0 Oreo (right).

With the addition of support for Progressive Web Apps, Firefox places itself in rare company among Android browsers. With the push by Google in addition to Mozilla, more websites will become compatible, changing the browser’s main function to hubs of which host these applications rather than primarily being used to navigate the web.

Don’t Miss: 3 Reason Firefox Quantum will be the Best Browser for Android

Cover photo by Justin Meyers/Gadget Hacks; Screenshots by Jon Knight/Gadget Hacks

Leave a Comment

Your email address will not be published. Required fields are marked *

two × 1 =