{"id":13725033,"url":"https://github.com/GoogleChromeLabs/pwacompat","last_synced_at":"2025-05-07T19:32:30.367Z","repository":{"id":9698446,"uuid":"62868230","full_name":"GoogleChromeLabs/pwacompat","owner":"GoogleChromeLabs","description":"PWACompat to bring Web App Manifest to older browsers","archived":false,"fork":false,"pushed_at":"2024-06-17T21:34:54.000Z","size":522,"stargazers_count":1169,"open_issues_count":21,"forks_count":82,"subscribers_count":35,"default_branch":"master","last_synced_at":"2024-11-11T17:23:16.425Z","etag":null,"topics":["manifest","pwa"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GoogleChromeLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-07-08T07:31:22.000Z","updated_at":"2024-11-08T18:39:09.000Z","dependencies_parsed_at":"2023-09-24T06:32:59.997Z","dependency_job_id":"4c01f024-1487-4365-96f0-6d66eefbc07c","html_url":"https://github.com/GoogleChromeLabs/pwacompat","commit_stats":{"total_commits":145,"total_committers":12,"mean_commits":"12.083333333333334","dds":0.2206896551724138,"last_synced_commit":"b24effcc909b6a8d8b50e0f3b1e8157425dfb30c"},"previous_names":["googlechrome/pwacompat"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fpwacompat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fpwacompat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fpwacompat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fpwacompat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GoogleChromeLabs","download_url":"https://codeload.github.com/GoogleChromeLabs/pwacompat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224645178,"owners_count":17346090,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["manifest","pwa"],"created_at":"2024-08-03T01:02:10.426Z","updated_at":"2024-11-14T15:30:38.554Z","avatar_url":"https://github.com/GoogleChromeLabs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/GoogleChromeLabs/pwacompat.svg?branch=master)](https://travis-ci.org/GoogleChromeLabs/pwacompat)\n\nPWACompat is a library that brings the [Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/) to non-compliant browsers for better [Progressive Web Apps](https://en.wikipedia.org/wiki/Progressive_Web_Apps).\nThis mostly means creating splash screens and icons for Mobile Safari, as well as supporting IE/Edge's Pinned Sites feature.\n\nSo, if you've created a `manifest.webmanifest` but want to have wide support everywhere else—through legacy HTML tags for icons and theming—look no further.\nWe recommend including it from a CDN to get the latest version, or [bundling it yourself](https://npmjs.com/package/pwacompat):\n\n```html\n\u003clink rel=\"manifest\" href=\"manifest.webmanifest\" /\u003e\n\u003cscript async src=\"https://cdn.jsdelivr.net/npm/pwacompat\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003c!-- or another CDN --\u003e\n\u003cscript async src=\"https://unpkg.com/pwacompat\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\nAnd you're done^! 🎉📄\n\nFor more on the Web App Manifest, read 📖 [how to add a Web App Manifest and mobile-proof your site](https://medium.com/dev-channel/how-to-add-a-web-app-manifest-and-mobile-proof-your-site-450e6e485638), watch 📹 [theming as part of The Standard](https://www.youtube.com/watch?v=5fEMTxpA6BA), or check out 📬 [the Web Fundamentals post on PWACompat](https://developers.google.com/web/updates/2018/07/pwacompat).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://storage.googleapis.com/hwhistlr.appspot.com/pwacompat-explainer.png\" height=\"256\" alt=\"PWACompat explainer\" /\u003e\u003cbr /\u003e\n  \u003csmall\u003e\u003cem\u003ePWACompat takes your regular manifest and enhances other browsers\u003c/em\u003e\u003c/small\u003e\n\u003c/p\u003e\n\n# ^Best Practice \u0026amp; Caveats\n\nWhile PWACompat can generate most icons, meta tags etc that your PWA might need, it's best practice to include at least one `\u003clink rel=\"icon\" ... /\u003e`.\nThis is standardized and older browsers, along with search engines, may use it from your page to display an icon.\nFor example:\n\n```html\n\u003clink rel=\"manifest\" href=\"manifest.webmanifest\" /\u003e\n\u003cscript async src=\"path/to/pwacompat.min.js\"\u003e\u003c/script\u003e\n\u003c!-- include icon also from manifest --\u003e\n\u003clink rel=\"icon\" type=\"image/png\" href=\"res/icon-128.png\" sizes=\"128x128\" /\u003e\n```\n\nYou should also consider only loading PWACompat after your site is loaded, as adding your site to a homescreen is a pretty rare operation.\nThis is the approach taken on [v8.dev](https://github.com/v8/v8.dev/pull/310/files) and [Emojityper](https://github.com/emojityper/emojityper/blob/master/src/loader.js#L8).\n\n## iOS\n\nPWACompat looks for a viewport tag which includes `viewport-fit=cover`, such as `\u003cmeta name=\"viewport\" content=\"viewport-fit=cover\"\u003e`.\nIf this tag is detected, PWACompat will generate a meta tag that makes your PWA load in fullscreen mode—this is particularly useful for devices with a notch.\n\nYou can customize the generated splash screen's font by using a CSS Variable.\nFor example:\n\n```html\n\u003cstyle\u003e\n  link[rel=\"manifest\"] {\n     --pwacompat-splash-font: 24px Verdana;\n  }\n\u003c/style\u003e\n```\n\nThis is set directly as a [canvas font](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font), so you must as a minimum include size _and_ family.\nThe default value is \"24px HelveticaNeue-CondensedBold\".\n\n⚠️ PWACompat won't wait for your fonts to load, so if you're using custom fonts, be sure to only load the library after they're ready.\n\n### Old Versions\n\nPrior [to iOS 12.2](https://twitter.com/mhartington/status/1089293403089784832), Mobile Safari opens external sites in the regular browser, meaning that flows like Oauth won't complete correctly.\nThis [isn't a problem with PWACompat](https://github.com/GoogleChromeLabs/pwacompat/issues/15), but is an issue with PWAs on iOS generally.\n\n## Session Storage\n\nPWACompat uses `window.sessionStorage` to cache your site's manifest (and on iOS, any updated icons and generated splash screens).\nThis expires after a user navigates away from your page or closes their tab.\n\n# Details\n\nWhat does PWACompat actually do?\nIf you provide a Web App Manifest, PWACompat will update your page and:\n\n* Create meta icon tags for all icons in the manifest (e.g., for a favicon, older browsers)\n* Create fallback meta tags for various browsers (e.g., iOS, WebKit/Chromium forks etc) describing how a PWA should open\n* Sets [the theme color](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android) based on the manifest\n\nFor Safari, PWACompat also:\n\n* Sets `apple-mobile-web-app-capable` (opening without a browser chrome) for display modes `standalone`, `fullscreen` or `minimal-ui`\n* Creates `apple-touch-icon` images, adding the manifest background to transparent icons: otherwise, iOS renders transparency as black\n* Creates dynamic splash images, closely matching the splash images generated [for Chromium-based browsers](https://cs.chromium.org/chromium/src/chrome/android/java/src/org/chromium/chrome/browser/webapps/WebappSplashScreenController.java?type=cs\u0026q=webappsplash\u0026sq=package:chromium\u0026g=0\u0026l=70)\n\nFor IE and Edge:\n\n* Adds meta tags for the [Pinned Sites](https://blogs.msdn.microsoft.com/jennifer/2011/04/20/ie-pinned-sites-part-1-what-are-pinned-sites/) feature\n\nFor PWAs on Windows with access to UWP APIs:\n\n* Sets the titlebar color\n\nDo you think PWACompat should support backfilling more HTML tags needed for older browsers?\n[Let us know!](https://github.com/GoogleChromeLabs/pwacompat/issues)\n\n## Demo\n\nFor a demo, try adding [Emojityper](https://emojityper.com/) or [the demo site](https://googlechromelabs.github.io/pwacompat/demo/) to an iOS home screen (to see splash screens and icons).\nYou can also install Emojityper from the [Microsoft Store](https://www.microsoft.com/p/emojityper/9np2xx3sxmct) (where the titlebar color is automatically set the manifest's `theme_color`).\n\n## Support\n\nThis is supported in most modern browsers (UC Browser, Safari, Firefox, Chrome, IE10+), and fails silenty when unsupported.\nMobile Safari benefits the most from PWACompat, as generating [a large number of splash screens](https://google.com/search?q=ios%20webapp%20splash%20screens) manually is a complex task.\n\n# Web App Manifest\n\nYour Web App Manifest is:\n\n* normally named `manifest.webmanifest` (although some folks name it `manifest.json`)\n* referenced from all pages on your site like `\u003clink rel=\"manifest\" href=\"path/to/manifest.webmanifest\" /\u003e`\n* and should look a bit like this:\n\n```js\n{\n  \"name\": \"Always Be Progressive\",\n  \"short_name\": \"Progressive!\",\n  \"display\": \"browser\",\n  \"start_url\": \"/\",\n  \"background_color\": \"#102a48\",\n  \"icons\": [\n    {\n      \"src\": \"res/icon-256.png\",\n      \"sizes\": \"256x256\"\n    },\n    {\n      \"src\": \"res/icon-128.png\",\n      \"sizes\": \"128x128\"\n    }\n  ]\n}\n```\n\nFor more information on the Web App Manifest, and how e.g., modern browsers will prompt engaged users to install your site to their home screen, check out [Web Fundamentals](https://developers.google.com/web/fundamentals/web-app-manifest/).\nThere's also a number of [online generators](https://www.google.com/search?q=web+app+manifest+generator).\n\n# Release\n\nCompile code with [Closure Compiler](https://closure-compiler.appspot.com/home).\n\n```\n// ==ClosureCompiler==\n// @compilation_level ADVANCED_OPTIMIZATIONS\n// @output_file_name pwacompat.min.js\n// ==/ClosureCompiler==\n\n// code here\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGoogleChromeLabs%2Fpwacompat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGoogleChromeLabs%2Fpwacompat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGoogleChromeLabs%2Fpwacompat/lists"}