{"id":5657,"date":"2023-10-03T12:16:44","date_gmt":"2023-10-03T10:16:44","guid":{"rendered":"https:\/\/kabisa.nl\/?p=5657"},"modified":"2023-10-14T13:56:43","modified_gmt":"2023-10-14T11:56:43","slug":"creating-a-whats-new-for-your-pwa","status":"publish","type":"post","link":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/","title":{"rendered":"Creating a “what’s new” for your PWA"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

What’s a PWA?<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A Progressive Web Application is a web application that leverages more of your host Operating System. It can work both online and offline, can synchronize data in the background, and use notifications.<\/p>

In the browser it can act as a website, on mobile as a native app and on laptops and desktops as a desktop app.<\/p><\/blockquote>

PWA’s are locally installed websites, that can work fully detached from the internet. Therefor, their update flow to get the latest code and stat is also different.<\/span><\/p>

Today I want to share a flow I use to inform users about the “what’s new” changes, even before they update their application.<\/p>

The generic update cycle<\/a><\/h2>

When an application is an offline-capable PWA, the general update flow is as follows:<\/p>

\"\"<\/div>
\u00a0<\/div><\/section>

Step 1: Keeping a changelog<\/a><\/strong><\/h2>

It is a good practice to keep a changelog of your application. Oftentimes this is done using a\u00a0CHANGELOG.md<\/code>\u00a0file in the code repository, in the format of “Keep a changelog<\/a>“.<\/p>

To make it easier to use this changelog for the application itself as well, I keep my changes using a\u00a0YAML<\/code>\u00a0file in the repo and have a script that converts this YAML file to a\u00a0CHANGELOG.md<\/code>\u00a0and a more technical\u00a0changelog.json<\/code>\u00a0file. In the JSON variant, I convert the time notation of the YAML file to UNIX timestamps, which I can use to see which changes the user has not seen yet.<\/p>

Step 2: Ability to show the changelog in the application.<\/a><\/strong><\/h2>

To show the changelog in the application, I will not bundle the\u00a0changelog.json<\/code>\u00a0with my application code. Because then the changelog will only change when the application changes.<\/p>

This will be too late, because then the application is already updated, and the user would not be able to see “What’s new” before they update.<\/p>

Instead, I bundle the\u00a0changelog.json<\/code>\u00a0into my service worker.<\/p>

In the service worker, I place the contents as JSON into an app cache, using a fake URL.<\/p>

I also register a fake URL as handler, to serve this JSON data from the cache.<\/p>

\"\"<\/div><\/div><\/section>

So when a new service worker is\u00a0installing<\/code>, I update the app cache.<\/p>

The application can now fetch the new changelog contents with the ‘current’ service worker, and show the new changes.<\/p>

Step 3: Keep track of ‘viewed’ changes<\/a><\/strong><\/h2>

Using the same mechanic to store the changelog in the service worker, you can also use the service worker to manage when the user has seen the latest change. You should store the time of the last change though, not the time the user has seen it. Since the user could see the changes before your next release hits.<\/p>

When you keep track of this inside the service worker, you can also use the\u00a0Badging API<\/a>\u00a0to show a nice badge on your application, using\u00a0navigator.setAppBadge(amountOfNewUpdates)<\/code>.<\/p>

Be aware that the service worker only updates when you open the app already, so a badge will probably be to late. For desktop apps though, you can probably use the\u00a0\ud83e\uddea Web Periodic Background sync API<\/a>\u00a0to place a badge and increase engagement from your users.<\/p><\/blockquote>

Step 4: Let the user install the update<\/strong><\/a><\/h2>

There are a lot of good resources online how to achieve this (the technical details are too much for this post). In essential it boils down to:<\/p>

  1. detecting the installation of a new service worker after registration<\/li>
  2. capture the ‘waiting’ service worker<\/li>
  3. tell your app that there is an update<\/li>
  4. show an install button<\/li>
  5. on click of this install button, send a message to the waiting service worker to ‘skip waiting’<\/li>
  6. reload the page<\/li><\/ol>

    For a good article on this, also with diagrams, checkout\u00a0Handling Service Worker updates \u2013 how to keep the app updated and stay sane<\/a>.<\/p>

    Happy updating!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

    What’s a PWA? A Progressive Web Application is a web application that leverages more of your host Operating System. It can work both online and offline, can synchronize data in the background, and use notifications. In the browser it can act as a website, on mobile as a native app and on laptops and desktops […]<\/p>\n","protected":false},"author":15,"featured_media":5664,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[149],"tags":[],"class_list":["post-5657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech"],"yoast_head":"\nCreating a "what's new" for your PWA | Kabisa Software Artisans<\/title>\n<meta name=\"description\" content=\"What's a PWA? A Progressive Web Application is a web application that leverages more of your host Operating System. It can work both online and offline,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a "what's new" for your PWA | Kabisa Software Artisans\" \/>\n<meta property=\"og:description\" content=\"What's a PWA? A Progressive Web Application is a web application that leverages more of your host Operating System. It can work both online and offline,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/\" \/>\n<meta property=\"og:site_name\" content=\"Kabisa Software Artisans\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kabisaict\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-03T10:16:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-14T11:56:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kabisa.nl\/wp-content\/uploads\/2023\/10\/PWA-BLog.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Matthijs Groen\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matthijs Groen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating a \"what's new\" for your PWA | Kabisa Software Artisans","description":"What's a PWA? A Progressive Web Application is a web application that leverages more of your host Operating System. It can work both online and offline,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/","og_locale":"en_US","og_type":"article","og_title":"Creating a \"what's new\" for your PWA | Kabisa Software Artisans","og_description":"What's a PWA? A Progressive Web Application is a web application that leverages more of your host Operating System. It can work both online and offline,","og_url":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/","og_site_name":"Kabisa Software Artisans","article_publisher":"https:\/\/www.facebook.com\/kabisaict","article_published_time":"2023-10-03T10:16:44+00:00","article_modified_time":"2023-10-14T11:56:43+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/kabisa.nl\/wp-content\/uploads\/2023\/10\/PWA-BLog.jpg","type":"image\/jpeg"}],"author":"Matthijs Groen","twitter_misc":{"Written by":"Matthijs Groen","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/#article","isPartOf":{"@id":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/"},"author":{"name":"Matthijs Groen","@id":"https:\/\/kabisa.nl\/en\/#\/schema\/person\/26bfc7d2180be651ae6e406c91401f41"},"headline":"Creating a “what’s new” for your PWA","datePublished":"2023-10-03T10:16:44+00:00","dateModified":"2023-10-14T11:56:43+00:00","mainEntityOfPage":{"@id":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/"},"wordCount":621,"commentCount":0,"publisher":{"@id":"https:\/\/kabisa.nl\/en\/#organization"},"image":{"@id":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/#primaryimage"},"thumbnailUrl":"https:\/\/kabisa.nl\/wp-content\/uploads\/2023\/10\/PWA-BLog.jpg","articleSection":["Tech blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/","url":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/","name":"Creating a \"what's new\" for your PWA | Kabisa Software Artisans","isPartOf":{"@id":"https:\/\/kabisa.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/#primaryimage"},"image":{"@id":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/#primaryimage"},"thumbnailUrl":"https:\/\/kabisa.nl\/wp-content\/uploads\/2023\/10\/PWA-BLog.jpg","datePublished":"2023-10-03T10:16:44+00:00","dateModified":"2023-10-14T11:56:43+00:00","description":"What's a PWA? A Progressive Web Application is a web application that leverages more of your host Operating System. It can work both online and offline,","breadcrumb":{"@id":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/#primaryimage","url":"https:\/\/kabisa.nl\/wp-content\/uploads\/2023\/10\/PWA-BLog.jpg","contentUrl":"https:\/\/kabisa.nl\/wp-content\/uploads\/2023\/10\/PWA-BLog.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/kabisa.nl\/en\/tech\/creating-a-whats-new-for-your-pwa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kabisa.nl\/en\/"},{"@type":"ListItem","position":2,"name":"Tech blog","item":"https:\/\/kabisa.nl\/en\/tech\/"},{"@type":"ListItem","position":3,"name":"Creating a “what’s new” for your PWA"}]},{"@type":"WebSite","@id":"https:\/\/kabisa.nl\/en\/#website","url":"https:\/\/kabisa.nl\/en\/","name":"Kabisa Software Artisans","description":"Mission-critical Software for Hightech, Fintech & E-commerce","publisher":{"@id":"https:\/\/kabisa.nl\/en\/#organization"},"alternateName":"Kabisa","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kabisa.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/kabisa.nl\/en\/#organization","name":"Cloud Legends","alternateName":"Kabisa","url":"https:\/\/kabisa.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kabisa.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/kabisa.nl\/wp-content\/uploads\/2022\/12\/kabisa-favicon.png","contentUrl":"https:\/\/kabisa.nl\/wp-content\/uploads\/2022\/12\/kabisa-favicon.png","width":512,"height":512,"caption":"Cloud Legends"},"image":{"@id":"https:\/\/kabisa.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kabisaict","https:\/\/x.com\/kabisasoftware"],"description":"Software Development is onze core-business. Kabisa ontwikkelt innovatieve maatwerk software die naadloos aansluit bij de behoeftes van klanten en eindgebruikers. Dat doen we in nauwe samenwerking in elke fase van het proces: co-creatie noemen we dat.","email":"info@kabisa.nl","telephone":"0495 430 798","legalName":"Kabisa B.V.","foundingDate":"2006-01-01","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"51","maxValue":"200"}},{"@type":"Person","@id":"https:\/\/kabisa.nl\/en\/#\/schema\/person\/26bfc7d2180be651ae6e406c91401f41","name":"Matthijs Groen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/991e323a3492d8b217feb923ce12d6ef2567ac8447838ec09a1c70775dd2c522?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/991e323a3492d8b217feb923ce12d6ef2567ac8447838ec09a1c70775dd2c522?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/991e323a3492d8b217feb923ce12d6ef2567ac8447838ec09a1c70775dd2c522?s=96&d=mm&r=g","caption":"Matthijs Groen"}}]}},"_links":{"self":[{"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/posts\/5657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/comments?post=5657"}],"version-history":[{"count":78,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/posts\/5657\/revisions"}],"predecessor-version":[{"id":5811,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/posts\/5657\/revisions\/5811"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/media\/5664"}],"wp:attachment":[{"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/media?parent=5657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/categories?post=5657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/tags?post=5657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}