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
55
votes
3 answers

PWA icons are not used in iOS 11.3

Now I'm testing PWA on iOS 11.3 and I use the manifest.json file below: { "name": "Maplat PWA Sample", "short_name": "Maplat PWA", "background_color": "#fc980c", "icons": [{ "src": "/Maplat/pwa/icon-96.png", "sizes": "96x96", …
kochizufan
  • 2,120
  • 2
  • 30
  • 50
53
votes
8 answers

Is it possible to make an in-app button that triggers the PWA "Add to Home Screen" install banner?

I understand that with a properly made Progressive Web App mobile browsers will display a banner prompting users to 'Install' the app on their home screen. I have been looking around for a way to trigger that prompt from within the app, but have not…
Adam D
  • 1,962
  • 2
  • 21
  • 37
52
votes
6 answers

check if user has already installed PWA to homescreen on Chrome?

I'm trying to create an "Add To Home Screen" button on my progressive web app, as described in Chrome's documentation. I'm generally following the prescribed pattern, where I have some hidden button which is displayed when Chrome's…
David
  • 2,846
  • 3
  • 22
  • 34
51
votes
7 answers

Angular Service Worker SwUpdate.available not triggered

I'm having a hard time integrating angulars service worker into my application. I followed the guide and it works so far. I can create a shortcut on my homescreen and launch into my app. The problem is that my app somehow doesn't update. If I change…
user9973068
49
votes
2 answers

Vue Cli 3 how to use the official PWA plugin ( Service Worker )

on my first vue project attempting to wrestle with the official PWA plugin ( https://github.com/yyx990803/register-service-worker ). My specific problem: capturing the registered service worker and using it for anything. The github readme shows the…
Erik White
  • 1,016
  • 1
  • 11
  • 13
49
votes
3 answers

Open installed PWA from external url

Is there any method to open website (PWA) urls in the installed PWA in iOS- Safari? Use case: I'm sending email links to login in my PWA, how can I make this url's open directly with the installed PWA instead of the browser?
47
votes
3 answers

Vue PWA not getting new content after refresh

I'm new to Vue and created a project with the PWA Service-worker plugin. After deploying a new version of my App I get these messages in console: After refreshing the page (F5) these messages still appear the same way and the App is still in it's…
user5242820
47
votes
6 answers

Service workers and iOS / Safari

On Chromium's page about service workers there's noted that Service Workers are not supported by Chrome on iOS. I assume that it can be delivered to iOS using some cordova plugins. Is there any other way to use Service Workers on iOS devices?…
Karol Klepacki
  • 2,070
  • 1
  • 18
  • 30
46
votes
6 answers

PWA - beforeinstallprompt not called

Hello I'm trying to install a custom PWA "Add to Homescreen". The ServiceWorkerRegistration is successful. But the function beforeinstallpromp is not calling after register.