{"id":20406675,"url":"https://github.com/xwp/xwpwa","last_synced_at":"2025-03-05T02:22:00.854Z","repository":{"id":54185018,"uuid":"107777991","full_name":"xwp/xwpwa","owner":"xwp","description":"XWPWA","archived":false,"fork":false,"pushed_at":"2021-03-04T15:18:22.000Z","size":30610,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":50,"default_branch":"master","last_synced_at":"2025-01-15T12:16:36.618Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xwp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-21T12:24:32.000Z","updated_at":"2021-03-21T13:39:08.000Z","dependencies_parsed_at":"2022-08-13T08:40:31.410Z","dependency_job_id":null,"html_url":"https://github.com/xwp/xwpwa","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xwp%2Fxwpwa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xwp%2Fxwpwa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xwp%2Fxwpwa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xwp%2Fxwpwa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xwp","download_url":"https://codeload.github.com/xwp/xwpwa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241950859,"owners_count":20047712,"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":[],"created_at":"2024-11-15T05:18:40.133Z","updated_at":"2025-03-05T02:22:00.824Z","avatar_url":"https://github.com/xwp.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PWA Template\n\n## Installation\n\n```bash\nnpm install\n```\n\nor, using [Yarn](https://yarnpkg.com):\n\n```bash\nyarn install\n```\n\nThen\n```bash\nnpm run dev\n```\n\n## Server\nYou can run a server, for reading the documentation or testing.\n```bash\nnpm run server\n```\n\n## Configuration\n\n### Application Titles\n\nFind **PWA Long Name** and replace by the application title.\n\nFind **PWA Name** and replace by your own application short title. This title is used when bookmarking the app to the home screen, and should not be longer than 11-15 characters to avoid cropping.\n\nChange the **pwa_name** inside the package.json along the git URLs.\n\n### Branding Colors\n\n#### Choose background color hex ( #ffffff ).\n\nReplace it in **assets/tasks/icons.js** to line 18 `const brandBackgroundColor`.\n\nReplace it in **assets/manifest.json** to line 4 `\"background_color\"`.\n\n#### Choose theme color hex ( #000000 ).\n\nReplace it in **assets/manifest.json** to line 5 `\"theme_color\"`.\n\nReplace it in **assets/html/index.html** to lines 20 `\"theme-color\"`.\n\nReplace it in **assets/html/index.html** to lines 42 `\"mask-icon\"`. You can improve the visibility of the Safari Pinned Tab Icons by avoiding light colors such as white, bright yellow, or light gray.\n\n#### Choose metro color hex ( #eff4ff ).\n\nPick from [Metro UI Colors](https://colorlib.com/etc/metro-colors/).\n\nReplace it in **assets/html/index.html** to line 32 `\"msapplication-TileColor\"`.\n\n### Icons\n\nUpdate **assets/images/icon.png** with a high resolution, square PNG graphic.\nSVGs are supported, and can be provided by updating `const iconSrc` inside **assets/tasks/icons.js**.\n\nRun the following command to generate all icon sizes from NPM using the [RealFaviconGenerator API](https://realfavicongenerator.net/):\n\n```bash\nnpm run icons\n```\n\nVerify the path to /assets/manifest.json file in the Icons section of the template file has the correct paths to the icons and check them in Chrome Inspector's Application tab.\n\n## Service Worker\n\nThe *assets/src/js/sw.js* gets compiled using the workbox-cli to the root of the project. The configuration of the source and destination paths is inside *workbox-cli-config.js*.\n\nCompile the service worker automatically with the following command:\n```bash\nnpm run sw\n```\n\nBuilding for production compiles the service worker automatically.\n\n### Debugging\n\nTurning the sw_debug to true enables the workbox debugging mode by loading the development service worker.\n```js\nconst sw_debug = true;\n```\n\n## SW Caching Strategies\n\n### 1. Cache-Only (Precache)\n\nThe cache-first strategy will be applied to all internal assets which match the **workbox-cli-config.js**. These will be pre-cached upon SW installation.\nThis is where the paths to the offline template should get defined, by adding a new item in the globPatterns array like:\n```\"assets/html/index.html\"```\n\n### 2. Cache First, Network Fallback\n\nDefining the regular expression for the external web fonts URL enables the webfonts cache for storing them using the cache-first strategy.\nThe regular expression can contain multiple domains for the fonts, like this example with fonts loading from both Typography and Google APIs.\n\nRegular content imagery can be cached using the same strategy. Recommend this over stale while revalidate because newly upload imagery receives new URLs. Precached image assets won't be cached a second time.\n```js\nconst webfontsRegex = 'https://(fonts.googleapis.com|cloud.typography.com)/(.*)';\nconst uploadsRegex = '/wp-content/uploads/(.*)';\nconst cdnImagesRegex = 'https://i(0|1|2).wp.com/(.*)/';\n```\n\nExternal image assets sometimes do not show up in the Cache Storage due to the browser deciding to store them in the main disk cache instead. Successful caching is confirmed by their presence in the corresponding IndexedDB and by the request not failing with the browser in offline mode.\n\nApplication icons defined in the manifest can't get intercepted by the service worker, hence there's no need to define custom caching strategies for them.\n\n### 3. Cache-Network race (Stale while Revalidate)\n\nThis strategy is to be used for the assets which can change frequently, but are non-essential to the user experience to show the latest right away.\n\nDefining the avatars regular expression enables the cache for storing them using the stale while revalidate (cache-network race) strategy.\n\nOnly a check for the presence of an updated assets is done, and does not re-downloading the entire assets.\n\n```js\nconst avatarsRegex = 'https://(.*).gravatar.com/(.*)';\nconst pluginsRegex = '/wp-content/plugins/(.*)';\n```\n\n### 4. Network First, Cache Fallback\n\nSome content must always be kept up-to-date, and with this strategy we fetch the newest content first, and only if that fails the sw delivers old content from the cache.\n\nThe ```htmlRegex``` is setup as a final catch all for local paths that don't fall inside of the wp-admin path.\n\nThe 404 and Offline pages are defined in the manifest and referenced to the cached files from inside the service worker's networkFirst strategy.\n\n ### 5. Network only\n\n Without setting up a specific caching strategy to an outside domain, any other external domains won't get their assets cached by the service worker.\n\n ## CSS\n\n See [CSS readme](https://github.com/xwp/xwpwa/tree/master/assets/src/css/readme.md)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxwp%2Fxwpwa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxwp%2Fxwpwa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxwp%2Fxwpwa/lists"}