Progressive web apps делают будущее ближе, а интернет лучше

Safari quits Service Worker instances

One thing that is completely different from other browser implementations is how the Safari browser manages Service Worker instances. Taken from Apple WebKit Blog:


“To keep only the stored information that is useful to the user, WebKit will remove unused service worker registrations after a period of a few weeks. Caches that do not get opened after a few weeks will also be removed.”

In other words, if a user installs a PWA and decides to only use the installed app multiple weeks later with no stable internet connection available, the user might just see a blank screen. This can be a huge deal breaker for some users.

Imagine you install a note taking Progressive Web Application on your device, where you keep track of all your important notes, and thus you rely on the application to always work. You expect the app to always work no matter how often you use it or in what environment (e.g. no stable network). This restriction also limits future Service Worker APIs such as Background Synchronization, which requires a Service Worker instance to stay active all the time.

Airplane Mode issue

I also noticed an issue where the user receives a pop up telling that they are in Airplane Mode (see screenshot 1), even though the launched PWA works totally fine without a stable network connection.

To be fair, native iOS applications also display this warning, but only when the app tries to fetch data from the network. However, I tested multiple PWAs (e.g. the 2048 game) which don’t fetch data on application startup, and still the iOS message appeared.

On the upside, this issue is just a minor one and shouldn’t bother too much, since users typically rarely have airplane mode active on a daily basis.

No option to debug Service Workers on iOS (yet)

Up to this date it is still not possible to debug Service Workers on your iOS device. While the Safari Technical Preview shows you which files were loaded from a Service Worker (see ‘Transfer Size’ on screenshot 1), it is missing the ability to fully debug Service Workers on your iPhone for instance.

Still, it is possible to debug Service Workers on your macOS device, as the following screenshot shows. On the upside, it can be expected that Apple will sooner or later provide the ability to also debug Service Workers your iOS device.

Что такое PWA

PWA — это своего рода приложение, устанавливаемое из браузера, которое может предоставить дополнительные функции, основанные на возможностях используемого устройства: сайт может работать автономно оффлайн, делать push-уведомления и выглядеть и работать почти так же быстро, как и отдельное приложение.

Разработчики имеют возможность создавать практически первоклассные приложения с использованием веб-технологий, что всегда значительно проще и дешевле в обслуживании, чем создание собственных приложений. Особенное преимущество PWA — кроссплатформенность. Также одним из преимуществ можно выделить отсутвие необходимости готовое приложение регистрировать в маркетах приложений (таких как Google Play Маркет и App Store), так как приложение устанавливается на телефоне прямо из браузера).

Таким образом PWA — это веб-сайт, который разработан с использованием технологий, что делают опыт взаимодействия с контентом сайта на мобильных устройствах намного приятнее, чем с обычным сайтом, оптимизированном под мобильные устройства. В то же время PWA работает почти как нативное приложение, так как обладает следующими функциями:

  • Работа в оффлайне
  • Быстрая загрузка
  • Работа по защищенному протоколу
  • Умеет в push-уведомления
  • Может выглядеть как полноценное приложение без строки адреса в браузере (например, как этот крайне красивый сайт)

Check out these Progressive Web Apps

Because PWAs are not distributed through Apps Store and don’t require any form of packaging or special distribution, knowing the PWA’s URL is crucial.

To try out fullscreen PWAs, add these to your Home screen:

Or, check out other PWAs for your inspiration.

Be sure to manually tap a link using an iPhone or iPad with iOS 11.3 or later. Visiting, say, Twitter.com in Safari or following a link in Google search results may instead load a website’s mobile version rather than the PWA.

If you don’t use a PWA for a few weeks or so, iOS will attempt to free up the storage taken up by its files. If that happens, the icon will remain on your Home screen but the PWA will be downloaded again when launched because iOS no longer has it in cache.

Why build a Vue PWA?

Here’s the total, 100% honest truth: there is nothing inherently special about Vue.js for making PWAs—it’s just not their main focus.

I’d be lying if I said otherwise. So why on earth did we choose to build a Vue PWA? Because while Vue itself isn’t specifically designed for PWAs, it has a pretty cool tool that is which we wanted to show off: Nuxt.

Nuxt is like the twin brother of Next (which works for React), but is a powerful resource for building a Vue PWA. Nuxt will, essentially, build a PWA that works out-of-the-box. However, you can always change its default options such as name, whether or not it is downloadable to your homepage, giving certain permissions, etc.

