UI/UX

Why I Built PWA LAB: A Simple Place to Test Real PWA Behavior

Why I Built PWA LAB: A Simple Place to Test Real PWA Behavior Why I built PWA LAB While working with PWA behavior and home screen support in OJapp, I kept thinking the same thing. Reading the specification is not enough to understand how it actually behaves. Write a manifest.json, register a Service Worker, set display to standalone, and the site should open like an app. As an explanation, that sounds correct. But when I actually tested it on iPhone and Android, it was not that simple. That is why I built OJapp PWA LAB. PWA LAB is an experiment page for testing PWA settings and status while actually seeing what is happening. Even if you write it by the book, it may not behave the same way A PWA can be made with HTML, manifest.json, and a Service Worker. But in real use, the behavior changes a lot depending on the browser and OS. Something may work well in Android Chrome but not behave as expected in iPhone Safari. Something may look fine on desktop Chrome but appear differently on mobile. The Service Worker may be ACTIVE, but the page may still fail to display correctly offline. These things […]

How to Check PWA Status: Mode, Service Worker, Push, and Installable Explained

How to Check PWA Status: Mode, Service Worker, Push, and Installable Explained A PWA can be hard to understand if you only look at the page When you build a PWA, it can be surprisingly hard to tell whether it is actually working as a PWA. You may have written manifest.json, registered a Service Worker, and made the site addable to the home screen. But then you still wonder: is this really running as a PWA? Is the page opened as a normal website? Is it opened from the home screen in standalone mode? Is the Service Worker active? Is the browser treating it as installable? These things are not always obvious from the visual appearance alone. That is why I made a page called PWA LAB in OJapp. It is a simple experiment page for checking PWA status directly. In this article, I will use the status items shown in PWA LAB as examples and explain what to check when testing a PWA. MODE: is the page currently opened as a PWA? MODE shows whether the page is currently opened as a normal web page or as a PWA. For example, if the page is opened in a normal […]