progressive-web-apps

Which icon sizes are required for progressive web apps (PWA) as of Q1 2018?

by

If you want to include a complete set of icons for Android: icon-72×72 icon-96×96 icon-128×128 icon-144×144 icon-152×152 icon-192×192 icon-384×384 icon-512×512 There is some helpful tools like https://www.simicart.com/manifest-generator.html/, to create icons. For iOS, you will need: icon-120×120 icon-180×180 With square background (can’t be transparent background). A good repository for references at https://github.com/gokulkrishh/awesome-meta-and-manifest

Difference between a progressive web app and a hybrid mobile app

by

A hybrid mobile app usually refers to an application built using a combination of web and native technology that is distributed via a native app store. These apps go through Apple, Google, Microsoft, etc’s app store review process. A Progressive Web App is an application built using web technology that runs in the browser and … Read more

Access localStorage from service worker

by

You cannot access localStorage (and also sessionStorage) from a webworker process, they result will be undefined, this is for security reasons. You need to use postMessage() back to the Worker’s originating code, and have that code store the data in localStorage. You should use localStorage.setItem() and localStorage.getItem() to save and get data from local storage. … Read more

PWA – beforeinstallprompt not called

by

Try this : <script> let deferredPrompt; window.addEventListener(‘beforeinstallprompt’, function(event) { // Prevent Chrome 67 and earlier from automatically showing the prompt e.preventDefault(); // Stash the event so it can be triggered later. deferredPrompt = e; }); // Installation must be done by a user gesture! Here, the button click btnAdd.addEventListener(‘click’, (e) => { // hide our … Read more

Vue PWA not getting new content after refresh

by

As I figured out, this question is really only related to beginners in PWA, which don’t know that you can (and need) to configure PWA for achieving this. If you feel addressed now (and using VueJS) remember: To automatically download the new content, you need to configure PWA. In my case (VueJS) this is done … Read more

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

by

As already pointed out, it’s more of a “service workers” issue than a “vue cli” one. First of all, to make sure we’re on the same page, here’s what the boilerplate content of registerServiceWorker.js should look like (vue cli 3, official pwa plugin): import { register } from ‘register-service-worker’ if (process.env.NODE_ENV === ‘production’) { register(`${process.env.BASE_URL}service-worker.js`, … Read more

Angular Service Worker SwUpdate.available not triggered

by

You will probably need to tell the service worker to check the server for updates, I usually use a service for this: export class UpdateService { constructor(public updates: SwUpdate) { if (updates.isEnabled) { interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate() .then(() => console.log(‘checking for updates’))); } } public checkForUpdates(): void { this.updates.available.subscribe(event => this.promptUser()); } … Read more

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

by

Perhaps, don’t show the button until you intercept the automatic pop-up? or In your code, check to see if the window is standalone If it is, you need not show the button if (window.matchMedia(‘(display-mode: standalone)’).matches) { // do things here // set a variable to be used when calling something // e.g. call Google Analytics … Read more

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

by

Chrome(or any PWA supporting browser) triggers the beforeinstallprompt event for Web app install banner, which you can catch and re-trigger in more appropriate time when you think user wont miss it/convinced about adding your site to home page. Starting Chrome version 68, catching beforeinstallprompt and handling the install prompt programmatically is mandatory and no banners … Read more