Thus, you have a great PWA from the get-go, but you also have a certain level of customization to design your progressive web app specifically to your needs/liking.

As you can imagine, having a tool like Nuxt is a HUGE timesaver and will allow you to reap all the benefits of a Vue PWA without all the painstaking hours it would normally take to build one. And since we’re always looking for ways to optimize developer productivity, Nuxt is a great place to start.

Once again, it’s almost free money. So let’s dive into our Vue PWA example and take a look at how you can actually build one for yourself.

Is Apple becoming more PWA-friendly?

The answer is probably YES.

In any case, it’s a big step for Apple to have moved closer to PWA technology and opened up to it. PWAs under iOS 12.2 and iOS 13 beta: that’s what many have been waiting for.

PWA is the future of mobile applications. There’s a possibility that they will replace native applications with time, becoming a perfect combination of native app and website. 


In a world where the speed to adopt new technology is a competitive edge, businesses that manage to embrace the PWA moment earlier, can significantly drive revenue, increase user engagement while staying ahead of the competition.

If you prompt to build a PWA version for your app, contact us to receive a demo right away.

Further Reading:

Introduction

In this blog article I want to demonstrate how Progressive Web Apps work on the newly released iOS 11.3.0 beta 3. I’ll also look at the differences of PWAs on Apple’s iOS compared to Google’s Android.

Before we dig too deep into the topic I would like to briefly recall what Progressive Web Apps are. In short, Progressive Web Apps are experiences that combine the best properties of native and web, without the restrictions that native applications bring along. PWAs do not require to be installed, work on the first browser visit, and are the next evolution of simple web apps, since they enable new features such as push notifications, offline capabilities, and background synchronization by solely relying on .

One thing to keep in mind is that Progressive Web Apps will gain more features over time, as applications progressively adapt to the available platform features (e.g. the Service Workers or Push API). As for iOS 11.3.0 beta 3, only the Service Worker and Web App Manifest spec have been added.

Other modern standards like  and Background Synchronization are not available on Safari 11.0, but the beauty of Progressive Web Apps is, that they still work and deliver a good user experience, just with fewer features; progressive enhancement is the key here. However, the most anticipated feature by far is the Service Worker, which enables offline capabilities by intercepting and caching network requests. The Service Worker in combination with the Web App Manifest enable Progressive Web Apps to be installed on the user’s iOS Home Screen.

Атрибуты прогрессивного веб-приложения: Что делает PWA?

Давай минуту понастальгируем. Термин Progressive Web App был придуман в 2015 году Алексом Расселом. Вместе с Фрэнсис Берриман Рассел «перечислил атрибуты класса приложений» на основе постепенного и мощного развития современных браузеров. Вот те атрибуты, которые предусмотрены Расселом и Берриманом:

Аттрибуты PWA

  • Progressive работают с каждым пользователем, независимо от выбора браузера, потому что с самого начала созданы с прогрессивным улучшением.
  • Responsive: подходит для любого форм-фактора, рабочего стола, мобильного телефона, планшета и т.д.
  • Connectivity independent: усовершенствование сервиса для работы в автономном режиме или в сетях низкого качества.
  • App-like: использование модели оболочки приложения для обеспечения навигации и взаимодействия в стиле приложения.
  • Fresh: всегда обновляется благодаря процессу обновления сервис-воркера.
  • Safe: использование с помощью транспортного уровня для предотвращения слежения и обеспечения подлинности контента.
  • Discoverable: идентификация как «приложения» благодаря App Manifests и области регистрации рабочего персонала, что позволяет поисковым системам находить их.
  • Re-engageable: упрощает повторное включение с помощью таких функций, как push-уведомления.
  • Installable: позволяет пользователям «сохранять» приложения, которые они находят наиболее полезными на своем домашнем экране, без вмешательства магазина приложений.
  • Linkable: лёгкий обмен по URL-адресу не требующий сложной установки.

#PROTIP 3: Create an “Add to home screen” popup yourself!

On Android, there is a native popup which encourages the user to add an app to their home screen and informs them that our page is a PWA. Unfortunately, there’s no such thing on iPhone, so our visitor is not even aware of our app’s capabilities. Moreover, as much as 3 taps are required on iOS to add an app to the home screen.

But don’t worry, we have a fix for that! We can add a custom popup which will indicate that our app can be added to home screen.

You are free to design that popup as you wish, our example is shown below. The hard part is to display it only in Safari and not in standalone mode (when the app is already added to home screen). You can check if your app is in standalone mode using window.navigator.standalone.

