Giter VIP home page Giter VIP logo

pwa_manifest's Introduction

TYPO3 Extension "PWA Manifest"

Build Status

This extension adds PWA Web App Manifest configuration in TYPO3 Site Configuration

If you have any questions just drop a line in #initiative-pwa Slack channel.

Requirements

Extension requires TYPO3 in version at least 9.5.

Version TYPO3
2.x 12.0 - 12.4
1.x 9.5 - 11.5

Installation

Install extension using composer
composer require friendsoftypo3/pwa_manifest

then, include typoscript template, and go to page with ?type=835.

Configuration

Go straight to Site Configuration in your TYPO3 backend and edit your page. Configuration

Web App Manifest

Check reference for more information.

{
   "short_name": "Maps",  
   "name": "Google Maps",
   "icons": [
     {
       "src": "/images/icons-192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
       "src": "/images/icons-512.png",
       "type": "image/png",
       "sizes": "512x512"
     }
   ],
   "start_url": "/maps/?source=pwa",
   "background_color": "#3367D6",
   "display": "standalone",
   "scope": "/maps/",
   "theme_color": "#3367D6"
 }

Development

Development for this extension is happening as part of the TYPO3 PWA initiative, see https://typo3.org/community/teams/typo3-development/initiatives/pwa/

Credits

A special thanks goes to macopedia.com company, which is sponsoring development of this solution.

Developers involved in the project

  • Łukasz Uznański (Macopedia)

pwa_manifest's People

Contributors

lukaszuznanski avatar maikschneider avatar sammythesalmon avatar steffenf14 avatar svenpet90 avatar tmotyl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

pwa_manifest's Issues

File paths in TYPO3 v12

TYPO3 Version: 12.4.8
Extension Version: 2.0.0
Composer Installation: Yes

First and foremost, thank you very much for your TYPO3 v12 modifications. I attempted to use the extension and encountered two problems, all of which were related to the fact that extensions in TYPO3 v12 are no longer stored in /public/typo3conf/ext.

  1. When I check my console in the frontend, I receive the following error:

Failed to register a ServiceWorker for scope ('[...]/typo3conf/ext/pwa_manifest/Public/Javascript/') with script ('[...]/typo3conf/ext/pwa_manifest/Public/Javascript/sw.js'): A bad HTTP response code (404) was received when fetching the script.

  1. Up until now, we had uploaded the manifest icons to our sitepackage extension. I tried using EXT: in the site configuration to set a dynamic path to the icons, but that does not get resolved. It would be awesome if this worked because I don't want to put them into fileadmin. 😅

No matching service worker detected

Hey guys,

thanks for your plugin. Its my first contact with PWAs and it seemed simple to install. My test installation url is https://teamdoku.de/
I gave the plugin the base url as start url and / as scope. But its not going to work. May you help me to find the issue?
Sorry for the greenhorn question ;-)
Greetings,

Chris

[FEATURE] use the entryPoint/base instead of custom URL

It seems weird to specify the Start URL when the entry Point / base is already set. The entry Point / base can also be overriden with basevariants which is very helpful for local development.
Maybe make an option to either specify a Custom URL or use the base(with basevariants) ?

[FEATURE] Implement pages cache handling

Implement custom header to cache or disable cache for page.

You can set setting in page to disable cache. By default we send e.g. 'X-Service-Worker-Cache:' and we cache page.

Also, static cache pages could be set in Site Configuration.

[FEATURE] TYPO3 v12 support

We should add TYPO3 v12 support for this handy extension :-)

Some TCA changes regarding deprecated field definitions like

'type' => 'input',
'renderType' => 'colorpicker',

to

'type' => 'color',

and defined('TYPO3_MODE') || die(); to defined('TYPO3') || die(); should already do the trick.

Since these changes would contain BC Breaks a new version of this EXT would be nessary :-)

I'll open a PR in a few minutes.

TCA site configuration: Fields to be displayed are overwritten

If you have another extension that also adds fields to the site configuration,
it may happen that the fields to be displayed are overwritten by the configuration below:

$GLOBALS['SiteConfiguration']['site']['types']['0']['showitem'] = '--palette--;;default,--palette--;;base,
                --div--;Manifest;manifest,--palette--;Manifest;manifest,--palette--;Colors;manifestColors,--palette--;Manifest small icon;manifestSmallIcon,--palette--;Manifest big icon;manifestBigIcon,
                --div--;Manifest Shortcuts;manifest,--palette--;Manifest Shortcut 1;manifestShortcuts1,--palette--;Manifest Shortcut 2;manifestShortcuts2,--palette--;Manifest Shortcut 3;manifestShortcuts3,
                --div--;LLL:EXT:backend/Resources/Private/Language/locallang_siteconfiguration_tca.xlf:site.tab.languages, languages,
                --div--;LLL:EXT:backend/Resources/Private/Language/locallang_siteconfiguration_tca.xlf:site.tab.errorHandling, errorHandling,
                --div--;LLL:EXT:backend/Resources/Private/Language/locallang_siteconfiguration_tca.xlf:site.tab.routes, routes';

File: pwa_manifest/Configuration/SiteConfiguration/Overrides/sites.php

Better would be to replace it with string replace:
https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/SiteHandling/ExtendingSiteConfig.html#extending-the-form-gui

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.