随笔分类 - PWA
Progressive web app
摘要:const installedApps = await navigator.getInstalledRelatedApps() const packageId = "com.app.pwa" const app = installedApps.find(app => app.id packageId
阅读全文
摘要:Be careful with the storage use cases, free the storage when it is necessary.
阅读全文
摘要:On Android and in Chrome (but not on iOS), it's possible to send push notifications with a PWA. We'll start by asking the user for permission to send
阅读全文
摘要:It's possible to access some, but not all, of the native device features from a PWA. One that we canaccess, is the camera and camera roll. We'll use t
阅读全文
摘要:Because an installed PWA is really just a web app running in a browser, there are some browser behaviors that we may not want in our app, if we're goi
阅读全文
摘要:Android displays a splash screen for PWAs based on the icons and names you provide, but iOS just displays a solid color splash screen for installed PW
阅读全文
摘要:We're storing JSON data in the cache - but that only applies to HTTP GET requests - and not to POST or DELETE requests. We'll add a fetch event listen
阅读全文
摘要:We can view the PWA offline because we are caching the static and CDN assets for the app - but the list of todo items won't display, because those API
阅读全文
摘要:Our service worker caches our static assets - but only those assets that are included in our React App. This means that assets like Bootstrap, which w
阅读全文
摘要:The default service worker that comes with create-react-app doesn't allow for very much configuration. We'll replace that default service worker in tw
阅读全文
摘要:By default, browsers load the assets in a render-blocking way. Modern browsers introduced prefetch and preload which let us specify the priority for a
阅读全文
摘要:Even if you have your application fully cached, you couldn’t perform any external request without internet connection. That’s why in order to build an
阅读全文
摘要:Service Workers get installed and activated in the background, but until we reload the page they don’t take full control in the app. Showing a notific
阅读全文
摘要:In some cases, you want to get fresh data instead of cache data to the screen, such as stock applications. Only fallback to cache data if cannot get r
阅读全文
摘要:If you want to cache API response by using angular service-worker, you can do it in: src/ngsw-config.json:
阅读全文
摘要:If our PWA application has a new version including some fixes and new features. By default, when you refresh your page, service worker will check ngsw
阅读全文
摘要:If you alread have an existing Angular application and want to upgrade to progressive web app. 1. Install @angular/service-worker: 2. Create a file: s
阅读全文
摘要:The takeway is to know when we should cache the content? When we should clean the caches? 1. When should cache the content? This should be done in the
阅读全文
摘要:Link : Video. 1. Firebase Auth: provides simple login with Github, Google, Facebook, Twittr. Link 2. Manifest: 3. Generate Mainfest and icons: Link 4.
阅读全文
摘要:Mainly introduce two libaraies: sw-precache and sw-toolbox. Install: Types of caching Broadly, there are two types of caching Precaching—We'll precach
阅读全文