Take a look at this snippet:

After creating the proper popup component and pasting the detection code into the proper lifecycle method, the final product will look like this:

Just bear in mind that on iPad the share button is located at the top of the screen, next to the address bar, so you should change the popup’s location accordingly.

How to enable PWAs features in your site?

Besides developing PWAs from scratch, developing our Web app as a PWA, for which Google already provides a few step by step guides in the Codelabs , and ; it’s also possible to  as well as to enable PWAs features to your already existing site, which can be done by using services like Widely and PWA Builder.

If you use WordPress, you can also use the SuperPWA plugin along One Signal (to manage push notifications) for free, which as can be seen below can be easily configured through the WP control panel:

The result is that your WordPress based site will now provide PWA features (and pass the Lighthouse validation), as can be seen in the “Why my Web Traffic Dropped” example below:

Allowing you to add it to your home screen, which is one of the most attractive PWA features:

You can also combine canonical AMP with PWA features to build a PWAMP site, by following the steps described in :

You can see the result in the How PWAMP Works Website, which is AMP based and also has PWA features:


The current con with PWAMP sites is that as I mentioned recently over twitter, when adding a home screen access to a PWAMP site that was found via a Google search, the URL that you get to do it so is the Google (AMP viewer) one instead of the one of your own site, which hopefully is fixed soon (as Google announced some time ago it was going to start showing directly the site’s own pages URLs):

The good part of “converting” or enabling already existing sites to PWAs, is that although you won’t have that much of a “native app” feel that PWAs developed from scratch will give, they can be a good first step to start testing and profiting from many of the other PWAs functionalities while making sure that your already existing Website is already optimized -without relying on JS to render critical content-.

In conclusion

The implications of PWA’s for iOS user are not readily apparent because Apple doesn’t exactly makes it obvious how to use them. It doesn’t take a genius to figure out the Apple would rather have you download native apps from App Store. That PWAs on iOS have more limited features due to Apple’s sandboxing environment than on Android isn’t helping either.

And because of all that, PWAs probably won’t take over native apps anytime soon.

If you’re dissatisfied with the current state of affairs when it comes to iOS’s support for PWAs, you’re always welcome to file enhancement requests at bugreport.apple.com.

Benefits of Progressive Web Apps

PWAs can run in offline mode and look virtually indistinguishable from native apps. The screenshot top of post shows an offline-capable PWA running full screen on an iPad.

Can you tell the difference between the native Twitter app and the PWA version?

The abilities of PWAs on iOS include the following:

  • Geolocation
  • Camera
  • Audio output
  • Apple Pay
  • Sensors (magnetometer, accelerometer and gyroscope)
  • Speech synthesis (with headsets connected only)
  • Corporate users can receive PWA shortcuts from their company
  • WebAssembly, WebRTC, WebGL and many other experimental features

And because PWAs can be hosted anywhere, their creators can bypass App Store and customers can “install” them without Apple’s approval, right from within the Safari browser (this can be a double-edged sword as no PWAs have ever passed any App Store quality test).

The best thing about PWAs is that they resemble native apps and launch in a fullscreen Safari process without any surrounding chrome. PWAs appear in the app switcher and the Dock of your iPad as any regular native app from App Store.

Sometimes a native app and its PWA counterpart have the same icon

Making the cart handle changing network conditions

For this PWA example’s e-commerce functionalities, I’ll integrate our own dev-first shopping cart platform, Snipcart, to the app.

Snipcart works quite simply: you add the required scripts to your site, then define products directly in the HTML.

One of the shortcomings of service workers is that they can only cache content from your domain. So you’ll have to use another strategy for Snipcart to handle a loss of connectivity.

First, you need to load the required assets only once you have Internet access. I’ll cheat a bit here and use direct DOM manipulation to add the tags to the page’s head—you can adapt it whatever framework you’re using!

Above, I check what file were loaded, and every time the browser comes back online, I go through those checks again. With a few more events, you can handle products added to the cart while Snipcart isn’t yet loaded or when you are offline:

In those event handlers, we maintain a queue of products to be added.

What are PWAs SEO Best Practices?

However, there are also some requirements which should be taken into consideration to make sure PWAs are indeed discoverable through search engines.

First, is important to understand that although PWAs can provide many benefits from a functionality perspective over native apps, they don’t offer any advantage over responsive Websites from a searchability perspective (at least at this moment).

