Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ServiceWorker caching for static assets #5524

Merged
merged 1 commit into from
Oct 31, 2017

Conversation

nolanlawson
Copy link
Contributor

This is a less ambitious re-do of #3052.

Instead of trying to cache all possible files, this PR just adds the static files (JS, CSS, fonts, etc.) to the Service Worker cache.

We already recommend cache-control: immutable in the Production guide, but using offline-plugin has additional benefits:

  • resources fall out of the HTTP cache all the time; they are much less likely to be evicted from the ServiceWorker caches
  • this allows us to proactively fetch and cache stuff the user might need, e.g. emoji_picker.js
  • this works for browsers that don't support cache-control: immutable such as Safari (which will fall back from ServiceWorker to AppCache)

I also went ahead and removed public_timeline.js and community_timeline.js from <link rel=preload> because I don't believe they're needed anymore, since the SW will fetch and cache them on installation. Instead we only preload the stuff we would need for first page load, which is compose+home+notifications+getting_started.

This is live on https://malfunctioning.technology for testing. To see what files are cached and how, check out https://malfunctioning.technology/sw.js (pretty-printed below 😃) and https://malfunctioning.technology/packs/appcache/manifest.appcache. The offline-plugin docs can help explain what the different sections are.

Relevant part of sw.js pretty-printed:
var __wpo = {
        assets: {
            main: [
                "/packs/features/compose-427dd9552de05be15253.js",
                "/packs/modals/onboarding_modal-65e316894ee989cce37d.js",
                "/packs/features/public_timeline-04b1de7b2c4d5f35da01.js",
                "/packs/features/community_timeline-8d33c58ea6cb7f77d563.js",
                "/packs/features/hashtag_timeline-a8a3f857f7e7cacdb693.js",
                "/packs/emoji_picker-ee64d3d141eca2de9c4d.js",
                "/packs/features/notifications-f34cbda7f1f9ccfa1263.js",
                "/packs/features/home_timeline-1d9e450c51afc01d6cc3.js",
                "/packs/features/account_timeline-32135c7ba76f1a3197db.js",
                "/packs/features/pinned_statuses-d35cdec48804667ac932.js",
                "/packs/features/favourited_statuses-87e4afe0b7a4c7e728b0.js",
                "/packs/features/status-0bf3394153e33c85b27e.js",
                "/packs/features/following-0ded7ceb3f40e8ee1e0c.js",
                "/packs/features/followers-7aac03c8e3681c64ac04.js",
                "/packs/features/account_gallery-f2f4ce995143b620d345.js",
                "/packs/modals/report_modal-366a7c530279704b257a.js",
                "/packs/features/follow_requests-45fa55062c69589873cb.js",
                "/packs/features/mutes-5e21acae88bf3910bd48.js",
                "/packs/features/blocks-5129f97d428a6f164b7b.js",
                "/packs/features/reblogs-35006c8ec2e059bf5fc7.js",
                "/packs/features/favourites-19ca7e480f2c1285aedf.js",
                "/packs/features/getting_started-7a0a77add6898233f358.js",
                "/packs/features/generic_not_found-b05aba0ae0db4330c389.js",
                "/packs/modals/embed_modal-06920be6ef44546d5d77.js",
                "/packs/status/media_gallery-aa1c714dfd980a779d49.js",
                "/packs/application-06593deabd2b886e9643.js",
                "/packs/share-274e0867e99aef12bc50.js",
                "/packs/about-d0de2ea84241cc1c76b2.js",
                "/packs/public-3e19bed64e22d79cf7e1.js",
                "/packs/default-f84d38b9663409c8e35e.js",
                "/packs/admin-64e5316f462ee0a38103.js",
                "/packs/common-53f01dcfef31c6ab9166.js",
                "/packs/common-b53dca5ee3777179c45c.css",
                "/packs/default-b53dca5ee3777179c45c.css",
                "/packs/manifest.json"
            ],
            additional: [
                "/emoji/1f602.svg",
                "/emoji/sheet.png"
            ],
            optional: [
                "/packs/locale_zh-TW-a4132eb4548342223217.js",
                "/packs/locale_zh-HK-c828aef134f88a83fe58.js",
                "/packs/locale_zh-CN-19eeaf905b2276d70146.js",
                "/packs/locale_uk-043ff9f88cc8e617f0d3.js",
                "/packs/locale_tr-d9da443f1f5b3a622c45.js",
                "/packs/locale_th-437dc5447d22807716b2.js",
                "/packs/locale_sv-749df54ab11b86e20a56.js",
                "/packs/locale_ru-0b48cf0a41daa2cc3af8.js",
                "/packs/locale_pt-a64731194c86172ea471.js",
                "/packs/locale_pt-BR-6864c4c25873f7cdb7cb.js",
                "/packs/locale_pl-146f4ab0fdafc89282c4.js",
                "/packs/locale_oc-2d0e667092c2153c0857.js",
                "/packs/locale_no-f946b133ac91f0fe4e6d.js",
                "/packs/locale_nl-36c32a9943a52311313f.js",
                "/packs/locale_ko-fff73ed1eee5fc1d6d45.js",
                "/packs/locale_ja-de3da8616768136e68a9.js",
                "/packs/locale_it-cfaeedcbfb4f5b35bc01.js",
                "/packs/locale_io-abbd96a8c0be79d6df82.js",
                "/packs/locale_id-392ee983cfb5e6ff9893.js",
                "/packs/locale_hu-9d4cce95962642313dce.js",
                "/packs/locale_hr-ef508a6d9151073a934c.js",
                "/packs/locale_he-a3353b83eb871391c326.js",
                "/packs/locale_fr-77c63da144f97aef43ba.js",
                "/packs/locale_fi-7791535f6c9d8043aef6.js",
                "/packs/locale_fa-ca6c8367219ab7bbb0e1.js",
                "/packs/locale_es-8c0935d3ba7f19822e70.js",
                "/packs/locale_eo-3e7d5506e540096876a4.js",
                "/packs/locale_en-4e0b641d3e93448c7f31.js",
                "/packs/locale_de-026fc83316e8c135f0af.js",
                "/packs/locale_ca-5b1f28a8a33f83f3f2ce.js",
                "/packs/locale_bg-f41fee2a2fbee056b142.js",
                "/packs/locale_ar-d52b0a5d8e716ea0ee66.js",
                "/packs/base_polyfills-906c3ad28800ad9508b7.js",
                "/packs/extra_polyfills-edf946b742c116d3e11f.js",
                "/packs/fontawesome-webfont-af7ae505a9eed503f8b8e6982036873e.woff2",
                "/packs/roboto-italic-webfont-50efdad8c62f5f279e3f4f1f63a4f9bc.woff2",
                "/packs/roboto-bold-webfont-f633cb5c651ba4d50791e1adf55d3c18.woff2",
                "/packs/roboto-medium-webfont-69c55fc2fe77d38934ea98dc31642ce6.woff2",
                "/packs/roboto-regular-webfont-3ec24f953ed5e859a6402cb3c030ea8b.woff2",
                "/packs/robotomono-regular-webfont-6c1ce30b90ee993b22618ec489585594.woff2",
                "/packs/Montserrat-Regular-080422d4c1328f3407818d25c86cce51.woff2",
                "/packs/mastodon-getting-started-758db9bb72f30f65b07bb7b64f24ea83.png",
                "/packs/mastodon-not-found-afb3fe71154b0c7518f25c70897c03d2.png",
                "/packs/void-65dfe5bd31335a5b308d36964d320574.png",
                "/packs/elephant-friend-1-18bbe5bf56bcd2f550f26ae91be00dfb.png",
                "/packs/elephant-fren-d16fd77f9a9387e7d146b5f9d4dc1e7f.png",
                "/packs/elephant-friend-df0b9c6af525e0dea9f1f9c044d9a903.png",
                "/packs/preview-9a17d32fc48369e8ccd910a75260e67d.jpg",
                "/packs/logo-fe5141d38a25f50068b4c69b77ca1ec8.svg",
                "/packs/logo_alt-6090911445f54a587465e41da77a6969.svg",
                "/packs/logo_full-96e7a97fe469f75a23a74852b2478fa3.svg"
            ]
        },
        externals: [
            "/emoji/1f602.svg",
            "/emoji/sheet.png"
        ],
        hashesMap: {
            d6f48cba7d076fb6f2fd6ba993a75b9dc1ecbf0c: "/packs/fontawesome-webfont-af7ae505a9eed503f8b8e6982036873e.woff2",
            "8aadd54157395376ea8c22827bde88e67f31358e": "/packs/roboto-italic-webfont-50efdad8c62f5f279e3f4f1f63a4f9bc.woff2",
            e2fc71044647b6edf7a3ba41429d5d626e63710a: "/packs/roboto-bold-webfont-f633cb5c651ba4d50791e1adf55d3c18.woff2",
            b66f9a200f8671202198f0238b4729e127bc0dac: "/packs/roboto-medium-webfont-69c55fc2fe77d38934ea98dc31642ce6.woff2",
            "74f352b40a57789750d3c738c710a82cdb0f254a": "/packs/roboto-regular-webfont-3ec24f953ed5e859a6402cb3c030ea8b.woff2",
            "1e149b7d5f1c5a5c4971cb523450118b1d50ed47": "/packs/robotomono-regular-webfont-6c1ce30b90ee993b22618ec489585594.woff2",
            c6aade94b414951dc75e41b6f30fc1fa93bf89fb: "/packs/Montserrat-Regular-080422d4c1328f3407818d25c86cce51.woff2",
            "606c0a294501407cb606af6a2e99ad086691a2d5": "/packs/mastodon-getting-started-758db9bb72f30f65b07bb7b64f24ea83.png",
            "07f2e56474ad40bb2eeefa96747db607148b48e6": "/packs/mastodon-not-found-afb3fe71154b0c7518f25c70897c03d2.png",
            "7e2065071fefe6d54f64b821bf575a0ab49b92c0": "/packs/void-65dfe5bd31335a5b308d36964d320574.png",
            "5e03126b9137ddaac4cd49ee9d8b5f810c73befa": "/packs/elephant-friend-1-18bbe5bf56bcd2f550f26ae91be00dfb.png",
            "027d2ab934afd67b404426234750c08b516ec223": "/packs/elephant-fren-d16fd77f9a9387e7d146b5f9d4dc1e7f.png",
            ae877f891f7ed247da4e37f126e626065906b050: "/packs/elephant-friend-df0b9c6af525e0dea9f1f9c044d9a903.png",
            aa75bce521938954706802c15e393ea05663e5e0: "/packs/logo-fe5141d38a25f50068b4c69b77ca1ec8.svg",
            f573db9e5698b7a3541880875c3ce88fe03ebee2: "/packs/logo_alt-6090911445f54a587465e41da77a6969.svg",
            "3b339fcffc64574bca7cd2521e25bfbea8c3cbbf": "/packs/logo_full-96e7a97fe469f75a23a74852b2478fa3.svg",
            "361cf83e570038228710feb587738d6b74308e26": "/packs/preview-9a17d32fc48369e8ccd910a75260e67d.jpg",
            "2866f80d7d1e5d6e2037240835cf14be94851968": "/packs/base_polyfills-906c3ad28800ad9508b7.js",
            c33e1bbe66854468e7c04be8c07a2b3e67b68127: "/packs/extra_polyfills-edf946b742c116d3e11f.js",
            "5ee63e0145fb97532de5362e058e9bd7e7535db8": "/packs/features/compose-427dd9552de05be15253.js",
            "90e3e56108bdfa85f9294db8efe2fbb3571b97d0": "/packs/modals/onboarding_modal-65e316894ee989cce37d.js",
            f75de256011e6b7c3393b5e5e896ba58bf18b79a: "/packs/features/public_timeline-04b1de7b2c4d5f35da01.js",
            e179bc1807db0a4179720a87c7429c0e1f374ae2: "/packs/features/community_timeline-8d33c58ea6cb7f77d563.js",
            "19ce10ea04de6e7d793fc4c134f0d9df4f8da130": "/packs/features/hashtag_timeline-a8a3f857f7e7cacdb693.js",
            "163c0e743e269015e420b2d0d94942a78e3eeb0b": "/packs/emoji_picker-ee64d3d141eca2de9c4d.js",
            dcbcfce644b9ae6cbd6fedae779ed0de107bc049: "/packs/features/notifications-f34cbda7f1f9ccfa1263.js",
            "00e2658c500a2ca67f8d8f136eca23467dc2195d": "/packs/features/home_timeline-1d9e450c51afc01d6cc3.js",
            "792a8f2a7c8e6f8632f56b71226d986e96cbf5df": "/packs/features/account_timeline-32135c7ba76f1a3197db.js",
            "2638544b8fb8b92c9f721a656bc3a089cf798dc1": "/packs/features/pinned_statuses-d35cdec48804667ac932.js",
            "07472dd0b1831f504001585074e05aa74374017b": "/packs/features/favourited_statuses-87e4afe0b7a4c7e728b0.js",
            c9bf460ec6b87ddcdef63dbd4ba91e5d2d84e4d8: "/packs/features/status-0bf3394153e33c85b27e.js",
            "739382fb371470de3f7e96e0d61d297706d9d413": "/packs/features/following-0ded7ceb3f40e8ee1e0c.js",
            ae42c66efc90fff3ee4f0b35066ee2d1110f9372: "/packs/features/followers-7aac03c8e3681c64ac04.js",
            "70368e5350aeeb6a2aa265a3d1cf444ae7f50f1f": "/packs/features/account_gallery-f2f4ce995143b620d345.js",
            d4a173d840e33c6bd63093769fc2d4287ec38f2a: "/packs/modals/report_modal-366a7c530279704b257a.js",
            cff40ad26a54f4e31f4cd62588896dff614bd58a: "/packs/features/follow_requests-45fa55062c69589873cb.js",
            fb15a62ad83abb47dae3ce3d84ccaec2c58665f5: "/packs/features/mutes-5e21acae88bf3910bd48.js",
            "2825435308ee43f15912bd98ec04bb15544c51d5": "/packs/features/blocks-5129f97d428a6f164b7b.js",
            "4c7efe35a9fc98732915b634031a8899486c6d65": "/packs/features/reblogs-35006c8ec2e059bf5fc7.js",
            e8210e5bb80bec7df4ac2b9f0b54e7266864e578: "/packs/features/favourites-19ca7e480f2c1285aedf.js",
            "2ffcc2ce7de3a2a4e68636c59cc6d38e26e6391f": "/packs/features/getting_started-7a0a77add6898233f358.js",
            "311638612823b7e5118b4b07cfcce3df81645cea": "/packs/features/generic_not_found-b05aba0ae0db4330c389.js",
            "751743a37d5537791cf334b8c15ce748a2f7abb9": "/packs/modals/embed_modal-06920be6ef44546d5d77.js",
            d179f3c8b1990909f86bab4a6d0297d3abf56442: "/packs/status/media_gallery-aa1c714dfd980a779d49.js",
            cfd188f51259ad767771b43ed86266813d7858ca: "/packs/application-06593deabd2b886e9643.js",
            "498d78d7584471ff0ef741fab270b61694d2491c": "/packs/share-274e0867e99aef12bc50.js",
            ba78a9cf1f5ac4e661990ae93e742eb42dc7cf38: "/packs/about-d0de2ea84241cc1c76b2.js",
            e2545a47f13726c81bb42562e331c2f3015271ac: "/packs/public-3e19bed64e22d79cf7e1.js",
            d91de5049cd72120d8e89a1b593aca6fc0ca5aa4: "/packs/locale_zh-TW-a4132eb4548342223217.js",
            "54460ac7c5c4a03e2cf6fbf0960e4988178f2c83": "/packs/locale_zh-HK-c828aef134f88a83fe58.js",
            "827603587a3dd357a6237e50d70f8969f621af34": "/packs/locale_zh-CN-19eeaf905b2276d70146.js",
            "9de3cb49a80f85415264263cad5d525afcfff285": "/packs/locale_uk-043ff9f88cc8e617f0d3.js",
            "3778f721935636858f18dd13996b9330abb3353d": "/packs/locale_tr-d9da443f1f5b3a622c45.js",
            f383da7bdade0781342acdbe6302e68359df4b1c: "/packs/locale_th-437dc5447d22807716b2.js",
            "51e3152ca91be672b43591c3bc0c67af6843a9f9": "/packs/locale_sv-749df54ab11b86e20a56.js",
            "8124db0a6ff78bae719c0d1b6844368da1e310b8": "/packs/locale_ru-0b48cf0a41daa2cc3af8.js",
            "06356907136ee7ff4e7dcf11c528eea4b313be91": "/packs/locale_pt-a64731194c86172ea471.js",
            "4001a5d529218ed5c47dbcdb3ef5068388c8bc22": "/packs/locale_pt-BR-6864c4c25873f7cdb7cb.js",
            "4f9b1a39bb34511d778ddea2af7793814536f698": "/packs/locale_pl-146f4ab0fdafc89282c4.js",
            "17cb82be1694cd0ff6a40e01b637d52246383fb6": "/packs/locale_oc-2d0e667092c2153c0857.js",
            "25876c50975096b94add58d969221372a346ebf0": "/packs/locale_no-f946b133ac91f0fe4e6d.js",
            "56d18947c2e990cd89ed2cf6b6435d19b4baba83": "/packs/locale_nl-36c32a9943a52311313f.js",
            "117b6eaa98ca72bde952a3eb0bca4081fea97edf": "/packs/locale_ko-fff73ed1eee5fc1d6d45.js",
            "81942d57e648958f453085e55d107e8cad6bcfea": "/packs/locale_ja-de3da8616768136e68a9.js",
            "2c7b7de64d118f15d2f432bb936efc566429400e": "/packs/locale_it-cfaeedcbfb4f5b35bc01.js",
            "905889a7fc63c2016781eeff96e5071964ca37c8": "/packs/locale_io-abbd96a8c0be79d6df82.js",
            ea4a957383e0b2d82f55558584b5eaea5a66d2ca: "/packs/locale_id-392ee983cfb5e6ff9893.js",
            d2a01a8e574b03148917470adaf8bdba150da0ea: "/packs/locale_hu-9d4cce95962642313dce.js",
            c945bd7eb83f0e11afd53481d9940fc93b71a8f5: "/packs/locale_hr-ef508a6d9151073a934c.js",
            "98eba80a7878e8e10f327f1db38b9b57028c9853": "/packs/locale_he-a3353b83eb871391c326.js",
            "1a314a80185332fbe5bc387a8a33205b7471a13e": "/packs/locale_fr-77c63da144f97aef43ba.js",
            "7fe94894700df0daeb328a56c1f2d96a07b68bc4": "/packs/locale_fi-7791535f6c9d8043aef6.js",
            a0b4d0acce9312357d9cbd2189df42a3da763698: "/packs/locale_fa-ca6c8367219ab7bbb0e1.js",
            "823e144322ebe69b8af36d2fb86d95ae0e8f1672": "/packs/locale_es-8c0935d3ba7f19822e70.js",
            cef402784b35c113db6aaaf7edaff5d8ee3387fe: "/packs/locale_eo-3e7d5506e540096876a4.js",
            "933c623c696bb583dc2cf45edc4c83d1492475ac": "/packs/locale_en-4e0b641d3e93448c7f31.js",
            "8c1a646285fc9b56f2b28fba63125c3434574a1a": "/packs/locale_de-026fc83316e8c135f0af.js",
            "2c2acef6b513fbc557ed276538e83f6b8f74b763": "/packs/locale_ca-5b1f28a8a33f83f3f2ce.js",
            "6729a618b9be58d23a91951c5e972faa3072f43f": "/packs/locale_bg-f41fee2a2fbee056b142.js",
            "7d911b935dc8f12728f63b7f36fb8c1746bf86a0": "/packs/locale_ar-d52b0a5d8e716ea0ee66.js",
            f57f2105f4677b111861487a92a5042f590ae23b: "/packs/default-f84d38b9663409c8e35e.js",
            "17d9a0b24e23bdd712637f1616db9361877d84ec": "/packs/admin-64e5316f462ee0a38103.js",
            "8e639d5adc8ba4a42aade5bc79a100a76dc29a31": "/packs/common-53f01dcfef31c6ab9166.js",
            "5139b39d625503bafd00d6a45d33cef6062b87f9": "/packs/common-b53dca5ee3777179c45c.css",
            "9a8192884e051ba23a0015c8c9dce191cc406b74": "/packs/default-b53dca5ee3777179c45c.css",
            "7759de86f864ec61748b33f34de1fb6acb9cb45c": "/packs/manifest.json"
        },
        strategy: "changed",
        responseStrategy: "cache-first",
        version: "10/25/2017, 5:49:52 AM",
        name: "webpack-offline:mastodon",
        pluginVersion: "4.8.4",
        relativePaths: false
    };

@ykzts ykzts added the performance Runtime performance label Oct 27, 2017
@ykzts
Copy link
Sponsor Member

ykzts commented Oct 31, 2017

👍 GOOD 👍

@Gargron Gargron merged commit 0692991 into mastodon:master Oct 31, 2017
cobodo pushed a commit to cobodo/mastodon that referenced this pull request Dec 6, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
performance Runtime performance
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants