Total Downloads

2,774,590

Total Files

9,229

Latest Update

10

Hands On: Beta PWA Support in Chrome OS

Posted February 22, 2018 | Chrome | Chrome OS | Chromebook | Cloud | Dev | Mobile | Progressive Web Apps | PWAs | Windows | Windows 10


I recently discussed how Google is following Microsoft in supporting Progressive Web Apps (PWAs) on the desktop, in this case in Chrome OS. Here’s an early peek at how this works.

The PWA support I’m describing here will be coming to Chrome officially in one of the upcoming releases. But you can access it now if you’re running a Canary or Dev channel build. So you’ll need to switch from the normal Stable channel.

My Acer Chromebook 14 for Work is already configured for the Dev channel so I can check out new features early. But if you have a Chromebook and would like to check this out too, open Settings and navigate to About Chrome OS > Detailed build information > Channel and make the change.

Next, you have to enable the Desktop PWAs flag in Chrome Flags. To do that, navigate to chrome://flags in a browser window and then search forPWAs. Find the Desktop PWAs flag in the results, enable it, and then restart the browser as prompted.

OK, let’s find some PWAs. This is a bit difficult in Chrome OS since they aren’t integrated with an app store. So I did a Google search and came up with a couple of options that aren’t Twitter Lite. (Since I already am using that and it’s one of the only well-known examples of a PWA.)

First up: Starbucks, which is available at app.starbucks.com. After loading the site and signing in, I selected “Add to shelf…” from the Chrome menu. (This is unique to Chrome OS. If you’re using Chrome on Windows, you can choose More tools > Save page as” to add the site to your list of Chrome apps and create a shortcut that can be pinned to the taskbar.)

Now, when you launch Starbucks, it looks and works like a native app: It has its own shortcut in the Chrome launcher (like the Windows Start menu) and in the taskbar. And the app window takes on the color scheme of the site, in this case, green.

Unlike pinned Chrome websites (in Windows or Chrome OS), this app window also provides a basic menu of options that are available via a widget next to the minimize, restore, and maximize buttons. This menu lets you perform some useful actions like set a zoom size that is unique to this app. The app info option lets you manage the app: You can unpin it from the shelf (taskbar) or remove it from Chrome entirely.

Google Maps is also available as a PWA, though as Kenneth Christiansen explains, you have to use a specific URL (maps.google.com?force=pwa) and the browser’s developer tools (Toggle device toolbar > Application > Service Workers, and then enable both “Update on reload” and “Bypass for network”) for this to work properly right now. (Remember, this is early days.)

Once you get through all that, you can add this PWA to the shelf too. And then configure the shortcut to open as a window (and not as a tab). Voila: A blue color scheme and that app menu widget are present.

So, this is exciting stuff. And an interesting look at how PWAs should look and work on Windows 10, too, I think. Of course, the even bigger deal there is Store support, and the fact that most people won’t even know that they’re using web apps. All they’ll know is that the app selection suddenly got a lot better.

It’s going to be a great year for apps.

 

Tagged with , , , ,



Source link