MDN recommends avoiding unique user identifiers in start_url. By using start_url, you can add the currently displayed page directly to the home screen and apply the same approach to e-commerce, blogs, and profile pages.
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) to see what would happen. I was curious about a few things: – Can you even add a non-existent URL […]
What is the real difference between PWAs on Android and iPhone? Android tries to turn the Web into apps, while iPhone focuses on placing web pages on the home screen.
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 iPhone and Android Many PWA guides say that once a site is added to the home screen, it looks like […]
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, simply saying “PWAs are useless on iPhone” is a bit too rough. Adding a site to the home screen, launching […]
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 like a normal browser page This time, I mainly tested fullscreen. On Android, it really feels more like an app […]
The manifest.json id Trap: How to Avoid Duplicate PWA Install Problems In a PWA manifest, there is a field called id. When you first start building PWAs, you usually focus on name, start_url, display, and icons. To be honest, because a PWA can work without id, it is easy to think, “Do I really need this?” But when you want to handle multiple PWAs on the same domain, or generate app-like entries for each user, this id field can suddenly become a huge wall. After a lot of rough testing in PWA LAB, I ended up with one very simple pattern: remove id and use start_url: ".". This article explains why that can help when you want multiple PWA-style icons from the same domain. What is the manifest.json id? id is the value used to identify a PWA. The browser uses it to decide whether the app being installed is the same app as one already installed, or a completely new app. In other words, it is like a name tag for the PWA. If the browser thinks the PWA has the same identity, it may treat it as an update to an existing app instead of a new install. […]
Why start_url: “.” May Be the Best Choice for PWAs That Should Reopen the Same Page In a PWA manifest, there is a setting called start_url. This setting tells the browser which URL should open first when the PWA is launched from the home screen. At first, it feels natural to write a fixed URL like "/lab" or "/app". But after testing different patterns in PWA LAB, I started to feel this: If there is no special reason to force a fixed page, start_url: "." may be the most natural choice. What is start_url? start_url is the URL that opens when the PWA is launched from the home screen. For example, if your manifest contains this: "start_url": "/lab" then opening the home screen icon will usually take the user to /lab. This is easy to understand. If your PWA is a top page or a fixed app-style entry point, this works fine. But there are more complicated cases. The problem: the page the user added and the page that opens can be different Imagine a user is viewing a page like /lab/app/demo. They like that page and add it to their home screen. From the user’s point of view, they […]
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 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 […]
PWA開発やWebデザインの現場で使える実践的なノウハウをお届けする「OJapp tips」。iOS特有の挙動ハックからmanifest.jsonの緻密な設計まで、ツール開発者が実機検証（PWA LAB）を繰り返して得た泥臭いリアルな知見を発信中。
私たちが運営する「Petal」は、その仕組みを使って“人のページを名刺のように持つ”ためのミニマルなSNS。QRからすぐ開けて、ログインなしでも見れる。でも、必要なときだけつながれる。そんな「弱いつながり」を未来へ残すために作られています。
