CATEGORY

UI/UX

    Why Even Debate Whether to Adopt PWA? It’s Basically the Modern apple-touch-icon Now

    “Should we introduce PWA to our website?” Whenever PWA (Progressive Web Apps) comes up, the conversation somehow tends to turn into a “large-scale development project.” What impact will it have on the site structure? What about Service Workers? Offline support? SEO? Maintenance costs? Of course, if you are building a full-fledged web application from scratch, there are many things to consider. But if your goal is simply to make an existing website easier to access from the home screen, there is no need to overthink it that much. After repeatedly testing Add to Home Screen behavior on both iPhone and Android in PWA LAB, I have recently started thinking about it this way: Modern PWA home screen support is basically the Reiwa-era version of apple-touch-icon — with Android support and more functionality. Especially with 1P1A (One Page. One App.), where one page is treated as one app, you do not even need to rebuild your existing website in a major way. We used to add apple-touch-icon without overthinking it Not too long ago, when building websites for smartphones, it was […]

      The Two Directions of PWA Design: “1S1A” That Returns to the Top and “1P1A” That Turns Every Page into an App

      PWAs (Progressive Web Apps) are generally described as: “A technology that turns websites into apps.” However, as I continued designing and testing PWAs, I realized that PWA architecture can be divided into two major design philosophies. I call them: 1S1A (One Site. One App.) 1P1A (One Page. One App.) This is not a difference in features. It is a difference in how you choose to design a PWA. 1S1A (One Site. One App.) Most traditional PWAs follow this design philosophy. The goal is simple: Treat the entire website as a single app. For example: / ├ article1 ├ article2 ├ contact └ products No matter which page the user adds to the home screen, launching the app takes them back to: / In other words: The top page becomes the entry point to the app. This approach works very well for: Portal sites Corporate websites E-commerce sites SaaS products In other words, services that want users to start from one central entry point. Why Does It Return to the Top Page? The reason is simple. A typical PWA might use: […]

        What Can a PWA Plugin Change for WordPress? Benefits and Use Cases Explained | OJapp PWA Marketing

        You may have heard the term PWA (Progressive Web Apps), but have you ever wondered: “What can a PWA actually do for a WordPress site?” PWA plugins for WordPress have become increasingly common in recent years. However, there still aren’t many articles that clearly explain the real benefits of using one, or what types of websites can benefit from PWA functionality. In this article, I’ll explain what PWA plugins can do, how they can be used in real-world WordPress sites, and why I developed OJapp PWA Marketing. What Is a PWA Plugin? A PWA plugin is a plugin that adds Progressive Web App features to a WordPress site. Once installed, it can make it easier to add features such as: Add to Home Screen App-like display Home screen icons Automatic manifest.json generation Traditionally, many of these settings had to be configured manually. With a PWA plugin, much of that setup can be handled automatically. Traditional WordPress PWA Plugins vs. OJapp PWA Marketing Traditional PWAs are generally based on one idea: Turn the entire website into a single app. For example, […]

          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

            How much can a PWA actually do on an iPhone in 2026? PWAs on iOS have changed significantly over the last few years. Some features that once felt unreliable now work well, while other behaviors still differ from Android. After repeatedly testing PWAs on real iPhones, my conclusion is simple: PWAs work well on iOS in 2026, but you should design them as iOS web apps rather than expecting Android Chrome behavior. Home Screen installation, standalone display, start_url, scope, custom icons, Service Workers, Web Push, and modern Web APIs are all usable on iPhone. But install UX, display modes, icon handling, storage behavior, and some manifest features still behave differently from Android. This guide explains what PWAs can and cannot realistically do on iOS in 2026, based on real-device testing. Quick answer: What can PWAs do on iOS in 2026? Feature iOS support Practical note Add to Home Screen Yes Available through Safari’s Share menu Standalone app-like display Yes Works well for Home Screen web apps Web App Manifest Yes Supported, but some behavior differs from Android start_url Yes Controls […]

              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 […]

                The manifest.json id Trap: How to Avoid Duplicate PWA Install Problems

                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 […]

                  Why start_url: “.” May Be the Best Choice for PWAs That Should Reopen the Same Page

                  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 […]

                    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 […]

                    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.