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 resources tab in chrome, and click on cache storage, all the files are listed. 

[![screenshot json files shown in cache][1]][1]

The issue I am having is that my service worker is listed as &quot;activated&quot; and &quot;running&quot; in chrome://service-worker-internals however, I cannot determine if the worker is actually intercepting the requests and serving up the cached files. I have added the event listener and even when I console log the event in the service workers dev tools instance, it never hits the break point: 

    this.addEventListener(&#39;install&#39;, function(event) {
      event.waitUntil(
        caches.open(&#39;v1&#39;).then(function(cache) {
          console.log(cache);
          return cache.addAll([
            &#39;/json/0.json&#39;,
            &#39;/json/1.json&#39;,
            &#39;/json/3.json&#39;,
            &#39;/json/4.json&#39;,
            &#39;/json/5.json&#39;,
          ]);
        })
      );
    });

    this.addEventListener(&#39;fetch&#39;, function(event) {
      console.log(event);
      var response;
      event.respondWith(caches.match(event.request).catch(function() {
        return fetch(event.request);
      }).then(function(r) {
        response = r;
        caches.open(&#39;v1&#39;).then(function(cache) {
          cache.put(event.request, response);
        });
        return response.clone();
      }).catch(function() {
      }));
    });


Basically I am running through things exactly as described in HTML5 rocks service workers intro, but I am pretty sure that my assets aren&#39;t being served from the cache. I&#39;ve noted that assets served up from a service worker are noted as such in the network tab of devtools in the size column by indicating &#39;from service workers&#39;.

It just seems as if my code is no different than the examples but it&#39;s not ever hitting the fetch event for some reason. Gist of my code: https://gist.github.com/srhise/c2099b347f68b958884d


  [1]: http://i.stack.imgur.com/SBp4R.png

Service worker is caching files but fetch event is never fired

Now I&#39;m testing PWA on iOS 11.3 and I use the manifest.json file below:

    {
      &quot;name&quot;: &quot;Maplat PWA Sample&quot;,
      &quot;short_name&quot;: &quot;Maplat PWA&quot;,
      &quot;background_color&quot;: &quot;#fc980c&quot;,
      &quot;icons&quot;: [{
        &quot;src&quot;: &quot;/Maplat/pwa/icon-96.png&quot;,
        &quot;sizes&quot;: &quot;96x96&quot;,
        &quot;type&quot;: &quot;image/png&quot;
      },{
        &quot;src&quot;: &quot;/Maplat/pwa/icon-144.png&quot;,
        &quot;sizes&quot;: &quot;144x144&quot;,
        &quot;type&quot;: &quot;image/png&quot;
      },{
        &quot;src&quot;: &quot;/Maplat/pwa/icon-192.png&quot;,
        &quot;sizes&quot;: &quot;192x192&quot;,
        &quot;type&quot;: &quot;image/png&quot;
      },{
        &quot;src&quot;: &quot;/Maplat/pwa/icon-256.png&quot;,
        &quot;sizes&quot;: &quot;256x256&quot;,
        &quot;type&quot;: &quot;image/png&quot;
      }],
      &quot;start_url&quot;: &quot;/Maplat/debug.html?overlay=true&quot;,
      &quot;display&quot;: &quot;standalone&quot;
    }

This works well except icon setting.
In my iOS 11.3 on iPhoneX, icon files are not shown on home screen but screen capture is used as launcher button.

I compared my manifest with other sites, like https://www.ft.com/ or https://r.nikkei.com/, but I couldn&#39;t find any differences in icon settings.
Icons of these sites work well with PWA on iOS 11.3.

What is wrong in my manifest.json?

P.S. My manifest.json works well with Android Chrome.

PWA icons are not used in iOS 11.3

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?

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

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:

&gt; Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

I think my manifest url is right because of this [link][1]


manifest.json

    &quot;start_url&quot;: &quot;.&quot;,
    &quot;display&quot;: &quot;standalone&quot;,
    &quot;orientation&quot;: &quot;portrait&quot;,
    &quot;theme_color&quot;: &quot;#29BDBB&quot;,
    &quot;background_color&quot;: &quot;#29BDBB&quot;

