Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
vsanse authored Dec 31, 2019
1 parent a3ff38c commit baf4466
Showing 1 changed file with 11 additions and 12 deletions.
23 changes: 11 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,28 +126,27 @@ The full case study at [Lancôme rebuilds their mobile website as a PWA](https:/
By default plugin prevent any third party request being cached and is recommended as every third party request may generate a response of type opaque which causes it to get a minimum 7MB storage space in the cache, more at [https://cloudfour.com/thinks/when-7-kb-equals-7-mb/](https://cloudfour.com/thinks/when-7-kb-equals-7-mb/)
. Although it is recommended to not allow opaque response being cached you can allow it using
```
pwa.app.no.opaque.cache=false
pwa.app.no.opaque.cache=false
```
**Recommended way**:
+ Keep no opaque cache property as true in PWA.properties [default plugin behavior].
+ Opt-in to CORS mode: if your third-party CDNs all seem to support CORS, you could opt-in to CORS mode for your CSS and image requests via the [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-crossorigin) attribute, and the responses will no longer be opaque.
+ Add any third party request you want to cache to "static_assets.isml"
+ **Update:** Now you can whitelist your third party requests in service worker by adding them in the array "pwa.app.opaque.whitelist" in "pwa.properties" file.
```
# If you need some opaque third party request to be cached you
# can either whitelist full domain by adding only origin say: "https://www.example.com"
# or you can whitelist only a specific request by using
# full url: "https://example.com/image/250x250" to the array
# If you need some opaque third party request to be cached you
# can either whitelist full domain by adding only origin say: "https://www.example.com"
# or you can whitelist only a specific request by using
# full url: "https://example.com/image/250x250" to the array
pwa.app.opaque.whitelist=["https://www.example.com", "https://example.com/image/250x250"]
pwa.app.opaque.whitelist=["https://www.example.com", "https://example.com/image/250x250"]
```
5. #### Handling default app install behaviour
From version [v1.3](https://github.com/vsanse/plugin_sg_pwa/releases)
+ you can prevent default [mini-infobar](https://developers.google.com/web/fundamentals/app-install-banners#mini-info-bar) from appearing by using
```
pwa.app.preventadd2hs=true
```
If you decide to use above property, be sure to provide some [indication](https://vsanse.github.io/plugin_sg_pwa/#window-add2hs-to-rescue) to the user that your Progressive Web App is installable.
From version [v1.3](https://github.com/vsanse/plugin_sg_pwa/releases) you can prevent default [mini-infobar](https://developers.google.com/web/fundamentals/app-install-banners#mini-info-bar) from appearing by using
```
pwa.app.preventadd2hs=true
```
If you decide to use above property, be sure to provide some [indication](https://vsanse.github.io/plugin_sg_pwa/#windowadd2hs-to-rescue) to the user that your Progressive Web App is installable.
6. #### window.add2hs to rescue
From version [v1.3](https://github.com/vsanse/plugin_sg_pwa/releases) window object will have event add2hs which can be used to prompt user to install PWA using `window.add2hs.prompt()`. You can setup some [button or banner](https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile) to indicate user that your PWA is installable on click of which you can trigger `window.add2hs.prompt()` to prompt user to install PWA.
Expand Down

0 comments on commit baf4466

Please sign in to comment.