In fact PWAs can usually generate additional SEO challenges due to their “Web app”, JavaScript reliant nature, for example, when developed as Single Page Applications relying on JavaScript to display the different site pages and their information (instead of the “traditional Web” multi page architecture); as John Mueller shared in a Google Webmaster Help thread:

“One common approach to creating PWAs is to use client-side-rendering (essentially a bare-bones HTML page with JavaScript that creates all of the content & functionality); these kinds of sites can be rendered and indexed by Google, but it’s usually much trickier than a static HTML site… This can result in a kind of trade-off between easier development and nice UIs, but tricker handling of SEO.”


Because of this, it’s then critical to “balance” the way PWAs are developed by following some fundamental SEO principles:

  • Each page should be independently crawlable, available through an specific URL that doesn’t use fragment identifiers (# or #!).
  • The content of each page should be indexable, and although Google Web Rendering service (currently based on Chrome 41) supports JS rendering, it will defer client side JavaScript rendering to a “second wave of indexing” until it has enough resources to do it so, fetching only the server-side rendered content in the initial indexing wave. It’s then important to use server side rendering (SSR) whenever it’s possible for any meaningful content as well as navigation of the site to ensure their indexability. Check out  , React and Angular server side rendering guides. If this is not possible then use dynamic rendering, for which puppeteer, or services like prerender can be used. It’s also important to avoid  which are not supported by Chrome 41, as well as to understand other limitations.
  • Each page should specify its canonical URL (the original one meant to be indexed) by using the canonical tag.
  • When enabling a PWA along non-canonical AMP (in PWAMP configurations) then the should be also included to specify the AMP URLs.
  • The Website should have a responsive web design, including a viewport tag that should be correctly configured, and it should pass Google’s mobile friendly test.
  • If dynamic serving is used to show a different design based on the used device, make sure the content is always the same for users and search bots, avoiding cloaking.
  • The Website should be secure and run entirely in HTTPS, 301-redirecting from HTTP to HTTPS, while avoiding using non-secure resources that will trigger mixed content issues. Here’s an HTTPS migration checklist in case you haven’t done it yet.
  • The Website pages should load fast -which can be also more easily achieved by using PWAs along AMP (PWAMP), as well as following Web performance optimization best practices-. Google recommends to validate that the time to interactive is under 10 seconds for the first visit on a simulated 3G network, which can be verified by using the Pagespeed Insights tool -now integrating Lighthouse data-. Additionally, it’s important to take into consideration that based on different tests the googlebot will wait up to 5 seconds to render and take a snapshot of a page content, and therefore it’s as well important to make sure that it renders below that time.

Workbox v5

  • can be used to make arbitrary changes to any aspect of the precache manifest, including adding entries, deleting them, and changing their revision or url fields as needed.

Your swSrc file in v4 might have looked like precacheAndRoute([]);In v5, you should change this to precacheAndRoute(self.__WB_MANIFEST);

Reading pre-cached files directly

it’s still a to call to determine the actual cache key, including the parameter, if you need to access precached entries using the Cache Storage API directly.

Alternatively, if all you need is the precached  object, you can call , which will automatically use the correct cache key and search in the correct cache:

What is wrong with PWA support on iOS?

In the latest iOS update, Apple added support for service workers and app manifest files. You can now leverage caching with service workers and make your PWA work without an internet connection. Let’s remember – this is a basic requirement within the PWA definition. And, unfortunately, there are a few drawbacks to Apple’s implementation.

The support of service workers is very limited compared to Android. You can only persist app data and cache files, but no background tasks. There is also a 50MB and “few weeks” limit for storage.

iOS 11.3 also introduced support for manifest files. But our tests showed that it is far from perfect. Icons are not working perfectly (or at all) and there’s no support for launch screens — you’ll get only a blank white screen when the app is loading. The app is reloaded each time it is brought back from the background, and there’s no support for push notifications and many other functionalities which are essential for a mobile app. To sum up — the overall UX is quite bad.

What’s a Progressive Web Apps (PWAs)?

A Progressive Web App (PWA) is an “enhanced” web application that unlike others, provides a native app-like experience to Web users by using a set of technologies that allow them to combine the best of both, the app and Web functionalities in a secure environment:

  • Like native apps: They are reliable, connectivity independent (available offline) thanks to the usage of service workers, installable (allowing to add to the home screen with the help of a Web app manifest), as well as engaging (by using push notifications).
  • Unlike native apps: They are progressive and responsive (work on any device), discoverable (its content can be findable through search engines) and linkable (facilitating their shareability).

As can be already seen above, the core technologies that PWAs rely on and provide the key benefits are:

  • The application shell architecture: Providing a fast loading time
  • TLS: Making it secure
  • Service workers: Giving offline support
  • Web app manifest: Allowing home screen access

These help to close the gap between the functionality of mobile Websites and apps.

PWAs are also not only mobile focused (all modern browsers now support service workers), but multi-device, and are also now supported on desktop in Chrome OS (Chrome 67+), Linux (Chrome 70+), Windows (Chrome 70+) and support is said to be under development for Mac.

Conclusion

Gatsby is a darn smart piece of engineering. While it does have a learning curve and tricky debugging, once you get it, it’s so powerful you’ll get to love it real quick.

Crafting this whole tutorial took me a few more days than our usual demos. I encountered a few unidentified GraphQL errors, and the command once crashed midway without returning an error code. But overall, I had a fun experience working on this PWA example.

Of course, I couldn’t cover all possible use cases in a single post—there are SO many awesome features under the PWA umbrella. With more time on my hands, I’d have explored the Notification and Push APIs to boost mobile app user engagement.

Here’s hoping you learned a thing or two with this piece. I sure did! 🙂

The good of PWAs on the previous version (iOS 12.2)

First, we would like to make a list of some great additions that are welcome to the PWA world on iOS 12.2:

  • Gestures now available for navigation within your PWA (aka back gesture)
  • Web Share
  • Intersection Observer
  • <datalist> support
  • <input type=color> support
  • inputmode attribute support
  • Abortable Fetch
  • CSS Conic Gradients
  • Changes in app’s lifecycle and external links management
  • New experiments available (but disabled by default): Pointer Events, CSS Custom Properties, CSSOM View Scrolling, CSS Painting, CSS Typed OM, MediaCapabilities, Media Recorder, Server Timing, Web Authentication, WebGL 2.0, changes to WebRTC
  • New experiments available and enabled by default: every <a> without a target will imply a rel=noopener, IntersectionObserver, VP8 codec and H264 simulcast for WebRTC
  • Preload, Storage Access, Service Worker and the Cache Storage APIs are not an experiment anymore and they can’t be disabled now

Let’s them in more detail:

Web Share

Web Share works only after a user gesture and lets you share a link with a title and an optional text on any native app, including native behaviors such as AirDrop or Copy.

Form additions

With <input type=color> we can render a color picker. There is a bug here: on landscape mode the last row of colors is unselectable

With datalist, we can have an open input text box with suggestions on the keyboard and within a dropdown menu

Ghost windows within the iOS multitask switcher

Когда вам не стоит делать PWA?

В принципе, почти любой сайт, имеющий мобильную версию от PWA, только выиграет, но, разумеется, есть и исключения:

  • Разовые события: конференции, концерты и т.д. Установка приложения – это все-таки действие, даже если это PWA, и установка практически ничего не требует от вашего клиента. Кроме того, его потом придется удалять. Пожалуй, для таких задач PWA и недостаточно рентабельны, и неудобны для конечного пользователя.
  • Похожий пример – лендинги. Если ваша задача решается посадочной страницей, PWA – ненужное излишество. Посадочная страница продукта или услуги – не то, что посещается десятки раз одним и тем же человеком.
  • Если мы говорим не о сайтах, а именно о приложениях, то все, что требует доступа к большим ресурсам, чем доступны PWA, например, к списку контактов, не оправдывает его разработку.

What is a Progressive Web Application (PWA)?

Progressive Web Application is an umbrella term coined by Google engineers. It is rather a set of development principles than a specific technology or stack. Three significant principles encompass the approach:

1. Reliability

Through service workers, a PWA is never unresponsive to a user’s request, no matter the device or network condition, including offline status.

2. Performance

With techniques like compression, pre-caching, code splitting, and progressive rendering, a PWA drastically reduces the number of «pogo-sticking» users—the ones abandoning your website when it’s slow to load! The goal here is to strive for minimum time-to-interactive.

3. Engagement

Through the Web App Manifest, PWAs become easily installable on mobile home screens. As a developer, you get the best of both worlds here: no app store redirection/lousy installs AND the ability to engage mobile users with web push notifications. All of that inside a web app that feels and behaves almost identically to a native mobile app.

For a more comprehensive PWA checklist, make sure to check this Google entry. Oh, and this Beginner’s Guide to PWA is also worth a look!


С этим читают