progressive-web-apps

Update UI when Service Worker installed successfully

拜拜、爱过 提交于 2019-12-08 12:11:37
问题 Looks like Service Worker runs in a worker context and has no access to the DOM. However, once Service Worker installed, I want my users to know that the app will now work offline. How can I do that? 回答1: When the Service Worker is in activated state , this is the perfect time to display the toast ' Content is cached for offline use '. Try something below code while registering your service worker. if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js').then

Media Notifications using the Media Session Web API doesn't work with Web Audio API

只谈情不闲聊 提交于 2019-12-08 09:31:46
问题 I'm trying to implement custom notifications into my PWA for the currently playing audio content. As the title states; I'm using Android v8.1.0 with the Google Chrome App v68.0.x. According to this article: The Media Session API is supported in Chrome 57 . I assume the version I'm using should be more than up-to-date to work with these notifications. First, a code snipped for the audio content I play: let context = getContext(); await context.resume().catch(console.error); let source =

Aurelia CLI PWA with Webpack and Workbox

心不动则不痛 提交于 2019-12-08 05:37:59
问题 Last night I attempted to create a PWA using the latest aurelia-cli (version 0.32.0). I created a custom setup with au new that uses Webpack and TypeScript. After that I followed the Workbox with Webpack instructions from Google. npm install workbox-cli --saveDev npm install workbox-webpack-plugin --saveDev service worker is running offline fails doesn't find webpack-dev-server.js (not in dist), app.xxx.bundle.js and vendor.asdf.js are not in the generated sw.js even though in dist folder au

Cache images received from Firebase Storage in PWA application

99封情书 提交于 2019-12-08 05:02:48
问题 I have an application in Angular with PWA configured, besides caching assets/images I would also like to cache the images that are in Firebase Storage once they are loaded when I am Online. My application makes use of the Cloud Firestore database with data persistence enabled. When I need to load the avatar of the authenticated user on the system in offline mode, it tries to load through the photoURL field, but since it is offline I can not load the image so the image is not displayed and

Workbox pre-cached audio with range requests router fails to play in Chrome when served from Firebase

此生再无相见时 提交于 2019-12-08 05:00:28
问题 Background I have created a PWA test project to find out how to get audio caching working with Workbox, including scrub/seek using the range requests plugin. I want the app to precache all audio and for this audio to be playable offline, including scrub/seek. Pre-caching the audio can be done in one of two ways: Using Workbox injectManifest. By manually adding audio files to a cache using cache.add(URL) But audio files cached with the first method (injectManifest) will not scrub/seek because

service worker install event is called before register event is completed

我们两清 提交于 2019-12-08 04:03:54
问题 I have attached install event to service worker as below. But Install event fired before register event is completed. See code snippets and console logs below. My concern is how install event is fired before register event is completed? if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./service-worker.js',{scope : '/'}).then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); })

Angular: fully install service worker before anything else

点点圈 提交于 2019-12-08 03:59:40
问题 I'm writing a PWA in Angular that needs to be ready to go offline from a single page load. The documentation for the service worker life cycle specifies that the worker is installed but not active immediately: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle This is by design and can be overruled by calling clients.claim() . The problem with this is that Angular loads the service worker after the whole app has been loaded so claim() has nothing left to claim.

Cache images received from Firebase Storage in PWA application

对着背影说爱祢 提交于 2019-12-07 18:00:33
I have an application in Angular with PWA configured, besides caching assets/images I would also like to cache the images that are in Firebase Storage once they are loaded when I am Online. My application makes use of the Cloud Firestore database with data persistence enabled. When I need to load the avatar of the authenticated user on the system in offline mode, it tries to load through the photoURL field, but since it is offline I can not load the image so the image is not displayed and this is not legal for the user. In my code I load the image as follows: <img class="avatar mr-0 mr-sm-16"

Is IndexedDB on Safari guaranteed to be persistent?

这一生的挚爱 提交于 2019-12-07 14:32:39
问题 Similar to this question, is IndexedDB guaranteed to be persistent ? ie. Safari will not reclaim disk space if the device is low on memory. 回答1: Safari have "No Eviction policy", meaning it will not automatically clean the IndexDB on low disk pressure, without user doing it manually. IndexDB is one of the fast evolving feature and you can expect to have a different eviction policy any time with no announcement. You should always build with fall back options. Chrome has explicit persistent

Angular 6 PWA service worker not serving content offline

妖精的绣舞 提交于 2019-12-07 14:11:55
问题 I'm trying to set up a PWA with Angular 6 and having trouble to make the service worker serve content offline. I tried a lot of configurations and stuff for a couple of days now but with no success. The service worker seems to be registered and running lighthouse in audits tab in Chrome passes the pwa test. I'm using Contentful to serve texts/assets for this site. Service worker is fetching the content from dataGroups but it returns a 204 code when the service worker is doing the fetching. I