Questions tagged [progressive-web-apps]

A progressive web application provides an application-like user experience that is low friction and is built using modern web capabilities and hosted on the web and can become an application on the user's system over time.

Progressive web applications are mobile experiences that combine the best of the web and the best of applications. They’re useful to users from the very first visit as "regular" sites that live in a tab, no install required. But as the user progressively builds a relationship with them over time, they become more and more powerful; loading extremely quickly even on flaky networks, sending relevant push notifications, and even having an icon on the homescreen and loading as top-level, fullscreen experiences.

A progressive web application is built with progressive enhancement as the core tenant so that they work for as many users as possible irrespective of browser choice. When the user agent (such as Chrome, Opera, and Firefox) supports technologies like Service Worker, Web Push, and the Add to Homescreen banner, the applications can be enhanced to provide a first class native-like experience for the user.

Progressive web applications tend to be architected around the concept of an App Shell. The shell of the functionality is loaded in and displayed to the user (and potentially permanently cached offline) and the content is loaded in dynamically as the user navigates around the app.

More information about progressive web applications can be found in the following links:

Articles about how real-world progressive web applications have been built:

5456 questions
356
votes
21 answers

How to Detect Browser Back Button event - Cross Browser

How do you definitively detect whether or not the user has pressed the back button in the browser? How do you enforce the use of an in-page back button inside a single page web application using a #URL system? Why on earth don't browser back…
148
votes
9 answers

Options for testing service workers via HTTP

I want to test service workers but I have a virtual host setup and I can't seem to be able to enable https on localhost. How can I whitelist my local virtual host url to test service workers whenever I try and register for the service worker on the…
121
votes
2 answers

When and how does a PWA update itself?

As far as I know, once you click "add to homescreen" on a PWA's website, the browser generates an .apk using the provided manifest file and sources and installs it like a normal app. I noticed that when I update the website, the app also displays…
116
votes
2 answers

What features do Progressive Web Apps have vs. native apps and vice-versa, on Android

In 2015 Google introduced a new approach for developing web apps for Android: progressive web apps. One can create an application that will look like a native application, will be able to use device's hardware like camera and accelerometers, receive…
Michael
  • 53,859
  • 22
  • 133
  • 139
102
votes
3 answers

PWA: How to programmatically trigger : "Add to homescreen"? on iOS Safari

I released a server rendered progressive web app recently and everything works great so far. However, Android using chrome shows a banner to download the app which is awesome, but it doesn't on iOS. Using Safari, a user needs a few clicks to get to…
glemiere
  • 4,790
  • 7
  • 36
  • 60
94
votes
5 answers

Javascript to check if PWA or Mobile Web

I was curious if anyone knew a javascript based method for detecting whether the web experience was being run as a PWA (progressive web app) or it was simply being run as a standard mobile website (with full browser UI). Is there any difference…
PorcupineRending
  • 1,245
  • 1
  • 11
  • 16
82
votes
6 answers

Sending Push Notifications to iOS from PWA

I've got a Progressive Web App which made with Blazor WebAssembly and I was wondering if I can send push notifications to iOS devices? Although people said if works now on Safari on MacOS, Push API's website says that it does not support Safari on…
82
votes
5 answers

What is the storage limit for a service worker?

Most of the browsers provide localStorage with the storage limit of 5MB per domain. Are there such memory limits/constraints with respect to service workers? I know that web workers (on which service workers are based) don't have such limitations.…
Nachiketha
  • 21,705
  • 3
  • 24
  • 32
79
votes
2 answers

What is progressive web app solution for IOS

I was wondering what's the solution of progressive web app for IOS devices since their default brower SAFARI doesn't yet support progressive web apps. Whats the alternate then for IOS counterparts?
Manjari
  • 901
  • 1
  • 6
  • 10
78
votes
2 answers

Service worker JavaScript update frequency (every 24 hours?)

As per this doc on MDN: After that it is downloaded every 24 hours or so. It may be downloaded more frequently, but it must be downloaded every 24h to prevent bad scripts from being annoying for too long. Is the same true for Firefox and…
shailesh mishra
  • 801
  • 1
  • 8
  • 10
64
votes
6 answers

Site cannot be installed: no matching service worker detected

Hey I am trying to program my first pwa and got the following problem: when I start my web app I get the following error: Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service…
62
votes
2 answers

What's the difference between using the Service Worker Cache API and regular browser cache?

In my Progressive Web App, should I be using the Cache API in a service worker for my static assets, or should I just rely on the browser's native cache control for these? What's the difference?
Joe Marini
  • 1,540
  • 2
  • 11
  • 12
60
votes
5 answers

Service worker is caching files but fetch event is never fired

I have just attempted to implement service workers to cache some JSON files and other assets on a static site (running on localhost chrome Version 47.0.2526.73 (64-bit)). Using cache.addAll() I have added my files to the cache, and when I open the…
58
votes
5 answers

Can I use Add to home screen in Chrome on an iOS device?

I know I can use Chrome on a desktop or Android device to “Add to Home screen”. I know I can use “Add to homes screen” in Safari iOS. But, can I use “Add to home screen” feature in Chrome for iOS?
55
votes
3 answers

manifest.json vs manifest.webmanifest

I'm developing an application using mongodb, Node.JS and PWA. In the first step of developing I don't know what is the difference between manifest.json and manifest.webmanifest.
Mostafa Ghadimi
  • 5,883
  • 8
  • 64
  • 102
1
2 3
99 100