search

Spomky-Labs / pwa-bundle

PHP library for generating a full featured PWA manifest
https://pwa.spomky-labs.com
MIT License
28 stars 1 forks source link

Document how to cache an external library #148

Open tacman opened 2 months ago

tacman commented 2 months ago

Description

I found a good javascript library for making mobile apps, onsenui, but I can't get it to work with AssetMapper

https://github.com/symfony/symfony/discussions/54342

Instead, I'm adding the script tag at the top, which works, but of course requires an internet connection. How would I add this as a pre-cached URL and CacheOnly, so it would work with offline?

<script src="https://cdn.jsdelivr.net/npm/onsenui@2.12.8/js/onsenui.min.js"></script>

In particular

Please note that you can refer to any URLs, but only URLs served by your application will be cached.

on https://pwa.spomky-labs.com/the-service-worker/workbox/warm-caching

Spomky commented 2 months ago

Something like as follows should work (not tested)

pwa:
    serviceworker:
        enabled: true
        src: "sw.js"
        workbox:
            resource_caches:
                - match_callback: 'origin: cdn.jsdelivr.net'
                  strategy: 'CacheFirst'
                  preload_urls: # Optional, but you are now sure the library is preloaded even if used on another page the user never met before
                      - 'https://cdn.jsdelivr.net/npm/onsenui@2.12.8/js/onsenui.min.js'
tacman commented 2 weeks ago

I'm revisiting this, because last night the jsdelivr cdn was down for several hours because the certificate had expired. LOTS of sites broke, and I was reminded that at least for existing users (not new visitors) if I had this implemented it would have continued to work for a bit.

It does not appear that this is working, though, as the other assets show that they are delivered via the service worker, but not the jsdelivr ones.

image

                - match_callback: 'origin: cdn.jsdelivr.net'
                  strategy: 'CacheFirst'
                  preload_urls: # Optional, but you are now sure the library is preloaded even if used on another page the user never met before
                      - 'https://cdn.jsdelivr.net/npm/onsenui@2.12.8/js/onsenui.min.js'
                      - 'https://cdn.jsdelivr.net/npm/onsenui@2.12.8/css/ionicons/css/ionicons.min.css'
                      - 'https://cdn.jsdelivr.net/npm/onsenui@2.12.8/css/onsen-css-components.min.css'