{"id":262022,"date":"2017-10-29T18:33:05","date_gmt":"2017-10-30T01:33:05","guid":{"rendered":"http:\/\/css-tricks.com\/?p=262022"},"modified":"2017-10-29T18:33:05","modified_gmt":"2017-10-30T01:33:05","slug":"wordpress-pwas","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/wordpress-pwas\/","title":{"rendered":"WordPress + PWAs"},"content":{"rendered":"<p>One of the sessions from the Chrome Dev Summit, hosted by Das Surma and Daniel Walmsley. It&#8217;s not so much about WordPress as it is about CMS powered sites that aren&#8217;t really &#8220;apps&#8221;, if there <a href=\"https:\/\/css-tricks.com\/poll-results-sites-vs-apps\/\">is such a thing<\/a>, and the possibility of turning that site into a Progressive Web <del>App<\/del><ins>Site<\/del>.<\/p>\n<p>I find the CMS + PWA combo interesting because:<\/p>\n<ul>\n<li>If you aren&#8217;t stoked about AMP, and let&#8217;s face it, a lot of people are not stoked about AMP, but do like the idea of a super fast website, a PWA is likely of high interest. Whereas AMP feels like you&#8217;re making an alternate version of your site, PWAs feel like you&#8217;re making the website you have much better.<\/li>\n<li>Some PWA work is generic and easy-ish (use HTTPS) and some PWA is bespoke and hard (make the site work offline). For lack of a better way to explain it, CMS&#8217;s <em>know about themselves<\/em> in such a way that they can provide tooling to make PWAs way easier. For example, Jetpack just <a href=\"https:\/\/vip.wordpress.com\/2017\/10\/27\/the-new-web-powered-by-jetpack-and-progressive-web-apps\/\" rel=\"noopener\">doing it for you<\/a>. It&#8217;s the same kind of thing we saw with responsive images. It&#8217;s not trivial to handle by hand, but a CMS can just do it for you.<\/li>\n<\/ul>\n<p>If this topic doesn&#8217;t trip your trigger, there is <a href=\"https:\/\/www.youtube.com\/watch?v=RJiWKaYtzKk&#038;list=PLNYkxOF6rcICUD5nBfRdAR6Fveosnqa5m\" rel=\"noopener\">a playlist of all the sessions here<\/a>. Dan Fabulich <a href=\"https:\/\/redfin.engineering\/i-watched-all-of-the-chrome-dev-summit-2017-videos-so-you-dont-have-to-9b62a593c3cb\" rel=\"noopener\">watched<\/a> all 10 hours of it and summarizes it as:<\/p>\n<blockquote><p>Google wants you to build PWAs, reduce JavaScript file size, use Web Components, and configure autofill. They announced only a handful of features around payments, authentication, Android Trusted Web Activities, Chrome Dev Tools, and the Chrome User Experience Report.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>One of the sessions from the Chrome Dev Summit, hosted by Das Surma and Daniel Walmsley. It&#8217;s not so much about WordPress as it is about CMS powered sites that aren&#8217;t really &#8220;apps&#8221;, if there is such a thing, and the possibility of turning that site into a Progressive Web AppSite. I find the CMS [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[1130,264],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":334247,"url":"https:\/\/css-tricks.com\/progressive-web-apps-in-2021\/","url_meta":{"origin":262022,"position":0},"title":"Progressive Web Apps in 2021","date":"February 11, 2021","format":false,"excerpt":"Maximiliano Firtman has a look at PWAs this year, including trying to get a bead on how widespread they are: At the end of 2020, approximately\u00a01% of websites included a Service Worker, and 2.2% had an installable Web App Manifest file. Remember that some platforms -such as Safari on iOS\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/cover.png?fit=1000%2C467&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":254156,"url":"https:\/\/css-tricks.com\/pwa-directory\/","url_meta":{"origin":262022,"position":1},"title":"PWA Directory","date":"April 25, 2017","format":false,"excerpt":"The other day I was watching an interview with Ade Oshineye where he discussed his work on the PWA Directory at Google, a showcase of progressive web apps. And it\u2019s pretty neat! It lists a whole bunch of PWAs out there and you can filter them by Lighthouse metrics \u2013\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":275376,"url":"https:\/\/css-tricks.com\/seriously-though-what-is-a-progressive-web-app\/","url_meta":{"origin":262022,"position":2},"title":"Seriously, though. What is a progressive web app?","date":"August 17, 2018","format":false,"excerpt":"Amberley Romo read a ton about PWAs in order to form her own solid understanding. \u201cProgressive web app\u201d (PWA) is both a general term for a new philosophy toward building websites and a specific term with an established set of three explicit, testable, baseline requirements. As a general term, the\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/pwa-type.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":287823,"url":"https:\/\/css-tricks.com\/weekly-news-pwa-issue-on-ios-performance-culture-anti-tracking-in-browsers\/","url_meta":{"origin":262022,"position":3},"title":"Weekly Platform News: PWA Issue on iOS, Performance Culture, Anti-Tracking in Browsers","date":"May 17, 2019","format":false,"excerpt":"In this week's news: resolving an issue when restarting progressive web apps in iOS, why The Telegraph now vets all scripts before they make it to their codebase, and Microsoft plans to add tracking prevention to the Edge browser.","rel":"","context":"In &quot;Weekly Platform News&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/web-platform-news-0514.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":255094,"url":"https:\/\/css-tricks.com\/production-progressive-web-apps-javascript-frameworks\/","url_meta":{"origin":262022,"position":4},"title":"Production Progressive Web Apps with JavaScript Frameworks","date":"May 27, 2017","format":false,"excerpt":"This last week at Google I\/O, Addy Osmani announced some amazing developer resources for creating Progressive Web Applications (PWAs) that prioritize performance with JavaScript Frameworks. This was truly a team effort- a lot of people worked on these projects to get them going, and it's a really valuable contribution to\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":296519,"url":"https:\/\/css-tricks.com\/why-progressive-web-apps-are-the-future-of-mobile-web\/","url_meta":{"origin":262022,"position":5},"title":"Why Progressive Web Apps Are The Future of Mobile Web","date":"October 4, 2019","format":false,"excerpt":"Here\u2019s one of the best essays I\u2019ve ever read about why progressive web apps are important, how they work, and what impact they have on a business: PWAs are powerful, effective, fast and app-like. It\u2019s hard to imagine a mobile web property that could not be significantly improved via PWA\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/pwa-type.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/262022"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=262022"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/262022\/revisions"}],"predecessor-version":[{"id":262025,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/262022\/revisions\/262025"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=262022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=262022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=262022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}