The sticker was created by the Samsung Internet browser team 😍

⚠️ Updated version of this article ⏩ firt.dev

Message from the sponsor (me 😂)

Definition

A modern PWA Cheat Sheet form my JSConf Europe 2019 talk

🎖Usage

One of the most visited website in the world is now a Progressive Web App
Produck is one of the first desktop-optimized PWA that I found published early 2019

⊹ Platforms

Android

Android is still the only platform supporting the three “app” modes in the Web App Manifest spec

iOS and iPadOS

The Add to Home Screen menu from iPad OS 13 to install website’s shortcuts and standalone PWAs

Windows and Xbox

PWAs will appear in Start Menu / Screen in Windows devices
Microsoft Edge for Windows, macOS, and Linux lets you install any website as an App; the experience will look like a PWA on the desktop even if the website doesn’t have a Service Worker or a proper Manifest.
The first website in the world installed as an “app” using Microsoft Edge on macOS

Other platforms

🍎 To be or not to be

An official news press release talking about HTML5 Apps in the App Store — about people publishing PWAs in the store, more about this later
Home Screen Web Apps was the term used by Apple 12 years ago for what next became Progressive Web Apps. Also here, “websites saved to the home screen” usage is wrong as not every website is a home screen web app, or PWA, or however you want to call it.

Is Safari the new IE?

Politics in between

📣 Distribution

Browser installation

The ability to install a PWA from our user interface is not going to appear in Safari or Firefox
The original WebAPK minting service is only available for Google Chrome
When you use browsers without WebAPK you will see a badged icon only in the Home Screen

App Stores distribution

At Chrome Dev summit, the browser team mentioned OYO Lite, a PWA in the Google Play Store, confirming for the first time that TWAs -shipped several months before- can be used for PWA store distribution
Samsung Galaxy Store is supporting web app submissions

Search engine indexing

Enterprise distribution

Adding PWAs to enterprise users; the Web App Manifest is ignored and we can set up only basic metadata from the web portal

💪 Abilities

🎨Design

Dark mode

Foldable devices

Maskable icons

🧰 Tools

Store App Launcher generators

pwa2apk was the first tool to convert a PWA into a PWA launcher ready for the Google Play Store

PWA Builder

The <pwa-install> web component from PWA Builder in action

Maskable icons

It’s time to “mask” your PWA icons!

Lighthouse

What’s next?

mobile+web developer, author, trainer, speaker | Check firt.dev for more articles and learning experiences | PWAs, Web Performance, JavaScript, Mobile Apps

Get the Medium app