PWA Installability Support

[zans-laksa]

Description: In august 2021 chrome will change installability criteria and PWA will not be installable if the page is not available offline. Currently we have an offline support and a offline page. But it works only if app was launched and then goes offline. We should inspect new installability criterias, possible solutions and implement offline page support in a way Chrome wants it.

Screenshots, Video, Logs

Additional context: https://javascript.plainenglish.io/your-pwa-is-going-to-break-in-august-2021-34982f329f40

[zans-laksa]

Additionally:

1. Check if manifest is lost on demo update.
2. Check lighthouse pwa tests on demo page.

[zans-laksa]

Current ScandiPWA is pretty installable. Added some fixes to pass lighthouse report checks. But if project is connected to the prerender.io, it lighthouse will tell that the website is not installable, even if install button is appearing. This is happening, because prerender.io outputs pure html + css without any javascript. The solution could be to configure cloudflare to append custom javascript in order to register ServiceWorker.

ServiceWorker registration code, that checks whether user agent is a crawler:

!(function () {
    var re = /(googlebot\/|Googlebot-Mobile|Googlebot-Image|Google favicon|Mediapartners-Google|bingbot|slurp|java|wget|curl|Commons-HttpClient|Python-urllib|libwww|httpunit|nutch|phpcrawl|msnbot|jyxobot|FAST-WebCrawler|FAST Enterprise Crawler|biglotron|teoma|convera|seekbot|gigablast|exabot|ngbot|ia_archiver|GingerCrawler|webmon |httrack|webcrawler|grub.org|UsineNouvelleCrawler|antibot|netresearchserver|speedy|fluffy|bibnum.bnf|findlink|msrbot|panscient|yacybot|AISearchBot|IOI|ips-agent|tagoobot|MJ12bot|dotbot|woriobot|yanga|buzzbot|mlbot|yandexbot|purebot|Linguee Bot|Voyager|CyberPatrol|voilabot|baiduspider|citeseerxbot|spbot|twengabot|postrank|turnitinbot|scribdbot|page2rss|sitebot|linkdex|Adidxbot|blekkobot|ezooms|dotbot|Mail.RU_Bot|discobot|heritrix|findthatfile|europarchive.org|NerdByNature.Bot|sistrix crawler|ahrefsbot|Aboundex|domaincrawler|wbsearchbot|summify|ccbot|edisterbot|seznambot|ec2linkfinder|gslfbot|aihitbot|intelium_bot|facebookexternalhit|yeti|RetrevoPageAnalyzer|lb-spider|sogou|lssbot|careerbot|wotbox|wocbot|ichiro|DuckDuckBot|lssrocketcrawler|drupact|webcompanycrawler|acoonbot|openindexspider|gnam gnam spider|web-archive-net.com.bot|backlinkcrawler|coccoc|integromedb|content crawler spider|toplistbot|seokicks-robot|it2media-domain-crawler|ip-web-crawler.com|siteexplorer.info|elisabot|proximic|changedetection|blexbot|arabot|WeSEE:Search|niki-bot|CrystalSemanticsBot|rogerbot|360Spider|psbot|InterfaxScanBot|Lipperhey SEO Service|CC Metadata Scaper|g00g1e.net|GrapeshotCrawler|urlappendbot|brainobot|fr-crawler|binlar|SimpleCrawler|Livelapbot|Twitterbot|cXensebot|smtbot|bnf.fr_bot|A6-Indexer|ADmantX|Facebot|Twitterbot|OrangeBot|memorybot|AdvBot|MegaIndex|SemanticScholarBot|ltx71|nerdybot|xovibot|BUbiNG|Qwantify|archive.org_bot|Applebot|TweetmemeBot|crawler4j|findxbot|SemrushBot|yoozBot|lipperhey|y!j-asr|Domain Re-Animator Bot|AddThis|HeadlessChrome|render|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp|scandibot)/i;

    if ('serviceWorker' in navigator && re.test(navigator.userAgent)) {
        window.addEventListener('load', function () {
            navigator.serviceWorker.register('/service-worker.js', { scope: '/' });
        });
    }
})();

[zans-laksa]

There is another issue with the prerender. For both mobile and desktop modes page is prerendered on this browser:

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/90.0.4430.93 Safari/537.36 Prerender (+https://github.com/prerender/prerender)
Width: 800
Height: 600

This gives us inability to determine whether browser is mobile with javascript (see src/uril/Mobile/isMobile.js). As the result we have desktop components with the mobile css on the Lighthouse thumbnails.

[carinadues]

Close after PR https://github.com/scandipwa/scandipwa/pull/2732 is merged

[aleksandrakorolova]

Created separate tasks #2941 and #2944