and I register my sw like this:

    if (&#39;serviceWorker&#39; in navigator) {
    navigator.serviceWorker.register(&#39;./sw.js&#39;).then(function(reg) {
        console.log(&#39;Successfully registered service worker&#39;, reg);
    }).catch(function(err) {
        console.warn(&#39;Error whilst registering service worker&#39;, err);
    });
    }


I got my sw from [here][2]

So I am trying to make a simple web app which I can host with [firebase][3].


Whats the problem? Thanks for your help 


  [1]: https://github.com/GoogleChrome/samples/issues/466
  [2]: https://github.com/IncredibleWeb/pwa-tutorial/blob/master/demo/sw.js
  [3]: https://shoppinglist-ecea7.firebaseapp.com/

Site cannot be installed: no matching service worker detected

I understand that with a properly made Progressive Web App mobile browsers will display a banner prompting users to &#39;Install&#39; 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 been able to find anything.

Is there a line of JavaScript that can be used to call the install prompt banner at any time?? Something that I could add to a install button tucked away in a help screen for instance? 

It might be difficult for some users to find the &quot;Add to Home Screen&quot; option if they missed the install banner prompt. I&#39;d like to give them a button they can click to be prompted again. 

### **2020 EDIT**: Yes, this is possible in Chrome - see [answer below](https://stackoverflow.com/a/64727286/8620945)

See this great article: [How to provide your own in-app install experience](https://web.dev/customize-install/) and [my working demo](https://pwa-install-demo.netlify.app/) of the article&#39;s process [applied in a React app](https://github.com/adueck/pwa-install-demo).

Or for a slightly different approach, see [how snapdrop.net did it](https://github.com/RobinLinus/snapdrop).

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

I want to test service workers but I have a virtual host setup and I can&#39;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 localhost? Chrome says https is required to enable service worker. How can I get past this restriction at least for local testing.

Options for testing service workers via HTTP

In 2015 Google introduced a new approach for developing web apps for Android: [progressive web apps][1]. One can create an application that will look like a native application, will be able to use device&#39;s hardware like camera and accelerometers, receive push notifications, have a launcher icon, work in offline, store local data, etc.

On Android, what features do native apps provide that progressive web apps do not support, and vice versa.

  [1]: https://developers.google.com/web/progressive-web-apps

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

As far as I know, once you click &quot;add to homescreen&quot; on a PWA&#39;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 the updated content which suggests that the app is just a wrapper for accessing the website. I also noticed that the update to a website is not displayed instantly, I assume this is due to internal caching.

My question is, are my assumptions correct? Or more generally, when and how are PWAs updatated and is there a way to force an update on a client machine?

When and how does a PWA update itself?

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 between a PWA that is &quot;installed&quot; versus one that isn&#39;t but still has the service worker and/or app cache registered?

Javascript to check if PWA or Mobile Web

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&#39;t on iOS. Using Safari, a user needs a few clicks to get to the &quot;Add to homescreen&quot; feature which is bad.

So here I am, I&#39;m satisfied with my PWA, but I would really love to be able to tell the user myself that this app can be added to homescreen.

As far as I can remember, I saw https://marvelapp.com/ doing it to add a prototype to the homescreen.


PWA: How to programmatically trigger : &quot;Add to homescreen&quot;? on iOS Safari

I was wondering what&#39;s the solution of progressive web app for IOS devices since their default brower SAFARI doesn&#39;t yet support progressive web apps.
Whats the alternate then for IOS counterparts?

What is progressive web app solution for IOS

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&#39;t have such limitations. But Web Workers are not exactly used for assets caching, instead they&#39;re used more for processing (so CPU is the main concern there).

If there&#39;s no limit on the memory size, could a badly designed website crash the browser?

What is the storage limit for a service worker?

As per [this doc on MDN][1]:

&gt; After that it is downloaded every 24 hours or so. It *may* be
&gt; downloaded more frequently, but it must be downloaded every 24h to
&gt; prevent bad scripts from being annoying for too long.

Is the same true for Firefox and Chrome? OR does update to service worker javascript only happens when user navigates to site?


  [1]: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

Service worker JavaScript update frequency (every 24 hours?)

I&#39;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&#39;s website says that it does not support Safari on iOS.

  

* Do I need to wrap every web app if I target iOS? I don&#39;t have a MacBook, do I need to buy one just to achieve this?  

* Also there are Firebase and Azure Notification Hub, Can&#39;t I just use their service to send notifications for iOS? Firebase&#39;s had only Objective-C and Swift examples. 

* This also led to another question: Are notifications&#39; way of transport is platform depended? I&#39;m confused with cloud services&#39; role on this.


Sending Push Notifications to iOS from PWA

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&#39;s native cache control for these? What&#39;s the difference?


All Progressive Web-Apps Solutions on Gang of Coders

Total of 15 Progressive Web-Apps Solutions