PWA Icon

PWA

Progressive web apps (aka PWAs).
12 Stories
All Topics

24 Ways Icon 24 Ways

Mistletoe offline

Jeremy Keith starts off his 24 Ways article by reminding us of Murphy’s Law. What does this have to do with the web you may ask?

A service worker is a Murphy-battling technology that you can inject into a visitor’s device from your website. Once it’s installed, it can intercept any requests made to your domain. If anything goes wrong with a request—as is inevitable—you can provide instructions for the browser. That’s your opportunity to turn those server outage frowns upside down. Take those network connection lemons and make network connection lemonade.

Just as we design 404 pages, designing a pleasant offline experience is important.

link Icon simplabs.com

From SPA to PWA

Marco Otte-Witte:

While Single Page Apps (SPAs) have already meant a giant leap forward, PWAs are taking things even one step further. They offer a rich user experience that parallels what users know and expect from native apps and combine that with the benefits that browser based applications provide.

This is an excellent overview using a real-world example app (that provides air quality data for locations around the world.) The app is also open source, if you’d prefer to dive right in to the code. 🏊‍♀️

DEV.to Icon DEV.to

Shipping PWAs as Chrome extensions

Have you considered using a PWA to create a Chrome extension?
Sam Thorogood writes on Dev.to:

So you’ve built a PWA, created your service worker, and followed all the guides. In my case, that is Emojityper: a simple PWA where you can enter words, and receive emoji. This is perfect for desktop and entering emoji in editors that don’t support them.

But once you’ve built this great experience, you’re not limited to distributing it only on “the web”. In this post, I’m going to detail how I shipped Emojityper as a Chrome extension, accessible via a browser action.

Paul Kinlan paul.kinlan.me

Use `onappinstalled` to know when your PWA gets installed

Paul Kinlan, developer advocate for Chrome and the open web at Google writes:

Chrome implemented window.onappinstalled event. It’s triggered when a user installs a progressive web app via the Add to Homescreen API or now more importantly via the manual method of Add to Homescreen.

This is a very useful addition because it allows you to see engagement on the prompt vs people who use the system banners or menu buttons to install a progressive web app.

Now you can track your PWA’s install engagement based on the method of install — via the prompt or manually via a custom prompt. Read the docs for more details.

Also, make sure you subscribe to JS Party to hear discussions about PWAs and the web platform.

JavaScript blog.jonstodle.com

PWAs are going to eat the (app) world

Yesterday’s bearish link about PWAs caused a bit of a stir in our community Slack. Here comes the bull:

PWAs are going to be versatile enough and robust enough that they’re going to supplant some of the native apps you might have on your phone (or computer) today.

I appreciate the caution on display by use of the word “some”. Jon may be bullish, but he’s not a zealot! Why does he think PWAs will finally get over the hurdle? One acronym: WASM

With the ease of install of PWAs and high performance of WASM, I think we’re also going to see some Electron apps moving to be PWAs.

Great article. Definitely click through and read the whole thing. 💯

JavaScript debuggerdotbreak.judahgabriel.com

I built a PWA and published it in three app stores. Here’s what i learned...

Judah Gabriel starts this post off with the question “Why even put your app in the app stores? Just live on the opened web!” — and I don’t fully disagree, until you think about where your users will come from.

The answer, in a nutshell, is because that’s where the users are. We’ve trained a generation of users to find apps in proprietary app stores, not on the free and open web.

There are many more lessons learned about the process — from creation to submission — but here’s the tldr…

Turning a web app into a Progressive Web App (PWA) and submitting it to 3 app stores requires about a month of work, a few hundred dollars, and lots of red tape.

(We’re planning a deep-dive on PWAs for an upcoming episode of JS Party. Subscribe to be notified.)

WebKit Blog Icon WebKit Blog

PWAs on Safari?!

Workers will be at your service in an upcoming release of Safari — specifically Safari Technology Preview 48, macOS High Sierra 10.13.4 and iOS 11.3 beta seed 2.

Youenn Fablet, software engineer at Apple, writes:

While WebKit’s implementation and feature set is quickly evolving, we believe it has reached an important milestone in terms of functionality and compliance: applications using service workers for offline support or network/cache optimizations run successfully on latest WebKit builds. Let’s now dive into the specifics…

There are threads on Twitter here and here you should check out for commentary on this spec.

This news comes after Microsoft announces PWAs are coming to Microsoft Edge and Windows.

Microsoft Edge blogs.windows.com

Welcoming progressive web apps to Microsoft Edge and Windows 10

PWAs are coming to Microsoft Edge and Windows. This is a huge win for PWAs.

We’re all-in on PWAs. In fact, we want to take PWAs on Windows to the next level, by making them first-class app citizens in Windows.

Love this quote:

Progressive Web Apps are just great web sites that can behave like native apps—or, perhaps, Progressive Web Apps are just great apps, powered by Web technologies and delivered with Web infrastructure.

If you’re a web developer and you’re not paying attention to Windows, Edge, and what Microsoft is doing because “that’s not your camp,” means you’re missing out on a massive community working hard to move the web forward. Pay attention.

Player art
  0:00 / 0:00