Curated PWA Links
Scott C. Krause | Saturday, Jul 9, 2022
It is not uncommon for a startup to develop a web app, an iPhone app, and an Android app. When management is convinced that a web app can be just as engaging as native they will decide to focus solely on the web app and get to market much quicker. Making a web app installable results in increased discoverability, traffic, visitor retention, sales per customer, and conversions. I believe that this project proves beyond doubt the immersive potential of browser APIs.
Progressive Web Apps bring speed and reliability to the web by supplying features that historically have only been available to native apps including offline access, responsiveness even when the network is unreliable, home screen icons, full screen experience, push notifications and background sync.
The Progressive Web App represents the single greatest leap in engagement opportunity since the introduction of the browser. Because of its intimate relationship with the phone the potential to influence the micro-moment behavior of its user is vast and largely unexplored.
Your website becomes a native app in both experience and performance. Your PWA is a first class citizen on an iPhone or Android. It resides on the homescreen and in the app drawer.
When it is tapped it will respond instantly with a custom splash screen even while offline.
Expanding what the web can do with features like file system access, media controls, app badging, WebAssembly, and full clipboard support. All of these capabilities are built with the web's secure, user-centric permission model, ensuring that going to a website is never a scary proposition for users.
Here's the Native App Problem
There is friction when a customer must discover your app, install it, and create an account. People have become resistant to installing new apps simply because the novelty has worn off.
Here's the PWA solution
A website that behaves like an app. The discovery and onboarding are frictionless because there is no need to install an app. It's Instant gratification.
When a Progressive Web App moves out of a tab and into a standalone app window, it transforms how users think about it and interact with it.
Between modern APIs, WebAssembly, and new and upcoming APIs, web applications are more capable than ever, and those capabilities are only growing.
Favorite PWAs 🦄
The best and most practical PWAs (Progressive Web Apps)
Frequently Asked PWA Interview Questions
What are the minimum requirements to install a PWA?
Minimally you will need HTTPS, a service worker serving 200, a manifest, and some graphic files. A good way to find out what you need is to run the Lighthouse PWA audit in Chrome.
Is Progressive Web App a Native Mobile App?
No. A PWA does not require an installation via an App store. A PWA looks and acts like a native app, but it is not the same. A website that behaves like an app. The discovery and onboarding are frictionless because there is no need to install an app.
Do PWAs work without Internet connectivity?
Yes, a PWA has powerful caching mechanisms that allow it to serve content even while offline.
Does PWA work well on all browsers?
Yes. A PWA is built on core web technologies that are supported by all modern browsers and devices.
Can I create multiple PWAs on the same domain?
Yes. You can create multiple PWAs on the same domain. The origin of the service worker script URL has to be the same as the origin of the script that calls register(). A service worker can only control URLs and decendents of that origin as defined in the scope parameter.
Can I publish a Progressive Web App on the Google Play store?
Yes, You create a new app in the Google Play Console. You can test the app after uploading an app bundle and wrapping it in Bubblewrap (command line tool). Using the testing link you can install your PWA from the Play Store on Android or ChromeOS.
Online Calculator as a Service
Accelerator Online ROI Calculator as a Service
Neodigm 55 Landing Page UX micro-library
Popups, Toast, Parallax, and SFX
UX Usability Heuristic Evaluation
HE Heuristic Evaluation
New Macbook Setup for Developers
New Macbook Config for Devs 2023
Indispensable Curated WebAssembly Links
Curated PWA Links
Indispensable Curated PWA Links
Curated GA4 Links
Indispensable Curated Google Analytics 4 Links
Curated SFDC Qlik Tableau Links
Curated Salesforce Qlik Tableau Links
Curated LWC Links
Indispensable Curated LWC Links
Curated TypeScript Vue.js
Indispensable Curated Vue TypeScript
Creative 3D animation resources
Indispensable Curated Creative Links
Transition to TypeScript
Indispensable Curated TypeScript Links
The Clandestine Dead Drop
The Ironclad Clandestine Dead Drop
Indispensable Curated Svelte Links
Curated Blogfolios Links
Curated Emerging Tech Links
Indispensable Curated Tech Links
Cytoscape Skills Data Visualization
Persuasive Infographics & Data Visualizations
eCommerce Accessibility A11y
Accessibility Challenges Unique to eCommerce
Roll Dice in High-Fidelity 3D
Create 3D Dice with Strong Random Entropy
JS Airport Geo-Proximity Radius
Airport geo-proximity logic that answers questions, like What are the three closest airports to me right now?
Calculate Aspect Ratio of Viewport
Calculate Aspect Ratio of Viewport
Produce CSV with client-side JS. Construct Blog and Download as CSV file.
PWA Add to Home Screen
Progressive Web App ⚡ Advanced Cache && Notification Patterns
Convert an HTML formatted data attrib name to a JS formatted name.
Oracle PL/SQL Stored Procedure
Vintage Stored Procedure to denormalize department codes
Dark Mode and Reduced Motion
Making Dark Mode work with both a UI switch && the OS preference.
Vanilla JS Popover Microinteraction
A popover is a transient view that shows on a content screen when a user clicks on a control button or within a defined area.
Vue.js double tap Microinteraction
Firing both a tap and a double-tap on the same element
CSS Advanced Accessibility
Motion, theme, and skip A11Y CSS solutions
Cypress E2E Quality Assurance
End to End testing 🚀 Headless browser automation
Asynchronous eCom Nav Category Count
Asynchronous recursive crawl reports the total number of products by category.
Color of the Year CSS Styles
Color of the Year 2000 thru 2021 CSS Utility classes
Solve Anagram Puzzle
Do two strings contain the exact amount of letters to form two words?
Virtual Keyboard Extention Configuration
TS Virtual Keyboard Chrome Extention
Web Music Ad Blocker Snippet
Automatically mute the Music player when Ads are playing and unmute when they are done (in Chrome).
Capture Entire DOM State into Inline CSS Snapshot
Save As HTML a snapshot capture of entire DOM State with inline CSS