Phone: 952-255-8599
Email: tj@wpmarket.net
Progressive web apps explained
If you have visited lots of websites using your smartphone, chances are that you were greeted by an "Add to home screen" pop-up more than once. And if you've clicked on that button at least once, you have discovered that the application was silently installed on your mobile device.
These types of apps can be downloaded straight from the web; you don't need to open an app store, search for the app's name, click its install button, and so on. And believe it or not, these apps allow you to browse their associated websites even when you don't have access to an Internet connection!
Progressive Web Apps, also known as PWAs, are web apps that were built in such a way that they resemble desktop and/or mobile applications. They are very fast, because they implement client-side caching; read my article about web caching to learn more about this powerful technology.
PWAs behave just like native apps, having the same set features with them. They can run on outdated versions of the mobile operating system as well - a very cool feature, if you ask me. This means that people who own older smartphones, and thus can't install the most recent versions of their favorite applications from the app store, can still use their ancient phones by installing, and then using a PWA.
Google has published two Progressive Web App checklists: one for a Baseline PWA and another one for an Exemplary PWA, which can provide a much better offline experience.
Here's the baseline PWA checklist:
- The site must be served over the secure HTTPS protocol;
- Website pages must be responsive;
- The application must display "some" content even when it is offline;
- The user must be prompted to add the PWA to the device's home screen;
- The app must load fast even if the person who use it utilizes a 3G Internet connection. The Time to Interactive (TTI) metric, which computes the amount of time that's required for a page to become interactive, must be under 10 seconds;
- The site should work fine with the most popular browsers: Chrome, Edge, Firefox and Safari;
- Page transitions should feel snappy even if network performance is low;
- Each page must have its own URL.
And here's the exemplary PWA checklist:
- The content of the website must be indexed by Google;
- Schema.org metadata must be provided whenever it is appropriate;
- Social metadata should be present as well;
- Canonical URLs should be provided when the same content is available on several pages;
- Pages should use the History API, being able to access the browser's current session history (the pages that have been visited using the current browser tab);
- All content should have a fixed size, thus preventing page jumps as a new page is loaded;
- A "back" button press should return to the previous page, retaining its scrolling position;
- Website fields that can be filled in shouldn't be covered by the on-screen keyboard;
- The app's interface should allow the user to share the content easily, no matter if the PWA is running in standalone or full screen mode;
- The site must be responsive, working fine on small, medium and large screens;
- App install prompts shouldn't annoy the user;
- TTI should be under 5 seconds over a 3G network;
- The site must use cache-first networking;
- The PWA should notify the user that he/she is offline;
- Push notifications should be timely, precise and relevant (not aggressive);
- People should have the option of disabling push notifications.
To build a Progressive Web App, you will need to create at least these three components:
- A Web App Manifest, a file that provides meta information about your application;
- A service worker, which runs in the background, performing various tasks (intercepting network requests, etc.);
- An icon.
Each Progressive Web App must be served over a secure network, of course. Fortunately, services like LetsEncrypt make it really easy to get a secure certificate for free.
