Ios Progressive Web App Blue Location Bar Across Top of Screen Does Not Work

July 12, 2022 Post a Comment

Maybe you've encountered a website that proposes something like "install this as a web app," as I recently did on the Google Meet webpage. That's one example of how you can get a Progressive Web App (or PWA). The Meet PWA became available just recently in some web browsers, but several other Google services have offered the option for years. Other app-like sites such as Outlook, Spotify, and Instagram are more good examples of sites ripe for the PWA treatment. Let's delve into exactly what these PWAs are, how you can get started with them, and what benefits they offer.

What Is a Progressive Web App?

The web has increasingly become more app-like. Websites can deliver notifications, work offline, store data in local caches or persistent databases, and run in the background. Many websites behave more like applications than purely as informational sites. The Progressive Web App standard offers websites a chance to become even more like standalone apps, by discarding browser elements that only clutter their interface.

Spotify running as a PWA.

Progressive Web Apps take advantage of the same technologies that power today's advanced websites, including HTML, CSS, and JavaScript. But they also use a few newer and less common web standards, including Web Application Manifest (to define the app's name, icons, URL, colors, and configurations) and Service Workers(Opens in a new window), which allow PWAs to function offline without an internet connection.

You may be wondering why the term progressive comes into play. It stems from a web development strategy called progressive enhancement(Opens in a new window). In this strategy, the developer focuses on the main content and functions first and then adds extra capabilities if the browser and platform offer more frills around the edges. Related to progressive enhancement is responsive web design, in which content is designed to resize for specific platforms, such as mobile or desktop devices.

Sadly, one of my favorite web browsers, Firefox, doesn't support PWAs on the desktop, though it does on Android. (The same holds for the innovative Opera web browser.) Mozilla had been working on a project to add it to its excellent, privacy-respecting browser, but the organization announced a cessation of that endeavor. One can hope that situation changes sometime in the future.

In the meantime, let's take a look at what you can gain from using PWAs (along with the drawbacks), how you can install them on several platforms, and which are my favorites.

What Are the Advantages and Disadvantages of PWAs?

As mentioned, PWAs let you focus on the meat of an app-like website, without all the browser interface and window borders you normally get in the browser. You just see one menu—the app's site menu—rather than both that and the browser's menu, search box, and toolbar. Those browser elements are sometimes unnecessary distractions and simply add clutter.

You may also find PWAs include more capabilities than installed apps. "How can that be?" you ask. Well, many websites are updated constantly, while an app is only updated when you install the update. Often a web service launches new features for its website first and only later adds them to its standalone applications, if ever.

Other advantages of Progressive Web Apps are that they are more lightweight than native applications and are platform-agnostic. In other words, developers don't need a different app for mobile and desktop—as long as a browser that supports PWAs is running on the platform. On Windows, there's no need for Registry clutter or ancillary code modules. One developer notes that the Twitter Lite PWA takes up only 3% of the storage(Opens in a new window) required by its native Android app counterpart. This benefits end users as well as developers, as we'll see in a moment.

Finally, PWAs sidestep the mobile app stores, which can be restrictive, especially for developers who have to pay tribute to the platform providers. For the end user, it means installations are incredibly fast and simple.

No Silver Lining Without a Dark Cloud

One downside to a PWA is that the app is still a website underneath, and though many are designed to continue functioning offline, some won't work fully without a connection. This web underpinning can sometimes be an advantage, however: You can hit the browser refresh hotkey (F5 on Windows, Command-R on macOS) to reload a pesky site-app, while an installed program that's not responding is more of a pain and often requires a restart.

Some PWAs also require you to sign in frequently as you would with a website, where most apps just start functioning when you fire them up. And there are certain types of application for which PWAs aren't appropriate. Native apps coded to the metal of your system provide faster performance: You wouldn't want to run a AAA video game or a video editor as a website.

If you have both an installed app and a PWA for the same service on your device, it could lead to confusion in getting to the one you want. My advice for that: Just uninstall the native app; this will likely save you system resources. Finally, note that, just as with browser windows, you can have multiple instances of the same web app running simultaneously; this can be viewed either as a plus (if you want more than one set of content in the app) or a minus (if you get confused by multiple windows running the same app).

Another problem with PWAs is mere discoverability. Since there's no PWA app store, it's hard to know which sites can be installed as this class of app. The experience also depends on how well the developer implemented PWA functionality—some offer clear setup and usage experiences while others do not.

Which PWAs Should You Use?

Certain types of web apps make a lot of sense to use as PWAs—streaming music, communication, and social media apps are good candidates. Two PWAs that I run all the time are Spotify and the web version of Outlook, but for very different reasons.

First, Spotify: I would occasionally look in my Apps and Features settings page in Windows 10 and see that Spotify was taking up over a GB of drive space. I wondered why that was necessary because I didn't need the app to download every song as I played it. After switching to the PWA, the app takes up less than 5MB.

I use Outlook Web rather than the stock Windows Mail app simply because if offers more reliability, speed, and features. There's talk of Microsoft replacing the Windows 10 Mail app with a variation on the PWA version, and that can't happen soon enough as far as I'm concerned.

Twitter is another fine candidate for PWA usage, but it already offers excellent native apps on most platforms. I started using Twitter as a PWA because the Windows store app didn't let me switch between my personal and work accounts easily, whereas the web version did. Google Meet, Skype, and Zoom can all be installed as Progressive Web Apps, too.

You may someday install an app without even realizing it's a PWA, especially now that Windows is moving towards including them in the Microsoft Store, in the Start menu program list, and in the Apps and Features section where you uninstall normal applications. Chrome OS already includes PWA in its app store.

How Do You Install a Progressive Web App?

