CATEGORY

Mobile

    How to Show Content Only When a PWA Is Opened from the Home Screen

    Learn how to change a PWA's interface only when it is running from the home screen. Using display-mode: standalone and navigator.standalone, you can show special messages, menus, offers, or coupons for standalone users while keeping the normal browser experience unchanged.

      What I Learned by Using a Nonexistent URL: iPhone’s Hidden Home Screen Icon Behavior

      Hi, I’m Ojach. I built a feature in my test lab, “PWA LAB,” that allows me to freely change the installation URL. The goal was simple: I wanted a place to try out, in real-time, how a PWA actually looks when added to the home screen. Validating PWAs often comes down to these small, gritty experiments. Especially with maskable icons, where the differences in how Android and iOS handle cropping can change everything. Reading the spec sheet 100 times can’t compare to the moment you break your own code on a real device and finally “get it.” Every developer has been there. That’s exactly what happened this time. To be honest, it was just a simple URL typo. But that “oops” moment led me to discover some fascinating, undocumented behaviors regarding iPhone home screen icons. I just had to share this. Validating the “Broken State” The setup was incredibly simple. I used my PWA LAB to intentionally set an “invalid, non-existent URL” as the installation target. Then, I hit “Add to Home Screen” on both Android (Chrome) and iPhone (Safari) […]

        How to Make a PWA Feel Like a Native App: UX Tips for iPhone and Android

        A PWA is a way to add a website to a smartphone home screen and use it more like an app. But once you actually build one, you quickly notice something important. Being addable to the home screen does not automatically make it feel like a real app. A white flash appears right after tapping the icon. The top bar still feels browser-like. The scroll behavior feels like a web page. The back behavior suddenly reminds the user of Safari or Chrome. When these small awkward moments pile up, users unconsciously feel, “This is not really an app. It is a website.” While building PWA LAB, OJapp, and Petal, I tested Add to Home Screen behavior many times on both iPhone and Android. What I learned is this: to make a PWA feel closer to a native app, flashy features matter less than small details like launch behavior, spacing, colors, scrolling, and back navigation. In this article, I will organize practical UX improvements for making a PWA feel more app-like based on real device behavior. First: PWAs look different on […]

          What PWAs Can and Cannot Do on iOS in 2026: A Complete Practical Guide

          What PWAs Can and Cannot Do on iOS in 2026: A Complete Practical Guide This article is a refreshed 2026 remake of a previously published guide about PWAs on iOS. It was revised on June 5, 2026. Because this area changes quickly, I rechecked the real behavior of Safari and iOS and reorganized only the practical knowledge that still matters today. “So, how far can PWA actually go on iPhone?” PWAs, or Progressive Web Apps, became popular as a way to make websites feel closer to smartphone apps. But when it comes to iPhone and iOS, opinions have always been split. “PWAs do not work properly on iOS.” “Safari has too many limitations.” “It is completely different from Android.” A few years ago, those negative opinions were honestly almost 100% true. However, after testing PWAs repeatedly on real devices in the current 2026 environment, I strongly feel that this view needs an update. My conclusion is this: iOS PWAs are not the same as Android PWAs. But the core features we actually need now work surprisingly well. At this point, […]

            Is display: fullscreen Practical for PWAs? Comparing iPhone and Android Behavior

            Is display: fullscreen Practical for PWAs? Comparing iPhone and Android Behavior In a PWA manifest, there is a setting called display. This setting controls how the PWA appears when it is opened from the home screen. The most common value is usually standalone, but there is also a value called fullscreen. Just from the name, it sounds powerful. If the browser UI disappears and the page looks completely like an app, it sounds perfect for a PWA. But after testing it in PWA LAB, I found a pretty realistic difference between platforms. In short: on Android, it can feel very app-like. On iPhone, you should not expect much from it. What is display? display is the display mode setting inside manifest.json. For example, you can write it like this: { "name": "OJapp PWA LAB", "start_url": ".", "display": "fullscreen", "background_color": "#f5f7fb", "theme_color": "#2dd7ff" } Changing this display value changes how the PWA looks when opened. The main values are: standalone: the standard app-like PWA display fullscreen: displays the app as full-screen as possible minimal-ui: keeps a minimal browser UI browser: opens […]

            OJapp Tips  -  PWA・ホーム画面追加の実機検証ブログ

            OJapp Tips - Practical PWA & Home Screen UX Lab

            OJapp Tips is a technical blog documenting real-world PWA behavior, iPhone Safari quirks, home screen installation, manifest.json, Service Worker, Web App Manifest, WebClip, icon cache issues, and practical web development tips based on actual testing with iPhone, Android, and PC.

            The articles are based on hands-on experiments from PWA LAB and real development experience with OJapp, Petal, and OJ-Pass. Instead of only repeating official documentation, OJapp Tips focuses on the details developers actually get stuck on.