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 […]
How PWA Offline Support Works: Service Workers, Cache API, and Files to Cache Conclusion: PWA offline support works by saving required files in advance To make a PWA work offline, you usually use a Service Worker. In simple terms, the browser saves files such as HTML, CSS, JavaScript, and images in advance. Then, when there is no network connection, the app can display the page using those saved files. So PWA offline support is not magic. It works because the files needed to run the app have already been cached. What you need for offline support When you add offline support to a PWA, there are three main things to think about. Service Worker Cache API A list of files to cache A Service Worker works like a background layer between the page and the network. When the page tries to load a file, the Service Worker can decide whether to fetch it from the network or return a saved version from the cache. What does a Service Worker actually do? A Service Worker is different from regular JavaScript. It is not mainly used to move buttons or update UI elements on the page. It is used to manage network […]
When you add a web page to the iPhone home screen, the saved icon may open a different URL from the one you were viewing. I ran into this problem while building Petal. What I wanted was simple: open an individual page like /petal/{token} and add that exact page to the home screen. But in reality, when I opened it from the home screen, it jumped to another URL like /petal/@username. At first, I thought it was Safari cache or some mysterious iOS behavior. But the conclusion was much simpler. The cause was that I had written a fixed URL in start_url inside manifest.json. It was completely my mistake. The confusing part was that this mistake did not appear clearly from the beginning. What happened What I wanted to do was very simple. Open a different Petal card page for each user Add that page to the iPhone home screen Open that person’s page directly from the next time In other words, I wanted to keep the exact URL that was currently open on the home screen. But when I launched the added icon, it did not open the page I was viewing. It opened the fixed URL written in […]
Progressive Web Apps (PWAs) are designed to make websites behave like native apps. However, on iPhone (Safari), PWA functionality is significantly limited. In this guide, we clearly explain what still works and what doesn’t in Safari as of 2026. Why Is PWA Limited on Safari? Safari has never fully supported PWAs compared to browsers like Chrome. After 2024, Apple introduced changes that further restricted PWA functionality. As a result, PWAs on iPhone are no longer reliable as a full app-like solution. What Works on Safari Despite the limitations, some features still work: Add to Home Screen (WebClip) Basic website rendering Light caching behavior Standard HTML, CSS, and JavaScript In short, Safari still supports normal web usage. What Doesn’t Work Properly Many core PWA features are limited or unstable: Reliable Service Worker behavior Full offline functionality True standalone app mode Consistent manifest support Stable cache control These limitations make PWAs unreliable on iOS. The Reality: WebClip Instead of Full PWA On iPhone, “Add to Home Screen” creates a WebClip, not a full PWA. Opens in Safari No real offline support No full app experience This is the most stable and realistic approach on iOS today. When Should You Use PWA? Recommended […]
How to Add a Website to Your iPhone Home Screen (2026 Guide) Did you know you can add any website to your iPhone home screen and use it like an app? This feature makes it easier to access your favorite tools, blogs, or services with just one tap. In this guide, we’ll walk you through how to add a website to your home screen step by step. What Does “Add to Home Screen” Do? “Add to Home Screen” allows you to save a website as an icon on your iPhone. Open the site instantly No need to search or bookmark Feels like launching an app This feature uses a system called WebClip. Step-by-Step Instructions 1. Open the Website in Safari First, open the website you want to add using Safari. 2. Tap the Share Button Tap the share icon (a square with an arrow pointing up) at the bottom of the screen. 3. Select “Add to Home Screen” Scroll down and tap “Add to Home Screen”. You can rename the icon if needed. Then tap “Add” to finish. Why It Might Not Work If you don’t see the option, check the following: You are using Safari (not Chrome or other […]
PWA開発やWebデザインの現場で使える実践的なノウハウをお届けする「OJapp tips」。iOS特有の挙動ハックからmanifest.jsonの緻密な設計まで、ツール開発者が実機検証（PWA LAB）を繰り返して得た泥臭いリアルな知見を発信中。
私たちが運営する「Petal」は、その仕組みを使って“人のページを名刺のように持つ”ためのミニマルなSNS。QRからすぐ開けて、ログインなしでも見れる。でも、必要なときだけつながれる。そんな「弱いつながり」を未来へ残すために作られています。