A big advantage of PWAs is how easy they are to install, and the process continues to get simpler for the PWA-supporting web browsers such as Chrome and Edge. Apple is in a peculiar position when it comes to PWAs: You can install a PWA on macOS except in Safari; on iOS, you can install PWAs only in Safari. Here's what you need to do to install a PWA on each major operating system (in order of popularity(Opens in a new window)).

Installing PWAs on Android

Left: Install app choice in Chrome; Center: After you press Install app; Left: Install in Firefox.

In the Chrome browser: For sites that fully provide PWA functionality, you see an Install app choice in the main Chrome menu. Once you select that option, the app icon appears on your home screen. (Note that you can choose Add to Home screen for sites that don't provide PWA features.) The long-press choices still include Uninstall, but a telltale option below that is Site Settings—something you don't see for store-installed apps.

In Firefox: For sites that can be turned into PWAs, Firefox's menu has a simple Install option. After you tap this choice, you see the Add to Screen dialog box. The home screen icons for Firefox-created PWAs have a small orange Firefox logo at the bottom right of the main app logo. As with Chrome-created apps, you simply choose Uninstall from the long-press context menu to get rid of one. Unlike those created in Chrome, you don't see the Site Settings choice, for a more real-app feel.

Recommended by Our Editors

Installing PWAs on Windows

In Edge: The default Windows web browser provides the best option for installing PWA's on Microsoft's desktop operating system. That's because it puts the app in your Start menu just like any other app you install the normal ways (either with a downloaded program installer or from the Microsoft Store app). Here's how it works:

Navigate to the website you want to install as a PWA.
If the app is capable of being installed as a PWA, you can either click on the icon on the right side of the address bar that looks like three squares and a plus sign (the hover text is "App available. Install [app name]) or you can choose Apps from the three-dot overflow menu and then click Install [app name]. For some PWAs, the Install box pops up automatically.
That's it. Your new app appears in the Start menu, gets a distinctive icon in the Taskbar (not the Edge icon), and can be converted into a desktop shortcut. If you want to uninstall the PWA, you can do so from the Start Menu's right-click menu, from Windows' Apps and Features Setting page, or from Edge's Manage Apps page.

In Chrome browser: Just as with Edge, Chrome has a button in the address bar that pops up for sites that offer PWA functionality. (Note that the privacy and crypto-earning browser Brave has PWA support that's nearly identical to Chrome's.)

Click the Install App button in the address bar or choose Install [app name] from the three-dot overflow menu at the top right.
After this, you'll see the app with no browser border and an icon for it in your Start menu. Note that you can uninstall Chrome-created PWAs only from their window or the Chrome browser, not from Windows' Settings. If you choose Uninstall from the Start menu, the PWA unhelpfully takes you to the old Programs and Features control panel.

Installing PWAs on iOS and iPadOS

As mentioned above, Apple only allows Safari to create PWAs in iOS and iPadOS—third-party browsers are left out of the party. Safari doesn't use the terms install and app, like all other browsers that support PWAs do. To install one on iOS or iPadOS, load the PWA-capable site, choose the Share up-arrow at the bottom of the screen, and select Add to Home Screen. Note you can do the same for any website, but you won't get the offline functionality of a true PWA.

When I created a PWA for Instagram, the icon and app looked identical to the App Store version, but instead of a Remove App option in the long-press menu, I saw a Delete Bookmark choice. Note that PWA icons don't appear in iOS 14's App Library, so you don't get as full of an app experience with PWAs on Apple mobile devices as you do on other platforms. I guess this should not come as a big surprise, given Apple's antagonistic stance towards open systems.

Installing PWAs on macOS

Installing a PWA in Chrome running on macOS.

In macOS, installing PWAs works just as it does on Windows, but the default Safari browser offers no method for installing a site as a PWA. Your new app does appear in Launchpad, but not in the Applications Finder folder.

Apps created with either Chrome or Edge nicely get a top menu named for the new app rather than for the browser, and I could even make Outlook PWA my default email-handling client. You have to uninstall PWAs from within the browser, however, rather than natively in the OS.

Installing PWAs on Linux-Based OSes

The top shows installation of a PWA in the Edge browser running in Linux, the bottom shows the dialog in Google Chrome.

In Linux, you can set up PWA in the Brave, Chrome, and Edge (beta at the moment) web browsers just as you can on other desktop OSes. You see the same Install app button in the toolbar, and simply tapping that button creates the PWA. I tested this in Ubuntu. The PWA app icon appears on the Applications page, and the distinctive app icon rather than the browser icon appears in the Activities panel.

Note that if you use Brave or the open-source Chromium browser, you won't get those benefits. You can still create a version of the site without the browser borders, but you have to open it from the main browser app.

Installing PWAs on Chrome OS

Google's desktop OS behaves quite a bit differently from the Chrome browser on other platforms: There's a circled Plus sign button in the address bar of the browser as well as a menu choice to Install [app name]. Choosing either results in your being shunted to the Google Play app store, from which you install the app. Yes, it's still a PWA, but it's one you get from the app store. That was my experience with installing the Twitter PWA, but for Outlook Web, choosing the same button installed a PWA just as you'd see on a Windows PC.

It's not a bad experience, but, as with all things in Chrome OS, I wish there were more consistency. Some confusion results because the Outlook app in the Play Store is not a PWA, while the Twitter entry is. When you install the Outlook PWA and the Google Play Store's Outlook app, you get two app icons on the app shelf.

Like What You're Reading?

This newsletter may contain advertising, deals, or affiliate links. Subscribing to a newsletter indicates your consent to our Terms of Use and Privacy Policy. You may unsubscribe from the newsletters at any time.

jacksonwoung1986.blogspot.com

Source: https://www.pcmag.com/how-to/how-to-use-progressive-web-apps

Jackson Woung1986