AUTHOR

おじゃち

The Limits of Local Storage: Capacity, Deletion Timing, and Safety Explained

The Limits of Local Storage: Capacity, Deletion Timing, and Safety Explained LocalStorage is commonly used in modern web apps to store user settings and small pieces of data directly on the device. But many developers (and users) are surprised to learn that localStorage has clear limitations, strict capacity limits, and unexpected deletion behaviors—especially on iPhone. This article explains localStorage’s storage limits, why data sometimes disappears, how browsers decide what to delete, and how to use localStorage safely. What Is Local Storage? (Quick Refresher) localStorage is a simple browser-based storage system used to save small amounts of data on the user’s device. It’s commonly used for: Saving UI preferences Keeping temporary flags Preserving PWA setup states Unlike cookies, localStorage does not expire automatically. But that does not mean it stays forever—especially on iOS. How Much Can You Store? Actual Capacity Limits The biggest limitation: localStorage is very small. Most environments allow only around 5MB. Browser / Platform Approx. Capacity iOS Safari ~5MB Android Chrome 5–10MB iOS PWA (standalone) ~5MB Desktop Browsers 10MB around localStorage is meant for very small configuration data—not large JSON files, images, or app datasets. If you exceed the limit, the browser throws a QuotaExceededError and the save […]

What Is Local Storage? A Simple Guide to Cache, Cookies, and Browser Storage

What Is Local Storage? A Simple Explanation of Cache, Cookies, and Browser Storage If your phone starts showing messages like “Storage Almost Full” or Safari/Chrome feels slow, one major cause is the amount of locally saved browser data. In this article, we’ll explain—without technical jargon— the difference between cache, cookies, and local storage, and how each one affects your phone. What Is Local Storage? Local storage refers to data that websites and apps save directly on your device. This helps pages load faster and keeps your settings remembered. There are three main types: Cache: Copies of images and previously visited pages (for speed) Cookies: Login information and site preferences Local Storage: Data used by web apps (settings, state, small files) All are useful—but too much stored data can slow down your phone and consume storage. What Happens If You Delete Them? Cache (Safe to Delete Anytime) Stores images, videos, and page snapshots No major downside when removed Pages may load slightly slower the first time Cookies (Delete With Caution) Keep login sessions and site preferences Deleting them logs you out of sites Shopping carts may reset Local Storage (Depends on the App) Used by web apps to save internal data […]

PWA vs Shortcuts vs OJapp — What’s the Difference and Which Should You Use?

PWA vs Shortcuts vs OJapp — What’s the Difference and Which Should You Use? When adding something to the smartphone Home Screen, there are actually three completely different methods behind it: PWA, Shortcuts, and OJapp. All three place an icon on the Home Screen, but the internal mechanics, usability, flexibility, and shareability are totally different. A Quick Comparison of the Three Methods Method Flexibility Setup Difficulty Shareability Best Use Case PWA Medium–High Moderate Automatic Developers offering an app-like experience Shortcuts Very High Complex Not shareable Users customizing their own Home Screen OJapp High Very easy Shareable via URL Creators who want custom icons for shared links ① PWA (Progressive Web App) PWA allows a website to behave like an app. It is created by the developer and provided to users. manifest.json defines icons, name, and colors Service Worker adds app-like behavior and caching Home Screen launch hides the browser UI User customization is limited, but for website owners, PWAs provide “app-like experience without the App Store.” ✔ Who Should Use a PWA Website owners who want an official app-style experience Blogs, stores, SaaS tools that want branded icons Cases where users should not perform extra configuration ✘ When PWA Is […]

How to Build a PWA: A Beginner-Friendly Guide to manifest.json, Service Workers, and Home Screen Setup

How to Build a PWA: A Step-by-Step Guide to manifest.json, Service Workers, and Home Screen Support If you want to turn your website into an app-like experience or make it look cleaner when added to the Home Screen, you need to implement PWA functionality. Although PWAs may sound technical, the core requirements are surprisingly simple. You only need two things: manifest.json (app metadata) Service Worker (caching and behavior control) Set these up correctly, link them to your HTML, and your website can function as a PWA. 1. Create manifest.json The manifest file contains your app’s name, icon settings, theme color, and how the app should behave when launched from the Home Screen. { "name": "App Name", "short_name": "Short Name", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#ffffff", "icons": [ { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ] } The most important part is the icons section— Home Screen icons come from here. Include the manifest in your HTML: <link rel="manifest" href="/manifest.json"> 2. Register a Service Worker The Service Worker (SW) gives a PWA its “app-like” feel by running in the background. Start with a minimal sw.js: self.addEventListener("install", () => { console.log("Service […]

What Is a PWA? A Simple Guide to How Websites Become “Apps” on Smartphones

What Is a PWA? A Simple Explanation of How Websites Become “Apps” on Your Phone You might have wondered: “What’s the difference between ‘Add to Home Screen’ and a real app?” “How can a website behave like an app without downloading anything?” The answer is PWA — Progressive Web Apps. PWAs allow a website to function almost like a mobile app on both iPhone and Android, directly from the browser. What Is a PWA? A PWA is a technology that lets a website opened in Safari or Chrome launch from the Home Screen like a native app. PWAs typically offer three major features: An icon on the Home Screen A full-screen display with no browser UI (Depending on setup) Offline functionality The key advantage: No app store, no installation — just the web acting like an app. “Add to Home Screen” Is Actually a PWA Feature The “Add to Home Screen” option in Safari on iPhone is part of the PWA system. However, not every website works as a full PWA. To qualify, a site must include: manifest.json — defines app name, icons, display mode Service Worker — handles caching and offline control If either is missing, the site behaves […]

Home Screen Customization in 2026: How iOS Evolved and What Users Want Now

Home Screen Customization in 2026: How iOS Evolved and What Users Want Now For years, Home Screen customization meant relying on external apps, icon packs, aesthetic themes, or wallpaper sets to completely change the look of your device. But between the 2024–2026 iOS updates, the landscape changed dramatically. iPhone Now Creates a “Unified Look” Using Only Built-In Features Previously, users needed paid icon packs or complex app setups to achieve a consistent Home Screen design. But recent versions of iOS introduced official features such as: Theme color options that link wallpaper and icon tint More natural, system-level Shortcut icon rendering Automatic visual harmony between widgets and wallpaper Together, these updates allow users to create a clean, unified Home Screen without any third-party tools. Why Selling “Themes Only” Has Become More Difficult The biggest shift came from how user needs changed. A few years ago, demand was high for “aesthetic themes with a fully matching world view.” External apps and theme stores thrived. But now that iOS provides built-in design consistency, users think differently: “If I just want matching colors, I don’t need to pay for it.” “I don’t want extra apps installed just for looks.” “For simple customization, the default […]

How to Create Home Screen Icons for iPhone & Android (Tools Compared)

How to Create Home Screen Icons for iPhone & Android (Tool Comparison Guide) If you want a fully customized and unified Home Screen, the first method you’ll see online is usually “Create icons with Canva.” However, Canva is not the best choice for every situation. The ideal method depends on what kind of icon you want to create. This guide explains how to create Home Screen icons step-by-step and compares Canva, photo apps, and specialized tools so you can choose the easiest method for your goal. Recommended Image Size for Home Screen Icons To ensure clean, sharp icons on both iPhone and Android, use: 1024 × 1024 px (recommended) Minimum: 512 × 512 px PNG format (transparent background supported) iPhone automatically rounds the corners, so leave your image as a square—no need to add rounding yourself. Three Main Ways to Create Home Screen Icons Here are the three most common approaches, depending on your needs. ① Canva (Best for design-heavy icons) Canva offers a huge variety of templates, making it great for icon sets that share the same vibe. Pros Large library of templates Easy to export transparent PNGs Perfect for themed or matching icon sets Cons Detailed design work […]

Why “Add to Home Screen” Doesn’t Work — Causes & Fixes Explained

Why “Add to Home Screen” Doesn’t Work — Complete Guide to Causes & Fixes Many users experience issues where “Add to Home Screen” doesn’t appear, doesn’t respond, or the icon looks incorrect on iPhone or Android. This guide explains every common cause and provides quick, practical solutions you can try immediately. Common Symptoms “Add to Home Screen” is missing The button appears but doesn’t work The icon becomes the wrong image Adding the same page overwrites the previous icon All of these are caused by a few predictable system behaviors. Cause 1: You’re using an in-app browser On iPhone, browsers inside apps like Instagram, X, TikTok, LINE, Facebook do not support “Add to Home Screen.” Fix Tap “Open in Safari” (usually bottom-right) Or copy the URL and open it manually in Safari → It always works once opened in Safari. Cause 2: Safari’s toolbar is hidden (iPhone) When you scroll down, Safari hides the toolbar. Without the toolbar, the Share button disappears— which means the “Add to Home Screen” option won’t show. Fix Tap near the top of the screen to reveal the toolbar Swipe slightly downward to bring it back If you can see the Share button (□↑), you’re […]

How to Add Any Website to Your Home Screen on iPhone and Android

How to Add Any Website to Your Home Screen on iPhone and Android Sometimes you think, “I open this page every day—why do I have to search for it each time?” This guide explains, in the simplest way possible, how to use the standard “Add to Home Screen” feature on both iPhone (Safari) and Android (Chrome). We also cover why icons often become the platform’s logo and what to do if you want full control over the icon. How to Add a Website to the Home Screen on iPhone (Safari) Open the page in Safari Tap the Share button (□↑) at the bottom Select Add to Home Screen Confirm the name and tap Add Your Home Screen icon is now created. Why You Can’t Change the Icon Freely on iPhone Safari looks for the website’s apple-touch-icon file when generating the Home Screen icon. That means platforms like: Medium → Medium’s “M” logo Shopify → Shopify bag icon Etsy → Etsy “E” logo will always display their own branding— not yours—when added to the Home Screen. How to Add a Website to the Home Screen on Android (Chrome) Open the page in Chrome Tap the menu icon (︙) in the top-right […]

How to Change Home Screen Icons Without Using Shortcuts on iPhone

How to Change Home Screen Icons Without Using Shortcuts When adding a website to the iPhone Home Screen using “Add to Home Screen,” the icon is usually determined by the website itself—meaning users cannot freely choose their own image. However, with OJapp, you can change the Home Screen icon and app name without using the Shortcuts app. Why You Normally Can’t Change Home Screen Icons Most websites define their own icons for Home Screen installation. For example: Medium → Medium’s “M” icon Shopify → Shopify’s bag icon Etsy → Etsy’s “E” logo This is due to a standard Safari mechanism: iOS reads the apple-touch-icon specified by the site and uses it automatically. As a result, even if you add your personal blog, portfolio, or shop, all icons end up showing the platform’s branding instead of your own. This can make your Home Screen look inconsistent. The Problem With the Common “Shortcuts Method” Yes—using the Shortcuts app allows you to set a custom icon. But it has several drawbacks: Too many steps; confusing for beginners Difficult to share or recreate for others A Shortcut screen briefly appears before opening the site Many users give up halfway, even if they initially want […]

>OJapp / Petal

OJapp / Petal

OJappは、Webページをそのままホーム画面に置ける仕組みを提供しています。
Petalは、その仕組みを使って “人のページを名刺のように持つ”ためのサービスです。
QRからすぐ開けて、ログインなしでも見れる。 でも、必要なときだけつながれる。
そんな「弱いつながり」を残すために作られています。

CTR IMG